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

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

    
        
        
        
    
    
        

            

                
0
            
            

                
7
                
8
                
9
                
/
                
AC
            
            

                
4
                
5
                
6
                
*
                
=
            
            

                
1
                
2
                
3
                
-
            
            

                
.
                
0
                
Del
                
+
            
        
        
    

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 ) {
    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入门》这本书。

三，感悟

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

转载于:https://www.cnblogs.com/wang-san/p/9726774.html