即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

极客分享|web前端开发实战项目计算器制作思路

微信 极客学院 20℃ 0评论
本文目录
[隐藏]

 

写代码不能恍然大悟?

做实战项目没思路?

深夜写代码太孤独?

来看看其他极客怎么想的!

编程心得分享起来~~~

1.                                    

我正在学习极客学院web前端实战项目,通过6关任务,终于制作出了自己第一个像样的小工具,非常开心♪(^∇^*)

在学极客之前自己也陆陆续续自学了一点编程,觉得制作这么一个计算器,对于前端初学者来说真的还是有点吃力。

所以我要把自己的心得和思路分享给大家,也希望大家多指出我的问题或改进的地方,向各位极客学习!

1.1.1.

2.1设计功能

在开始动手做计算器之前,首先需要想好要做什么功能,所以我按照老师视频的要求去找了以下在线计算器:


结果是找到这么一个计算器…

仔细打量了一下,删删减减一些功能后,最后打算做这么一个计算器:


好吧,你也许会说:“好像功能少好多啊!这么简单。”好吧,我承认确实很简单,但是我觉得所有东西都是从简单到复杂,程序也是一样的,所以做好最基础的,其他也蛮有意思的。

总结:我在动手做之前(喂!你样式都写好了好嘛!?)设计好的功能如下:

a.实现正负整数与小数运算。

b.实现四则运算与特殊运算交替

c.实现连续运算(个人认为最难)

d.实现后退与清除功能

本来想写点击按钮缩进去以及按一下有“吡~”的声音的功能…后来由于时间关系,以后再搞= =。

1.1.1.

3.2构思实现逻辑

我之前上过一节北大计算机老师的计算机导论的课,那个老师非常厉害,教得也非常好。他告诉我些程序最重要的是:1. 模块化编程。2.可读性。我觉得很有道理(为什么就我不说了,哈哈哈) 

于是,我把整个计算器运作的流程拆分成四个模块:屏幕输出模块、计算模块、存储于运算模块、清除模块。

当然你也可以有其他的拆分方法。但是在拆分过程中,你就会发现一开始毫无头绪的事情,变得好像有那么一点条理了,每个模块因为承担了不同的功能,所以在编程每个模块时思路也更加清晰了。


我整理一下四个模块的逻辑和流程,原稿太乱了就不给看了,哈哈。接下来分别说一下四个模块:

屏幕输出模块:

关键:值寄存器,数据结构:[”,”,”….]

我的思路是把屏幕中的看做是数组来处理,也就是说屏幕中的“985”,其实是一个数组转化而来的。这样的话,后退功能也就迎刃而解了。

模块的整体逻辑就是拿到输入到脚本的值,然后把值传到值寄存器里,然后通过处理同步输出到屏幕上。

计算模块:

计算模块其实比较简单,就是按照传入的值和运算符,根据运算符进入不同的分支进行不同的数学计算就行了。要说有什么注意点,就是传入参数时四则运算和特殊运算需要的值个数不同。

存储与运算模块:

这个模块是最难的一个模块,也是功能最多的。

这里承担了一个功能难点,就是如何实现连续计算。

我先图解一下,值寄存器(与屏幕输出模块共有一个的)、计算结果寄存器、初始值寄存器,这三个是平级的三个寄存器。用来向计算变量传值。值1与值2是用于四则运算用的计算变量,另外四则运算部分需要一个指针,设定当前需要往值1还是值2传值。特殊值是用于做特殊运算的计算变量。运算符变量是公用的,用来存储计算用的运算符号。

实现连续计算功能的关键在于设定三个寄存器的优先级,优先级从左往右依次递减。

即当值寄存器有值时就传寄存器的值,因为表示有输入数字的操作;当值寄存器没有值,计算结果寄存器有值时,表示没有输入数字操作,但是要求运算,需要使用之前的结果。初始值用于什么都没有输入时,就要求计算的情况。

这样输入好计算用的值以后,把参数传入到计算模块里面,就可以输出结果了。

清除模块:

这是最简单的模块,主要嵌套在存储模块用,还有实现清除按钮的功能。虽然简单,但是难点在于你在哪一步程序的地方,清除那些变量。这个对最终功能实现影响很大。

实现完就可以玩一玩儿了,6乘3再开个根号:


哈哈!还是很有成就感的

4.3[疑难杂症]

为了兼容IE,我花了好多时间…主要用了伸缩盒,所以样式上兼容了半天…最终兼容成这副鬼样子。(我会告诉你我IE10兼容失败了吗?)


所以大家如果要兼容IE,不要用伸缩盒去做….

另外,IE低版本是不兼容object.addEventListener的事件绑定方法的,所以你先判断是什么浏览器,如果是IE,就老老实实绑定onclick事件上吧…

好了,说了好多废话,纪念我第一个完成度比较高的小作品=W=

源码就不贴了,嗯

有什么问题或者意见,请多多提哈!嘿嘿嘿

这篇分享对你有启发?分享到朋友圈让更多学习伙伴一起成长!

本文转载自极客学院就业班问答区 web大前端工程师板块原作者授权发布

推极客上头条

极客学院小学妹说了,一切不以【讨论学习为目的】的撩妹,都,是,犯,罪。

(学习还不是为了撩妹?你确定?)

没错, sns@jikexueyuan.com 征稿极客们的技术文章,学习心得,经验分享

一经选用,将发布在极客学院官方微信,与6万极客共同进步!

极客们想看哪个方向的文章?留言让极客小学妹看到~~~

另外,想了解更多极客学院就业班实战项目,也欢迎来群里聊聊~

转载请注明:CodingBlog » 极客分享|web前端开发实战项目计算器制作思路

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情
(3)个小伙伴在吐槽
  1. 人才啊 学员牛的不行
    2016-08-15 09:25 回复
  2. 我在极客学院上自学呢!我是编程爱好者!加油
    太阳2016-08-15 09:32 回复
  3. Android /得意
    Jackson2016-08-17 13:57 回复