一个前端菜鸟的成长历程

摘要：张鑫旭老师的文章写的很棒，解决了我的许多困惑。所以，基础知识的牢固就显得尤为重要是个不怎么听话的孩子，总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑，钻研的魔法，可见其中技术细节有多复杂。

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

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

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

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

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

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

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

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

    再后来，我逐渐能胜任更多的任务，开始参与数据可视化这块的开发，于是，我又见到了echarts和d3.js。说起d3.js，真的是让我爱恨交加。为了画出我想要的图形，我又找回了已经还给老师的数学知识，每天就像在做数学卷子，似乎又回到了那个高中的时代！还把svg和canvas的基本概念也撸了一遍。张鑫旭老师的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里面搜一搜，如果还是不行，再去借助搜索引擎等的帮助。如果源码不复杂，就看看源码怎么写的吧！这是我总结的比较快速定位和解决问题的方式，屡试不爽。在使用现成的插件的时候，尝试猜测代码的实现原理，有条件可以阅读源码，这样会有利于规避错误的的使用方式，也更容易提升自己。所谓错误的使用方式，我这么解释一下吧，如果你发现你的代码变得复杂而又难看，像流水账，那么尝试去换个角度实现它吧，要始终相信代码里有魔法的存在！

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

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

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

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

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

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

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

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

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