fcc项目总结系列2：calculator

begin: 20170804
version: 20170804

该文是对fcc上计算器项目的总结
项目题目在https://freecodecamp.cn/challenges/build-a-javascript-calculator
我完成的项目在https://codepen.io/jacktown/pen/ZJBdPq
其github地址是https://github.com/jacktown11/fcc/tree/master/calculator。

概述

• 项目利用css3技术实现了一个较有立体感的计算器界面；
• 可以实现简单的加、减、乘、除、取模运算，用户在输入过程中可以取消上步输入、清空所有输入；
• 每次用户有输入时js都会判断当前输入的算式是否合法，如果不合法让算式显示为红色，以提示用户有输入错误；
• 支持结果引用，但是在结果为大数（采用科学计数法表示）时，会有一点问题，但总体不影响使用；
• 不支持高级数学函数、括号，总体功能比较初级。

npm和gulp

该项目在整个项目过程中采用了npm包管理工具来下载依赖文件，安装gulp来实现文件的自动化压缩、导出，对我来说是一个新技能的应用尝试。

界面

界面的实现主要技术点是CSS3阴影，实现了计算器边缘立体效果、按钮的阴影效果、显示行内嵌效果。

写css过程中遇到的一个难点是：要让输入的算式靠在右边且不换行，这本可以直接text-align:center;white-space:nowrap;就OK的，但是当算式很长时，文本行却是靠着显示框左边框开始显示的，右侧的文本显示到了显示框之外，把overflowhidden以后，结果显示框内显示的就是算式开始部分而不是结尾部分。怎么解决呢？将显示的文本再包裹上一个行内块元素，绝对定位right:0;，不设宽度，当然还要右对齐不换行，这样文本右侧总是对齐在显示框的右边了。

在解决上述难点的过程中，我考虑过让文本方向从右往左(text-direction:rtl;)，然后在js生成文本显示是将文本本身翻转一下，这样就正常右对齐了，但是还是不行，因为文本从右往左显示是指单词的显示顺序，然而单词内部的字母却仍旧是从左往右的！而浏览器对单词的识别又不简单地使用空格，由于算式中有小数点、运算符、数字，要把算式文本调整得符合浏览器的识别方法，其过程会十分复杂。故放弃了这种方案。

算法

该项目界面比较简单，除了CSS3外，主要技术点都集中在算法上，主要包括四个方面：

• 根据用户输入识别操作数和操作符
• 根据用户输入进行数据的压入、回退、清空等操作
• 算式合法性检验
• 算式计算

输入识别与处理

这两个比较细节，难度并不大。有两个思路：

• 程序直接保存用户输入的字一个长字符串，每次新输入后都将这个长字符串重新解析出操作数和操作符数组，那么每次新输入的计算都应该是O（n）的时间复杂度，但是这样的好处是编程会相对清晰一点；
• 程序保存根据之前输入已经处理好的操作数和操作符数组，新输入时修改这个数组。

经过该过程以后，用户的输入被处理成一个算式数组，数组元素是操作符或操作数。

算式合法性检验

检验依据：

• 算式第一项必须是操作数或正负号
• 算式最后一项必须是操作数
• 操作数和操作符必须相间出现
• 单独出现的小数点非法

另外还需要区分检验的算式是要立马用于计算（用户点击了=号）还是后续还有输入。

算式计算

其中算式计算相对复杂，有一个极简的思路是利用eval()全局函数，直接将用户输入的字符串传入计算，得到结果，主要问题在于：无法解决浮点数计算误差问题。

为了程序的完善及出于练习编程的考虑，我选择了自己根据算式字符串编写算法，算法的主要思路如下：

• 首先算式必须通过合法性检验，之后进行计算；
• 计算分两步进行：先计算乘、除、取模高优先级运算，再进行加减运算；
• 首先进行乘、除、取模运算，我们称它们为一级操作符，在算式数组中从左往右找到第一个一级操作符，将其左右两个操作数用该操作符运算得到一个结果，将该操作符及其左右两个操作数从算式数组中剔除，将计算得到的结果插入到它们的位置上（利用Array的splice方法可以轻松实现）。重复这一查找、计算、剔除、插入的过程，直到算式数组中不存在一级运算。此后按照同样的方法进行二级运算。二级运算完毕后，算式数组长度为1，其内容就是计算结果。

上面提到了：计算中会出现浮点数计算不准确的问题，比如0.01+0.2的准确结果是0.3，但是程序计算结果可能类似0.210000000000004，这是由于计算机用二进制保存浮点数的精度限制所致。怎样解决呢？我们可以将所有浮点运算转换为整数运算，如这个式子我们可以计算1+20的结果然后除以100，就可以得到准确结果了。这个处理需要贯穿到上述所说的算法的实现中。