一，计算器页面及相关代码
<!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入门》这本书。
三，感悟
一个好的程序讲究高内聚低耦合，良好的封装性和代码的可读性。作为一个新手，很多都是第一次，也是第一次写技术类文章，万里长征至此才踏出第一步，欢迎各位过路大神不吝指正。
