代码还是短点好！

写代码之前一定要先想好怎么写、怎么实现。Think twice,Code onece!
注意要将结构和行为进行分离、所以代码可以写好几个版本，第一次写在一个页面，后面再进行分离操作。
HTML代码

<div id="calculator">
<p>
    <input type="text" class="formerInput" value="1" />
    <span class="sign">+</span>
    <input type="text" class="laterInput" value="1" />
    <span>=</span>
    <span class="resultOutput">2</span>
</p>
<p>
    <input type="button" value="+" class="btn" title="add" />
    <input type="button" value="-" class="btn" title="subtract" />
    <input type="button" value="*" class="btn" title="multiply" />
    <input type="button" value="/" class="btn" title="divide" />
</p>
</div>

1、将所有的零散变量变为属性、从而简化为对象来存储
1.全部定义为全局变量获取所有要用到的元素：

var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
var btns = calculator.querySelectorAll('.btn'); //将所有button进行获取

2.全部封装在一个对象中获取所有要用到的元素：

var wrapElem = document.querySelector('#calculator'); //用wrapElem表示为包裹元素
var calculatorElem = { //定义一个对象放置属性，将上面的calculator等变量当作属性处理
formerInput: wrapElem.querySelector('.formerInput'), //属性就要加:号，formerInput为合法标识符可以不用加''号
laterInput: wrapElem.querySelector('.laterInput'),
sign: wrapElem.querySelector('.sign'),
resultOutput: wrapElem.querySelector('.resultOutput'),
btns: wrapElem.querySelectorAll('.btn')
};

2、通过switch查找title值来判断是哪一个按钮并触发不同函数

switch (this.title) {
case 'add':
addHandler();
break;
case 'subtract':
subtractHandler();
break;
case 'multiply':
multiplyHandler();
break;
case 'divide':
divideHandler();
break;
}

3、用循环遍历的方式触发不同函数

//定义一个函数来遍历按钮
function each(array, fn) { //只接收数组,回调函数
for (var i = 0; i < array.length; i++) {
fn(i, array[i]); //执行fn函数
}
}
//绑定事件
each(calculatorElem.btns, function(index, elem) { //定义calculatorElem对象放置属性后，访问变量btns都要用”.” 访问(访问属性的形式)
elem.onclick = function() { //elem表示每一次循环btns的元素，由于不同btns对应的tilte不同从而触发的方法也不同
};
});

4、巧用封装优化代码
计算方法函数的提取封装
法1.暴力写法

//加法函数
function addHandler() {
sign.innerHTML = '+';
resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
//减法函数
function subtractHandler() {
sign.innerHTML = '-';
resultOutput.innerHTML = formerInput.value - laterInput.value;
}

法2.创建对象将函数当作对象的属性或方法来处理，从而管理函数代码，简化代码

a、封装更新符号的函数
function updateSign(symbol) { //通过传入符号来进行判断，用symbol表示符号
calculatorElem.sign.innerHTML = symbol;
}
b、将算数函数封装
var operation = {
//加法函数
add: function(num1, num2) {
return +num1 + +num2;
},
//减法函数
subtract: function(num1, num2) {
return num1 - num2;
},
};
c、调用算数函数
//调用加法函数
function addHandler() {
updateSign('+');
outputResult(operation.add(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
}
//调用减法函数
function subtractHandler() {
updateSign('-');
outputResult(operation.subtract(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
}
d、封装输出结果函数
function outputResult(result) { //传入一个结果进来
calculatorElem.resultOutput.innerHTML = result;
}

注：
1.执行函数：add(); 函数名：add；前者调用就会直接触发使用。
例.当点击click时传递函数名过来即可，传递执行函数的话会直接执行，而函数名则需要点击执行。
2．querySelectorAll()获取指定的全部元素、querySelector获取指定元素中的第一个元素
3.字符串做加法时要将其进行数字转换、否则就是简单的字符串拼接了：1+1=11，加法运算时在字符串前面强制加入+号从而转换为数字、然而JS中两个字符串不可以相减，所以会自动转换为数字再相减（减、除、乘都不用转换）；
加法示例： resultOutput.innerHTML = +formerInput.value + +laterInput.value。