一个前端菜鸟的成长历程

  从实习算起,到现在工作了也有一年半的时间了,在这期间,深深感受到了前端领域的飞速发展,在这里记录一下自己的成长历程,算是对知识的一个梳理,也希望帮助到刚入行的同学们。说来惭愧,大学里并没有涉及前端的知识,当时对自己的定位很迷茫,不知道毕业之后何去何从。所以盲目的报了很多学习班,还考了思科认证的网络工程师,虽然没走网络方向,但是这一块的知识在工作后确实对我的帮助很大,毕竟网络是基础。

  那时候,在我的认知里,前端只是写写页面,做做交互,切切图。那时候,我还没听说过什么脚手架,什么构建工具,甚至没听说过ES6。觉得jQuery真的是救世主一样的存在。

  第一天进入公司,心情是完全不一样的,尽管那时候没有小猪佩奇的手表,但也深感自己是个社会人了。

  入职第一天,我被要求先搭开发环境,给了我一个Excel表格,是一个长长的清单,一个一个安装,然后拉取代码,还要执行一大堆的命令,这都是什么鬼东西!完全不知道自己在干什么。就记得一直报错,各种看不懂!不管怎么说,花了整整一天,总算是搞定了!就这样,凭着崴脚的基础就上手了。刚开始看不懂别人写的代码,全凭自己天马行空的想法去做,一行行流水账似的代码写的我开始怀疑人生。

  直到有一天,leader看了我写的一坨代码之后,点了点头,然后选中,删除。紧接着,画了一个下划线,又点了个小数点,后面还跟了个单词,寥寥几句,代码居然还能正常跑通!我勒个去!代码原来还能这么写!从此开始,我认识了Underscorelodash。在没有使用ES6的时候,这个库真的是万能工具箱,操作起数据来得心应手,只要把数据结构整明白,剩下的都是一句话的事。那时候,真的是喜欢上了操作数据的过程。但是目前看来,babel的引入,代码里开始支持ES6、7的语法,很多Underscore中的高频函数都被原生实现了,为了缩减代码体积,这样的类库在逐渐淡出人们的视线。说道这里,必须要提一提阮一峰老师的《ES6入门教程》了,不仅详细介绍了语法内容,还给出了大量的使用案例和技巧,可以说是一本经典之作了。

  入职不久后,,我接触到了第一个前端框架Angular1.x,基于yeoman脚手架,整合了grunt,那时候才知道了前端还有构建这个概念。相较于grunt晦涩难懂的配置文件,gulp的管道思想似乎更容易让人理解。使用了框架,数据更新后页面自己就变了,也不用再去操作dom。在grunt和各种插件的帮助下,代码还可以边修改,边自动刷新,哇!真的是高效!又一次刷新了我对前端的认识。然后开始恶补框架的知识,各种指令,各种service,让开发过程越来越简单。我们不再需要关注过多诸如事件委托之类的优化,框架都会自己做掉,于是有更多的时间放在了业务本身。Angular1.x是不支持服务端渲染的,也就是说,它对seo不友好,所以当时我们使用jade来渲染需要服务端直出的页面,依稀记得严格的语法缩进搞得我痛不欲生。

  Sassless等的使用,让css变得更强大,配合postcss的使用,我不再关注不同浏览器的差异。在重度依赖bootstrap的时候,栅格布局的出场率总是那么高。后来,我认识了flex,生活仿佛都变得更美好了!

  之后,我们开始使用UI组件来提升效率。UI组件库可以说是遍地开花。在PC端,Element UIAnt Design是比较主流的。实际使用的时候,还是要结合自身业务和使用场景,例如是否需要支持ssr。后来我也使用过一些移动端和小程序的组件库,总结一下,一定要使用长期维护的,issue更新较快的,不然遇到坑会很烦恼,别问我是怎么知道的。

    再后来,我逐渐能胜任更多的任务,开始参与数据可视化这块的开发,于是,我又见到了echartsd3.js。说起d3.js,真的是让我爱恨交加。为了画出我想要的图形,我又找回了已经还给老师的数学知识,每天就像在做数学卷子,似乎又回到了那个高中的时代!还把svgcanvas的基本概念也撸了一遍。张鑫旭老师的svg文章写的很棒,解决了我的许多困惑。

  16年小程序首发的时候,为了探索流量红利,我们也想要抢占这个首发的优势,那时候,我辅助开发小程序,文档看了好几遍,还是理不清小程序的思想。而且由于首发之后,维护的比较少,所以也就再没过多涉猎。今年,小程序突然大规模爆发,我又开始了重新整理小程序的内容,时隔近一年,再次打开文档,原先看了一周都不明白的文档,竟然可以两小时上手了,而且自己又独立开发了一个完整的小程序,或许这就是成长。也有很多小程序的框架涌现出来,比如官方的wepy,美团的mpvue。类vue的思想让开发者的学习成本再次降低。对于最近炒的也挺火的pwa和快应用,个人建议需要用的时候补充即可,没有业务需求自己去实践成长速度是比较慢的,而且容易遗忘。

  17年是vue辉煌的一年,这一年来,它的生态系统如雨后春笋般的发展。webpack也似乎成了前端er的标配。Vuex借助Flux的思想而设计。它改变了我对状态数据管理的认识。在庞大的应用面前,状态管理变得让人头疼。Vuex集中化的管理可谓是一剂良药!为了支持SEO,我在项目中使用了Nuxt实现了前后端同构。第一次听说同构这个概念还是在17年的全国前端开发者大会上,那时候感觉离自己很遥远。现在回忆,当时会议分享的很多内容都在一年内飞速的发展并逐渐应用起来。所以,多参加一些交流分享会还是很有必要的。

  后来尝试自己去做一些东西的时候,开始涉及到服务端和运维相关的知识,一点一滴去优化每一个环节。逐渐去提升性能。从页面上的小图标开始。不再使用大量的png小图片,而是使用iconfont,减少http请求,而且矢量可以保障显示的清晰度;代码打包压缩合并,自动上传到对象存储,减小服务器压力,并使用cdn进行加速;使用gzip压缩代码减少网络传输量;nginx做反向代理和缓存;pm2守护node进程,保证服务的可用性;使用docker镜像部署服务简化部署流程而且避免环境差异导致的问题等等。总之每个环节都是一门学问。

  个人感觉这一年多来,除了学会了不少新东西,更重要的是学会了如何去学习新知识,如何去发现未知的领域,如何去解决问题。刚开始,遇到问题直接百度或者谷歌关键词,或者stackoverflow找一把,选出高票回答,总能有效的解决问题。但是,很多时候都不知道具体的原因。

  在同事的引导下,我逐渐开始重视文档这个东西。最初我认为他只是写给初学者看的,枯燥乏味。但事实上,文档写明了需要的大部分东西。特别是第三方插件的文档,如果遇上问题解决不了,那就把文档过一遍。还没有解决?那么,再细致地看一遍!还是不行?打开github,去插件的issue里面搜一搜,如果还是不行,再去借助搜索引擎等的帮助。如果源码不复杂,就看看源码怎么写的吧!这是我总结的比较快速定位和解决问题的方式,屡试不爽。在使用现成的插件的时候,尝试猜测代码的实现原理,有条件可以阅读源码,这样会有利于规避错误的的使用方式,也更容易提升自己。所谓错误的使用方式,我这么解释一下吧,如果你发现你的代码变得复杂而又难看,像流水账,那么尝试去换个角度实现它吧,要始终相信代码里有魔法的存在!

  前端这个领域的发展日新月异,不必要精通每个前端框架,而是要理解框架的设计思想,理解他们的差异。而且无论现代前端技术再怎么玩,终归还是要回归到htmlcssjavascript上来。所以,基础知识的牢固就显得尤为重要!

  css是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来!张鑫旭老师十年磨一剑,钻研css的魔法,可见其中技术细节有多复杂。当然,对于大部分开发者来说,可能没那么多时间与精力来投做到这样,但是大部分的基础概念还是要烂熟于心的。javascript嘛,业界经典的两本书(红宝书、犀牛书)选一本啃好了(惭愧惭愧,我还没啃完)!但是对于入门者来说,《head first》系列的可能更适合,一上来就读经典,难免会望而却步。入门的时候还读过《JavaScript DOM编程艺术》,也推荐给初学者。

  设计模式这个东西不算神秘,如果你是一个有追求的人,很可能不知不觉已经在代码里面使用到了,只不过你不认识他而已。比起后端,前端对于设计模式的使用不算太多。多了解一下,可以让你更容易理解大神的代码,而且,自己写的代码也会越来越漂亮。这里安利一把曾探老师写的《JavaScript设计模式与开发实践》。

  数据结构就不多说了,还是推荐一本书吧,《学习javascript数据结构与算法》,这本书很适合入门者,进阶的话,大家给我推荐推荐啦。

  http也是比较重要的一门知识,比如http缓存,缓存的重要性我就不多讲了。之前读过《图解http》这本书,读漫画一样的就下来了,通俗易懂。

  突然间意识到,文章里安利了太多的书籍,有点打广告的嫌疑。各位看官莫见怪,这里列出的都是本人读过而且觉得有帮助的,大家选择性采纳。声明一下,我真不是卖书的!

  我有个习惯,就是每隔一段时间就回去看一波招聘的JD和面经,并不是为了跳槽,而是关注一下最近大家都需要什么样的人才,需要补充自己哪方面的知识。知己知彼,方能百战百胜!平日里还喜欢逛技术论坛,看看大家都在玩啥黑科技。有什么技术沙龙偶尔也去参加一下,得时刻关注技术的发展,学习大厂的解决方案。

  最后感谢那些一路走来给予我帮助的人!

  好了,今天的分享就到这里,欲知更多技术细节,且听下回分解!

相关推荐