基于ES6编写的计算器小程序

一，计算器页面及相关代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>calculator</title>
        <link rel="stylesheet" type="text/css" href="surface.css" />
    </head>
    <body>
        <table id="calculate" border="1"                                                                                                                                     >
            <tr>
                <td id="show" colspan="5">0</td>
            </tr>
            <tr>
                <td class="number">7</td>
                <td class="number">8</td>
                <td class="number">9</td>
                <td class="number">/</td>
                <td id="empty" class="symbleKey">AC</td>
            </tr>
            <tr>
                <td class="number">4</td>
                <td class="number">5</td>
                <td class="number">6</td>
                <td class="number">*</td>
                <td id="equal" class="equalKey" rowspan="3">=</td>
            </tr>
            <tr>
                <td class="number">1</td>
                <td class="number">2</td>
                <td class="number">3</td>
                <td class="number">-</td>
            </tr>
            <tr>
                <td class="number">.</td>
                <td class="number">0</td>
                <td id="dele" class="symbleKey">Del</td>
                <td class="number">+</td>
            </tr>
        </table>
        <script type="module" src="main.js" defer>
        </script>
    </body>
</html>

import {GettingInformation} from "./calculate.js";

var gettingInformation = new GettingInformation;
var showContent = document.getElementById("show");
var tdEmpty = document.getElementById("empty");
var tdEqual = document.getElementById("equal");
var tdDele = document.getElementById("dele");
var allTd = document.getElementsByClassName("number");

for (var i=0,len=allTd.length;i<len;i++ ) {
    allTd[i].onclick = function() {
         showContent.innerText = gettingInformation.calculate();
    };
}
tdEmpty.onclick = function() {
    showContent.innerText = gettingInformation.empty();
};
tdEqual.onclick = function(){
    showContent.innerText = gettingInformation.equalResult();
};
tdDele.onclick = function(){
    showContent.innerText = gettingInformation.del();
};

const result = Symbol("result");
const num1 = Symbol("num1");
const num2 = Symbol("num2");
const operator = Symbol("operator");
    
class GettingInformation{ 
    
    constructor(){
        this.content = "0";
        this[result] = "";
        this[num1] = "";
        this[num2] = "";
        this[operator] = "";
    }
    calculate(){
        var value = event.srcElement.innerText;
        if (this[result] == "") {
            if (value == "+" || value == "-" ||value == "*" || value == "/") {
                return 0;
            }
        }
        this[result] += value;
        this.content = this[result];
        if (value != "+" && value != "-" && value != "*" && value != "/") {
            this[num1] += value;
            
        } else{
            this[operator] = value;
            this[num2] = this[num1];
            this[num1] = "";
        }
        return this.content;
    }
    empty(){
        this[result] = "";
        this[num1] = "";
        this[num2] = "";
        this[operator] = "";
        this.content = "0";
        return this.content;
    }
    del(){
        var count = this.content.length;
        if (count == 1 ) {
            this[result] = "";
            this[num1] = "";
            this[num2] = "";
            this[operator] = "";
            this.content = "0";
            return this.content;
        } else {
            this.content = this[result].slice(0,-1);
            this[result] = this.content;
            if (this[operator] != "") {
                var site = this[result].indexOf(this[operator]);
                this[num1] = this[result].slice(site+1)
            } else{
                this[num1] = this[result];
            }
            return this.content;
        }
    }
    equalResult(){
        var number1 = Number(this[num2]);
        var number2 = Number(this[num1]);
        
        switch (this[operator]){
            case "+":
                this.content = SimpleMath.add(number1,number2) ;
                break;
            case "-":
                this.content = SimpleMath.subtract(number1,number2);
                break;
            case "*":
                this.content = SimpleMath.multiply(number1,number2);
                break;
            case "/":
                this.content = SimpleMath.divide(number1,number2);
                break;
            default:
                break;
        }
        this[num1] = this.content;
        this[num2] = "";
        this[operator] = "";
        this[result] = this.content;
        return this.content;
    }
}

class SimpleMath{
    
    static add(num3,num2){
        return num3+num2;
    }
    static subtract(num1,num2){
        return num1-num2;
    } 
    static multiply(num1,num2){
        return num1*num2;
    }
    static divide(num1,num2){
        if (num2 == 0) {
            alert("计算不合规范，请按'AC'键置零并重新输入");
            return Infinity;
        }else{
            return num1/num2;
        }
    }
}

export {GettingInformation};

.number:hover{
                background: lightcyan;
            }
            
#equal:hover{
                background: lightcoral;
            }
            
#calculate{
                 margin: auto;
                 margin-top: 80px;
                 border: solid 6px royalblue;
                 border-spacing: 0px;
            }
            
.number{
                cursor: pointer;
                text-align: center;
                border: solid 1px white;
                width: 45px;
                height: 35px;
                font-family:黑体;
                font-weight: bold;
                background-color: cornflowerblue;
            } 

.symbleKey{
                cursor: pointer;
                text-align: center;
                border: solid 1px white;
                width: 45px;
                height: 35px;
                font-family:黑体;
                font-weight: bold;
                background-color: cornflowerblue;
}        
 .equalKey{
                 cursor: pointer;
                text-align: center;
                border: solid 1px white;
                width: 45px;
                height: 35px;
                font-family:黑体;
                font-weight: bold;
                background-color: cornflowerblue;
 }

二，class，module和symbol值

为了更接近传统面向对象语言的写法，ES6引入了class的概念，但与传统意义上的类不同，ES6的class本质上只是现有[[prototype]]（“委托”或关联，传统类机制则是靠“复制”）机制的一种语法糖，ES5可以实现其绝大部分功能。

JavaScript一直没有模块体系，不利于开发大型且复杂的项目，ES6模块（module）可以通过export和import命令来输出输入代码。

symbol值在class中的应用可以达到私有属性和私有方法的效果。如上述代码（应用在class GettingInformation{}中）所示，其缺点是不具有封装性。

欲知JavaScript的class，module，和symbol值的详细介绍可以参阅《ECMAScript6入门》这本书。

三，感悟

一个好的程序讲究高内聚低耦合，良好的封装性和代码的可读性。作为一个新手，很多都是第一次，也是第一次写技术类文章，万里长征至此才踏出第一步，欢迎各位过路大神不吝指正。

基于ES6编写的计算器小程序

一，计算器页面及相关代码

二，class，module和symbol值

三，感悟

猜你喜欢