一道送分题，测测你的前端功底扎不扎实

1.2万前端开发已关注

39个好友已关注

刚开始学习前端的时候，大多数人都会遇到这种情况：总觉得自己对于知识点已经懂了，但又有点迷茫，因为不知道怎么用。

其实，对于刚开始学习和转行的人来说，不断的练习是一个很好的提高手段。仿一个页面，仿一个APP，都可以用来检验自己的前端知识是不是真的get到了。

我们今天就从一个计算器开始自测。

首先，请打开你的手机里自带的计算器，仔细观察，然后就可以开始运用你知道的知识写了。

如果愿意，请先暂停阅读文章，自己动手写一下这段代码。

如果你能准确无误地写出来，那你的前端能力，基本就达标了。如果没有，咳咳..快好好学习吧！

~~~ 华丽的五分钟过去了 ~~~

如果你已经写好了，可以接着看看有没有不同的实现方法。如果你经过思考后，还是迷茫不知道怎么开始，那也可以接着往下看。

我们看下手机中计算器这个APP，然后开始画这个页面。

一行4个按钮，每个按钮是圆形， 中间有间隔，相信大部分人都能写出来，而且还有很多不同的方法能实现这个布局，比如display: flex，比如display:table 都能实现。

而且flex的方式更简单，flex:1，就能等分，而不用去计算。大家可以每种都试试，这样才能更好的理解css的各种属性。

目前我这里是用float: left 来实现。很简单，但是想问两个问题：

上面的的 width :(21% + 2% * 2) *4 = 100%， 但是为什么要写padding-top: 21%

为什么border-radius: 100px，而不是border-radius: 50%？

如果愿意，请再暂停阅读，思考2分钟。

~~~ 华丽的二分钟过去了 ~~~

有答案了没？以下是答案，看看你有没有答对。

padding的百分比是相对于宽度的，所以21%能形成一个正方形

如果是border-radius的话，下面 '0' 按钮，占两个位置，形成的会是一个椭圆，而我们只要写一个数值大过短径的就能按照效果图显示了

页面已经画好了，那我们要开始写计算的逻辑了。

首先，肯定就是事件监听了。

除了这种方式，我们还有么有别的方式么？答案当然是有。

我们还可以用事件委托，使用事件委托能够提高JavaScript性能。事件委托可以显著地提高事件处理速度，减少内存的占用。

接下来是计算。

简单的我们可以使用eval()来计算，先实现功能，然后一步步的发现问题解决问题。

用eval()计算后，尝试小数的计算时候，会发现0.1+0.7居然不等于0.8，而这是因为javascript精度丢失的问题。我们发现这个问题就要解决。

目前常用解决精度问题是将小数 * 10的 n 次幂，换算成计算机能够精确识别的整数，下面我们给出了加法，同理我们可以写减法和乘法。

解决了精度问题，我们可以继续深入。

一个计算器是需要进行四则运算的。我们平时看到的表达式是中缀表达法，例如1+2*3，运算符在数字的中间，对于人而言，一眼看过去就知道先做乘法，再做加法，但是不易于计算机解析。在这里我们可以选择一个比较方便后缀表达法，使用堆栈结构对表达式进行解析并计算。

至此，一个计算器的代码就已经写完了。

Frontender -

持续关注互联网、web前端开发、IT编程资料分享。

其它功能正在完善，不定期更新....

点赞和分享是对我们最大的支持