所有人:一道送分题,测测你的前端功底扎不扎实

关键时刻,第一时间送达!

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

其实,对于刚开始学习和转行的人来说,不断的练习是一个很好的提高手段。仿一个页面,仿一个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,运算符在数字的中间,对于人而言,一眼看过去就知道先做乘法,再做加法,但是不易于计算机解析。在这里我们可以选择一个比较方便后缀表达法,使用堆栈结构对表达式进行解析并计算。

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

来自:前端开发

https://mp.weixin.qq.com/s/i7vP-oux94-q50lCmWoSRA

程序员共读整理发布,转载请联系作者获得授权

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180619B1IMLA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券