Js實現簡單計算器3 面向物件的方法 優化寫法
阿新 • • 發佈：2019-02-12
還是一樣的效果圖，如下：
這次採用面向物件的方法，建立了一個Caculator類，下面是類似於uml2.0類圖描述
| :Caculator | |
|---|---|
| experssion:object | |
| result:object | |
| keyboad:object | |
| state:(0|1|2) | 0:input 1:caculated 2:err |
| cl( ) | clear |
| del( ) | back |
| eval( ) | |
| inputNum( ) | |
| inputOper( ) | |
| ini( ) | to bind event |
原先方法是通過遍歷btn進行繫結事件，這樣效率不高。現在僅在keyboard中繫結事件，通過event.target屬性來判斷觸發的方法。可以看見，這樣的寫法程式碼簡單很多。原始碼如下：
<!DOCTYPE html> <html> <head> <title>Caculator</title> <style type="text/css"> .content { display: block; position: relative; top: 150px; width: 400px; left: 30%; font-family: Consolas; font-weight: lighter; font-size: 16px; } .monitor { width: 400px; border: solid 1px black; text-align: right; background-color: #f7f7f7; } .monitor input { border: none; font-size: 30px; text-align: right; width: 380px; padding: 5px; background-color: #f7f7f7; } .monitor #expression { font-size: 32px; height: 50px; } .monitor #result { color: red; } .keyboard { width: 400px; display: block; padding-top: 10px; padding-left: 5px; } .keyboard span { border: solid 1px #cccccc; margin: 0px; display: inline-block; width: 20%; height: 40px; text-align: center; padding: 15px 5px 5px 5px; cursor: pointer; } .keyboard span:hover { background-color: cornsilk; } </style> </head> <body> <div class="content"> <div class="monitor"> <input id="expression" type="text" maxlength="200" multiple="1" value="0"> <input id="result" type="text" maxlength="100" value="0"> </div> <div class="keyboard"> <span>AC</span> <span>DEL</span> <span>/</span> <span>*</span> <span>7</span> <span>8</span> <span>9</span> <span>-</span> <span>4</span> <span>5</span> <span>6</span> <span>+</span> <span>1</span> <span>2</span> <span>3</span> <span style="float:right;height:102px;position: relative;right:5px;line-height: 5em;">=</span> <span>%</span> <span>0</span> <span>.</span> </div> </div> <script type="text/javascript"> function Caculator() { this.expression = document.getElementById('expression'); this.result = document.getElementById('result'); /*this.btns = document.getElementsByTagName('span');*/ this.keyboard = document.querySelector('.keyboard'); this.state = 0;//0 input 1 caculated 2 error this.cl = function () { this.expression.value = '0' ; this.result.value = '0'; this.state = 0; }; this.inputOper = function (val) { if (0 == this.state) { this.expression.value += val; } else if (1 == this.state) { this.expression.value = this.result.value; this.expression.value += val; this.state = 0; } else { this.cl(); this.inputOper(val); } }; this.inputNum = function (val) { if (0 == this.state) { if ('0' == this.expression.value) { this.expression.value = val; } else { this.expression.value += val; } } else if (1 == this.state) { this.cl(); this.inputNum(val); } else { this.cl(); this.inputNum(val); } }; this.eval = function () { if (0 == this.state) { try { this.result.value = eval(this.expression.value).toString(); this.state = 1; } catch (err) { this.result.value = 'ERR'; this.state = 2; } } else if (1 == this.state) { this.cl(); } else { this.cl(); } }; this.del = function () { if (0 == this.state) { if (this.expression.value.length <= 1) { this.expression.value = '0'; } else { this.expression.value = this.expression.value.slice(0, -1); } } else if (1 == this.state) { this.state = 0; this.del(); } else { this.cl(); } } /* this.ini = function () { for (var i = 0; i < this.btns.length; i++) { var btn = this.btns[i]; var content = btn.innerHTML.trim(); switch (content) { case 'AC': btn.onclick = (function (caculator) { return function (event) { caculator.cl(); } })(this); break; case '=': btn.onclick = (function (caculator) { return function () { caculator.eval(); } })(this); break; case 'DEL': btn.onclick = (function (caculator) { return function () { caculator.del(); } })(this); break; default: if (isNaN(Number(content))) { //is operator btn.onclick = (function (caculator, content) { var cont = content; return function () { caculator.inputOper(cont); }; })(this, content); } else { //is number btn.onclick = (function (caculator, content) { var cont = content; return function () { caculator.inputNum(cont); }; })(this, content); } break; } } }*/ this.ini = function () { this.keyboard.addEventListener('click', (function (caculator) { return function (event) { if (event.target.tagName.toLowerCase() != 'span') return ; var cont = event.target.innerHTML; var operArr = ['+', '-', '*', '/', '.']; switch (cont) { case 'AC': caculator.cl(); break; case 'DEL': caculator.del(); break; case '=': caculator.eval(); break; default: if (operArr.indexOf(cont) >= 0) { //is operator caculator.inputOper(cont); } else { caculator.inputNum(cont); } break; } } }) (this), true); } }; var mycaculator = new Caculator(); mycaculator.ini(); </script> </body> </html>