1. 程式人生 > >Js實現簡單計算器3 面向物件的方法 優化寫法

Js實現簡單計算器3 面向物件的方法 優化寫法

還是一樣的效果圖,如下:

這裡寫圖片描述

這次採用面向物件的方法,建立了一個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>