JS 之简单计算器

要求:

响应用户对数字和算术操作符按钮的操作，记录并显示用户通过按钮输入的算术表达式（50分）响应用户功能按钮的操作

用户按下“←”按钮，删除当前算术表达式最后一个字符，并更新显示

用户按下“CE”按钮，清除当前算术表达式（20分）用户按下“=”按钮，计算当前表达式的结果并显示

如果，算术表达式非法，弹出警告框提醒用户，并终止计算

效果图:

代码链接:https://github.com/sysuKinthon/Web2.0/tree/master/Web2.0/calculator

经验:

1）其实代码实现不难，而且用了已经不大推崇的eval函数，这个函数会带来代码注入的问题；

2）实现过程中主要想说的是一种思维，因为之前一直都不怎么接触事件处理机制，一直都是用c,c++,java来打代码，所以在写这个的时候有一个致命的思维误区:

    //if input the symbol, the reslut should be clear;
    for(i = 0; i < symbolList.length; ++i) {
        symbolList[i].onclick = function(event) {  //不能使用i来索引对象，因为当Onclick事件发生时，i已经都是20了。
            if(flag == true) {
                expression.value = "";
                flag = false;
            }
            var content = event.target.innerText;
            expression.value = expression.value + content;
        }
    }

一开始在for循环里面，一上手就想用sybmolList[i]来引用innerText;也就是：

var content = event.target.innerText;
换成
var content = symbolList[i].innerText;

发现我一点击事件就出现越界行为，输出查看i,i的值都是同一个数，这个数决定于window.onload回调函数结束后的i值。要清楚，这是闭包导致的，当我们的DOM加装完毕后，window.onload事件就发动了，并调用事件处理；好像一切都没有问题，但是想想看，当我们点击事件，并触发了symbolList中的对象时，回调了我们设置的函数，此时它引用i的值的话，必然是symbolList.length,因为onload事件已经执行了，但由于闭包，如果我们的点击函数中有引用外部的变量的话，是可以访问到的，在javascript中是采用了垃圾处理机制，闭包包含了外部的活动对象，所以这个对象还没有被销毁，可以被引用。所以我们在程序中是不能直接调用 i来索引事件源的，要使用event.target

拓展：

毕竟利用eval来实现计算会导致一些意想不到的问题，所以就用算法实现了下中缀表达式的计算:参考

关于考虑运算符优先级的问题，也就是什么时候栈里面的运算符应该出栈，主要考虑一个方面就可以了，就是运算符的栈始终要保持栈顶的元素优先级最高，相同优先级的后面进入的优先级高，同时需要考虑对于")"来说，当在遇到"("时，它的优先级是最高的，遇到后，就是最低的了(也就是不要入栈）。

主要的函数代码如下:

// calculator the postfix expression
function calculate(postfix) {
    var i, item, result;
    var num = [];
    for(i = 0; i < postfix.length; i++) {
        item = parseFloat(postfix[i]);
        if(!isNaN(item)) {
            num.push(item);
        } else {
            second = num.pop();
            first = num.pop();
            switch(postfix[i]) {
                case '+':
                    result = first + second;
                    num.push(result);
                    break;
                case '-':
                    result = first - second;
                    num.push(result);
                    break;
                case '/':
                    result = first / second;
                    num.push(result);
                    break;
                case '*':
                    result = first * second;
                    num.push(result);
                    break;
            }
            //console.log(result);
        }
    }
    result = num.pop();
    result = parseFloat(result.toFixed(8), 10);
    return result;
}


// translate the infix expression to the postfix expression
function toPostfix(infix) {
    //split the input to the token
    var regex = /(\(|\)|\/|\*|\-|\+)/;
    var array= infix.split(regex);
    var i;
    var postfix = [];
    var symbol = [];
    // remove the empty item
    for(i = 0; i < array.length; i++) {
        if(array[i] == "")
            array.splice(i, 1);
    }

    for(i = 0; i < array.length; i++) {
        var item = array[i];
        if(!isNaN(parseFloat(item))) {
            postfix.push(item);
        } else {
            while(symbol.length) {
                if(compare(item, symbol[symbol.length-1])) { //if the item is greater
                    break;
                } else {
                    postfix.push(symbol.pop());
                    /*if(postfix[postfix.length-1] == "(")
                        console.log(1);*/
                }
            }
            if(item == ")") {
                symbol.pop(); //pop "("
            } else { 
                symbol.push(item);
            }
        }
    }
    while(symbol.length) {
        if(symbol) {
            postfix.push(symbol.pop());
        }
    }
    return postfix;
}

function compare(item, top) {
    if(item.match(/\)/) && top.match(/\(/))
        return true;
    if(item.match(/\(/) || top.match(/\(/)) {
        return true;
    }
    if(item.match(/\*|\//) && top.match(/\+|\-/)) {
        return true;
    }
    //console.log(item);
    return false;
}