Gorsonpy的计算器

var expression = ""; //实际运算的表达式
1

<div class="center">
        <h1>$Gorsonpy$ 的 计算器h1>
        <a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github">i>a>
        <form name="calculator">
            <button type="button" id="clear" class="btn other" value="clear" onclick="clear();">$CE$button>
            <button type="button" id="clear" class="btn other" value="BACK" onclick="back();">⌫button>
            <input type="text" id="display">
            <br>
            <input type="button" class="btn number" value="7" onclick="get(this.value);">
            <input type="button" class="btn number" value="8" onclick="get(this.value);">
            <input type="button" class="btn number" value="9" onclick="get(this.value);">
            <input type="button" class="btn operator" value="+" onclick="get(this.value);">
            <input type="button" class="btn operator" value="(" onclick="get(this.value);">
            <input type="button" class="btn operator" value="log" onclick="get_with_left_bracket(this.value);">
            <input type="button" class="btn operator" value="tan" onclick="get_with_left_bracket(this.value);">
            <input type="button" class="btn operator" value="atan" onclick="get_with_left_bracket(this.value);">
            <br>
            <input type="button" class="btn number" value="4" onclick="get(this.value);">
            <input type="button" class="btn number" value="5" onclick="get(this.value);">
            <input type="button" class="btn number" value="6" onclick="get(this.value);">
            <input type="button" class="btn operator" value="*" onclick="get(this.value);">
            <input type="button" class="btn operator" value=")" onclick="get(this.value);">
            <button type="button" class="btn operator" value="x^y" onclick="pow();">$x^y$button>
            <input type="button" class="btn operator" value="asin" onclick="get_with_left_bracket(this.value);">
            

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

2. 按钮关联一些函数:

/* recebe os valores */
        function get(value) {
            if (document.getElementById("display").value === errMsg) {
                document.getElementById("display").value = "";
            }
            document.getElementById("display").value += value;
            expression += value;
        }
        function pow() {
            if (document.getElementById("display").value === errMsg) {
                document.getElementById("display").value = "";
            }
            document.getElementById("display").value += "^";
            expression += "^";
        }
        ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 按下等号的时候计算:

function calculates() {
            document.getElementById("display").value = "";
            var result = "";

            if (expression === "") {
                document.getElementById("display").value = "";
                expression = "";
            } else {
                try {
                    result = math.evaluate(expression, customSymbols);
                } catch (error) {
                    console.error("An error occurred while evaluating the expression: " + error);
                    result = errMsg; // 设置一个错误提示
                }
                document.getElementById("display").value = result;
                expression = "";
            }
        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.程序性能改进

主要是选一个好轮子。因为性能的瓶颈一定是在于正则匹配和解析表达式。自己去胡乱优化也不会有什么效果。我选用的是Math.js库而非原生的eval()，因为原生的eval()算的不准，而且会有安全问题，因为eval总是试图解析字符串内容，无论其是否具有危害。

math.config({
            number: 'BigNumber',
            precision: 64,
        });
1
2
3
4

下面是一个$0.1+0.2=?$的问题，对比一下：
原生的eval：

math. evaluate:

5.异常处理

就是在math.evaluate解析的时候catch异常，并赋予用户一个提示信息.此外，对于除0，溢出等情况，evaluate自动会给出一个infinity。

try {
	result = math.evaluate(expression, customSymbols);
} catch (error) {
	console.error("An error occurred while evaluating the expression: " + error);
    result = errMsg; // 设置一个错误提示 
}
1
2
3
4
5
6

6.单元测试展示

在单元测试这里我遇到了一些困难，主要是JS的这个引文件功能实在太bug了？会遇到各种各样难以明说的错误。因为要做单元测试用Jest框架，就要把之前内嵌在html的js文件分离出来，然而这样又会有新的问题，就是js之间互相引用的问题。经过一番折腾我得出一个折中的办法，要做单元测试的时候把文件分离出来做单元测试，要运行的话把js代码贴回去。
因为我的代码很短，所以单元测试很快就做好了：

test("test add 7 + 8 = 15", () => {
    clearf();
    get(7)
    get("+")
    get(8)
    calculates()
    expect(document.getElementById("display").value).toBe("15")
})

test("test sub 1 - 2 = -1", () => {
    clearf();
    get(1)
    get("-")
    get(2)
    calculates()
    expect(document.getElementById("display").value).toBe("-1")
})
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7.心路历程和收获

  为了设计一个比较美观的前端页面，我去学习了HTML+CSS+JS这前端三件套。体验到了前端的魅力所在。我学习了如何让自己的代码变得用户友好，能够考虑到各种错误情况并给予用户错误信息，而不是程序崩溃，同时学习了如何对代码做好单元测试。