的成长历程从实习到现在已经工作一年半了。这期间，我深深感受到了前端领域的飞速发展。这里记录一下我的成长过程。一个知识的整理，也希望对刚入行的同学有所帮助。说来惭愧，我在大学的时候一点前端知识都没有。那时，我对自己的定位很迷茫，不知道毕业后该何去何从。于是盲目报了很多学习班，还考了思科认证网络工程师。虽然我没有走网络方向，但是这块知识在工作之后确实对我帮助很大，毕竟网络是基础。那时候在我的认知里，前端就是写页面，做交互，切图。那时，我没有听说过脚手架、构建工具，甚至ES6。感觉jQuery真的像个救世主。第一天进入公司，我的心情就完全不一样了。虽然那时候我没有小猪佩奇的手表，但我深深地感觉到我是一个社会人。入职第一天，让我先搭建开发环境，给了一张Excel表格，一长串，一个一个安装，然后拉代码，执行了很多命令。这到底是什么？事物！我不知道我在做什么。只记得一直报错，各种看不懂！反正花了一整天的时间，终于搞定了！这样，靠着扭伤脚的基础，就可以上手了。刚开始看不懂别人写的代码，全凭自己的想法搞定。当我像日记一样写下一行代码时，我开始怀疑自己的人生。直到有一天，领导看了我写的一堆代码后点了点头，然后选中并删除了。紧接着，我画了一条下划线，点了一个小数点，后面跟着一个字。几句过后，代码依然正常运行！我勒个去！代码还可以这样写！从此，我认识了Underscore和lodash。在不使用ES6的时候，这个库真的是万能工具箱，操作数据得心应手。只要理解了数据结构，剩下的就是一句话的事。那时候，我真的爱上了操作数据的过程。但目前随着babel的引入，代码开始支持ES6和7语法，Underscore中的很多高频功能已经原生实现。为了减少代码的体积，这类库正逐渐淡出人们的视线。说到这里，不得不提阮一峰老师的《ES6入门教程》，不仅详细介绍了语法内容，还给出了很多用例和技巧，可以说是经典之作。加入公司没多久，就接触到了第一个前端框架Angular1.x，它基于yeoman脚手架，集成了grunt。才知道前端建设的概念。与grunt晦涩难懂的配置文件相比，gulp的管道思想似乎更容易让人理解。使用框架，数据更新后页面本身发生变化，无需操作dom。借助grunt和各种插件，可以自动修改和刷新代码，哇！真的有效率！再次刷新了我对前端的认识。然后就开始补充框架、各种指令、各种服务的知识，让开发过程变得更简单、更简单。我们不再需要过多关注事件委托等优化，框架会自己做，所以我们有更多的时间花在业务本身上。Angular1.x不支持服务器端渲染，也就是说对SEO不友好，所以我们使用jade来渲染需要服务器端直接发送的页面。依稀记得严格的语法缩进让我苦不堪言。Sass和less的使用让css更加强大。随着postcss的使用，我不再关注不同浏览器的差异。在严重依赖bootstrap的情况下，网格布局的出现率总是那么高。后来认识了flex，生活好像变好了！之后，我们开始使用UI组件来提高效率。UI组件库可以说是无处不在。PC端相对主流的是ElementUI和AntDesign。实际使用中还是需要结合自己的业务和使用场景，比如是否支持ssr等。后来也用过一些移动端和小程序的组件库。综上所述，我一定要用长线维护，issue更新速度快点，不然遇到坑的时候会很头疼。不要问我怎么知道的。后来逐渐胜任了更多的工作，开始参与数据可视化的开发，于是又看到了echarts和d3.js。说起d3.js，真是让人又爱又恨。为了画出自己想要的图形，我重新找回了还给老师的数学知识。每天都像在做数学卷子，仿佛又回到了那个高中时代！我还复习了svg和canvas的基本概念。张新旭老师的svg文章写的很好，解决了我的很多困惑。2016年小程序上线的时候，为了挖掘流量红利，我们也想抓住这次首发的优势。当时，我协助开发了小程序。文档看了好几遍，还是没能理解小程序的思路。又因为第一次发布后，维护的比较少，所以也没有过多涉猎。今年小程序突然大规模爆发，我开始重新整理小程序的内容。将近一年后，我再次打开文档。看了一个星期没看懂的文档。独立开发一个完整的小程序，或许这就是成长。也有很多小程序框架不断涌现，比如官方的wepy，还有美团的mpvue。likeVue的思路再次降低了开发者的学习成本。对于最近也很火的pwa和快应用，个人建议大家在需要使用的时候再补充。如果没有业务需要自己去实践，增长速度会比较慢，而且容易忘记。17年对于Vue来说是辉煌的一年。在这一年里，它的生态系统如雨后春笋般涌现。webpack也好像成为了前端er的标配。Vuex的设计采用了Flux的思想。它改变了我对状态数据管理的看法。面对庞大的应用，状态管理就成了一个让人头疼的问题。Vuex的集中管理是一剂良药！为了支持SEO，我在项目中使用了Nuxt，实现了前后端的同构。第一次听说同构这个概念是在2017年的全国前端开发者大会上，那时候感觉离自己很远。现在回过头来看，会议上分享的很多内容都在一年内迅速发展并逐步应用。所以，多参加交流分享会还是很有必要的。后来尝试自己做点东西的时候，开始涉及服务器和运维相关的知识，一点一点优化每一个环节。逐步提高性能。从页面上的小图标开始。不使用大量的png小图，使用iconfont减少http请求，vector可以保证显示的清晰度；代码打包压缩合并，自动上传到对象存储，减轻服务器压力，使用CDN加速；使用Gzip压缩代码，减少网络传输量；nginx充当反向代理和缓存；pm2守护节点进程，保证服务可用性；使用docker镜像部署服务，简化部署流程，避免环境差异等带来的问题，总之每一个环节都是一门学问。个人觉得在过去的一年里，除了学习了很多新东西，更重要的是学会了如何学习新知识，如何发现未知领域，如何解决问题。一开始遇到问题，直接在百度或者谷歌，或者stackoverflow上搜索关键词，选择得票高的答案，总能有效解决问题。但是，很多时候具体原因不明。在同事的引导下，我逐渐开始关注文档。一开始我以为他只是给初学者写的，没意思。但实际上，文档说明了大部分需要的内容。尤其是第三方插件的文档，遇到解决不了的问题，就去看文档。还是没有解决？那么，仔细看看吧！或不？打开github，搜索插件中的issue，如果还是不行，再使用搜索引擎等帮助。源码不复杂的话，看看源码是怎么写的！这是我总结出来的比较快速的定位和解决问题的方法，也经过了实践检验。使用现成的插件时，尽量猜测代码的实现原理，有条件的可以阅读源码。这将有助于避免错误的使用方法，并使您更容易提高自己。所谓错误的用法，我这样解释吧，如果你发现你的代码变得复杂丑陋，像流水账一样，那就换个角度去尝试实现，永远相信代码中有魔力！前端领域的发展日新月异。不一定要精通每一个前端框架，而是要了解框架的设计思想，了解它们的区别。而且不管现代前端技术怎么玩，还是要回归html、css和javascript。因此，扎实的基础知识尤为重要！css是个不太听话的孩子，总会做出一些奇怪的事情！张新旭老师十年磨一剑，钻研CSS的神奇之处，可见其技术细节之复杂。当然，对于大多数开发者来说，可能没有那么多的时间和精力投入到这上面，但是大部分的基本概念还是需要熟悉的。至于javascript，业内两本经典书籍任选其一（红宝书、犀牛书）不过对于初学者来说，《head first》系列可能更适合。一旦开始阅读经典，难免会灰心丧气。入门的时候也看过，推荐给初学者。设计模式并不神秘。如果你是一个有追求的人，你可能在代码中用过而不自知，只是你不了解他。与后端相比，前端并没有使用太多的设计模式。知道的多了会让你更容易看懂大神的代码，写出来的代码也会越来越漂亮。这里安利一下曾坦老师写的《JavaScript设计模式与开发实践》。数据结构我就不多说了，推荐一本书吧，《学习javascript数据结构与算法》，这本书很适合初学者，如果你进阶了，请推荐给我。http也是比较重要的知识，比如http缓存，缓存的重要性就不说了。《图解http》这本书我以前看过，通俗易懂。突然发现文章里的书太多了，有点广告的嫌疑。各位评委不要惊讶，这里列出的都是我看过觉得有帮助的，大家选择采纳。免责声明，我真的不是卖书的！我有一个习惯，每隔一段时间就回去看一波招聘jd和面试面试，不是为了换工作，而是关注大家最近需要什么样的人才，他们掌握了哪些方面的知识需要补充。知己知彼，方能百战百胜！平日里也喜欢逛技术论坛，看看大家都在玩什么黑科技。偶尔参加什么技术沙龙。一定要时刻关注技术的发展，学习各大厂商的解决方案。最后感谢一路上帮助过我的人！好了，今天的分享就到这里了，想要了解更多的技术细节，就听下一章来分解吧！
