上海实习(1)技术篇

2015年6月到11月,我在1号店实习了5个月,实习的主要任务是练习移动端布局,使用css3属性,促销页面的动画,各种机型的兼容等等。

印象比较深刻的是新兵训练营,我和另外实习生一起,学习了内部框架FFF的使用,这是一个OO模型的框架,结合了zeptojs,是一个轻量级框架,适合移动端使用,主要是理解面向对象编程的概念,学会将页面拆分成组件,做了demo《疯狂的盒子》,当时XB同学帮了我很多。

这段学习让我比较深的理解了未来前端编程的发展方向,组件化易于拆分任务,结合时做好拼装就行。同时能可以提高组件的重用性,相同功能的应用可以用已经造好的轮子,避免了重复造轮子的累活儿。所以写代码不能只是能执行就完事儿了,要让代码易于拓展,复用性高。

还有就是命名规范,这在之前写小型项目时基本不考虑这个问题,但是当你的代码要和大家的结合在一起时,很可能就会命名冲突,甚至可能当时看起来没问题,后期出现问题排查时任务量巨大。

实习时还学到的一点是任务拆分,部门有一面任务墙,大家把要做的事情写在便利贴上,写上任务需要完成的时间,完成后移动位置,直至全部完成。可以看到同事的任务划分的很细,任务执行的每一步都划分成了几个小步,时间会有0.2天这种粒度,深以为这是非常好的完成任务方式,做完每一步都有成就感,同时也不会因为任务大而不知所措。我在这方面比较弱,需要同事的指导才知道怎么划分任务,我也没有养成切任务的习惯,在后期做自己的项目时依然是想到一个功能就添加,前端改不了就自己给后端加接口,这在大项目中是非常不好的,接下去的半年,我都要努力改进。

实习时做了一个内部创新项目《动效库》,是我和LL同学一起做的,我负责详情页,他负责主页,他选择了使用bootstrap进行布局,并且使用了基于其的一个瀑布流插件,而我是直接切图写逻辑的,后期整合时遇到了不小的麻烦,bootstrap的样式影响了我的原有样式,我不得不继续写样式去覆盖,这点告诉我们前期的技术选型一定要商量好,不然后期会很麻烦。

后来LL离职了,我完全接手了这个项目,主管提出了中间的一个问题,要我来修复。之前没有看过LL的代码,同时没有使用过这个插件,我花了挺长时间,其中还包括远程音频联系了LL,才理解了代码,修复了这个问题。LL当时的代码有些凌乱,但他确实是个技术不错的人,到现在我们还会常联系讨论技术问题,以后的文章我会继续写。

后来我又重构了这个项目,进行组件化了,写成了SPA,当然之后又有了新的问题,我之前一直不怎么重视的打开效率问题。下拉采用了懒加载,但是由于加载了大量DOM结构,导致在下拉多次以后页面里有太多的DOM,虽然渲染出来了,点击获取DOM信息再次渲染时会卡很久,这在当时我特意研究了chrome浏览器调试,写了挺多使用感悟,也了解了一些其他瀑布流布局在解决此类问题的方式,由于时间问题,我没有继续深入重构,也是一个小遗憾,有时间肯定会补回来。

技术篇到此结束了,5个月说长不长,说短也不短,我也学会了很多,有空继续聊。

动效库
关于动效库实现细节及用户体验的思考