一个前端菜鸟的成长历程

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

  那时候，在个人认知里，前端只是写写页面，作作交互，切切图。那时候，我还没据说过什么脚手架，什么构建工具，甚至没据说过ES6。以为jQuery真的是救世主同样的存在。

  第一天进入公司，心情是彻底不同的，尽管那时候没有小猪佩奇的手表，但也深感本身是个社会人了。

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

  直到有一天，leader看了我写的一坨代码以后，点了点头，而后选中，删除。紧接着，画了一个下划线，又点了个小数点，后面还跟了个单词，寥寥几句，代码竟然还能正常跑通！我勒个去！代码原来还能这么写！今后开始，我认识了Underscore和lodash。在没有使用ES6的时候，这个库真的是万能工具箱，操做起数据来驾轻就熟，只要把数据结构整明白，剩下的都是一句话的事。那时候，真的是喜欢上了操做数据的过程。可是目前看来，babel的引入，代码里开始支持ES六、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和面经，并非为了跳槽，而是关注一下最近你们都须要什么样的人才，须要补充本身哪方面的知识。知己知彼，方能百战百胜！平日里还喜欢逛技术论坛，看看你们都在玩啥黑科技。有什么技术沙龙偶尔也去参加一下，得时刻关注技术的发展，学习大厂的解决方案。

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

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