代碼仍是短點好！

寫代碼以前必定要先想好怎麼寫、怎麼實現。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.所有定義爲全局變量獲取全部要用到的元素：

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')
};

二、經過switch查找title值來判斷是哪個按鈕並觸發不一樣函數

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

三、用循環遍歷的方式觸發不一樣函數

//定義一個函數來遍歷按鈕
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不一樣從而觸發的方法也不一樣
};
});

四、巧用封裝優化代碼
計算方法函數的提取封裝
法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。