前端leader找我谈心：我是如何从刚毕业的前端菜鸟一步步成长为前端工程师的？

谈谈学习

我作前端已经有五年的时间了，从大学刚毕业的时候，我是一个彻底什么都不懂的小白。虽然我大学里学的是软件工程专业，可是由于在大学里荒废学业，天天只知道打游戏，基本上到大学毕业以前我是什么都不会的，并且大学里是没有教前端相关的东西的。

我是在大学毕业以前，两三个月，自学了一点点前端的皮毛，也就是会写一点点的html和css。那个时候找工做也不容易，终于有一个公司收留了我，虽说工资什么的咱们暂时按下不提。可是至少他们要我，我就很是地开心了。

从那个时候开始，由于有了项目要作，因此我逼迫本身，天天去学习新的内容。那个时候我从jQuery开始作，由于公司的项目比较特殊，就是单页应用，总共加起来大概就五六个页面，可是要一次性所有加载完，后续的全部数据都是根据接口去获取。那个时候没有框架，没有React，ngular也刚刚出来，还并不流行。因此那个时候咱们就用jQuery。

而后我就想办法去作，初版作的很是的烂，就一个js文件我写了3000多行代码。因此在那个时候我逼迫本身想办法去解决各类问题。我就针对本身当时的认知，好比说js文件太大了，应该怎么办？

而后我去网上搜，我发现了sea.js这个东西。我学习了它异步加载JavaScript的方法，后来才把它引用到项目里。

当我发现代码量多了，很难去维护这个逻辑，还有页面的切换。因而我就去网上搜资料学习，发现有backbone.js这个东西，它能够帮我解决这个问题。

在后来这段时间里，我积累了很是多的东西，也是我进步最快的一个时期。

当我再去接触到这些Vue、React这些框架的时候，我先去学习了一遍它们主要是解决了什么问题，它们主要的功能有哪些。而后我再尝试用到项目里面去。那个时候，我刚开始学的是Angular，当时也没有了解到有构建工具这个概念。那时候最多只知道有Grunt，帮你去压缩一下js。

当时，我尚未模块化的概念。

后来又作了一些项目，发现了不少的问题，我再去想办法去解决。这个时候才会知道有Webpack这些模块化组织代码的工具。我就是在这种环境下一步一步成长起来的。我全部学的内容，对于前端的了解，基本上都是基于我想要去解决一个问题，而后再去网上搜相关的内容，而后去想办法把这个问题解决掉。

因此对于我来讲，学习这个东西，你要知道你要解决什么问题。而后你学的这个东西，它解决了什么问题。它适不适合用在你遇到的这些问题上，以及你在学习这个内容以前，你必需要对它的总体有一个了解。否则的话，你就是瞎用。你用的方法可能根本就不是这个框架要解决的问题。

好比Vue，你们对于vue总体有一个概念以后，再去用到一个项目里面去。而项目一开始咱们作的时候并不要求作的特别的复杂。只要你基础扎实，你确定有办法去解决这些在项目里碰到的问题。而在解决问题的过程中，才是你掌握了你学习到的东西，巩固了你学习到的这些内容的地方。

因此这就是我要谈的学习。

谈谈前端

如今的前端跟五年前的前端是天壤之别。

五年前的前端，框架之流刚刚兴起，也就是Angular带的头，那个时候刚出来没多久。那个时候流行什么呢？就是写页面模板。

咱们写好html、css，以及这个页面上简单的动画效果，好比说点击一下有什么事件之类的。而后这个东西写好以后干吗呢？丢给后端人员他们用后端模板，好比说最多的用Java，Java有jsp模板语言，接着把数据填进去，就OK了。

这个时候咱们一个网站有不少页面怎么办呢？好比说咱们写了不少的html页面，写好以后交给后端人员，而后他们整合在模板，再把数据动态插进去。这样的话，每一个http的请求发送到后端那边，后端根据这个http请求，返回不一样的模板，而且把数据渲染进去，最终返回给用户。

这就是之前的前端。那么如今的前端呢？

咱们把渲染模板的操做从后端挪到了前端来作。由于把模板渲染这部分拿到前端来作，因此不少业务逻辑的判断、渲染、数据获取等都要在前端来作。这个时候就大大加深了前端的业务逻辑。它包含的内容就比之前上升了好几个量级。

在这种状况下，咱们须要一个框架去整理代码。而这个时候就会出现各类帮助咱们前端开发者去处理这些内容的东西，好比说咱们有了前端路由的概念，咱们有了store状态管理的概念。之前MVC的时候，还有过其余的处理数据的方式，反正各类各样的工具帮咱们去处理这个问题。

伴随着前端业务代码愈来愈复杂，咱们用之前的方式去写JavaScript代码，效率很是的低。由于咱们写的JavaScript代码不少都受浏览器兼容的限制，或者是它的低版本的不少功能不支持，致使咱们写起来很是的蛋疼。

彼时前端界不缺人才，他们发明了各类各样的工具，好比用babel让咱们能提早享受到最新的JavaScript语法带来的不少很好用的功能。当咱们有了React这类框架以后，但愿前端的应用以js做为入口，而不是以html做为入口。咱们html里显示的内容都是从js里面渲染出来的。

因为整个应用基本上以js做为入口，咱们就须要用js来处理css、图片等其余静态资源。这个时候咱们发现，js自己不是用来处理这些东西的，而咱们又迫切须要一些工具来处理这个问题，所以又出现了webpack。

因此前端的发展速度在整个编程界来讲，是相对特别快的。主要的缘由就是由于之前的前端它的标准实在是过低了。如今补充的不少js 的标准、前端的一些标准都是之前发展缓慢，落下来的。因此说，如今只能说是慢慢地变成了一个正常的状态，而不是说已经超前很是多了。

前端如今要入门的童鞋，对大家来讲，其实不算是一个特别好的时机。

若是你以前是有基础的，那么还能够。若是你以前一点基础都没有，你会发现前端进来以后，你要学的东西特别的多，各类各样的东西。在这种鱼龙混杂的时候，你必需要保持一颗好奇心，保持一个吸取新知识的能力。你要常常去看一些文章，或者是GitHub，或者是一些厉害的程序员的博客。他们有发现新的东西，好玩的东西，都会分享出来。而后你要立马去学习，由于它有可能就是未来的主流。

因此如今去学习前端，你要时刻保持一种学习的心态。

谈谈面试

如今的前端状态有点混乱，发展节奏有点快，你仅仅是想把vue学好是不可能的。你要学vue就必需要学webpack。固然你能够直接用vue-cli去生成一个项目。可是对于好奇的你，确定会想，vue-cli里面到底作了哪些东西。

而后当你之后出去面试的时候，你跟面试官说，你作过vue的项目。而后面试官确定会问你一些webpack相关的一些东西。这个时候你又说不出个因此然来。他会问你，那你的项目是怎么生成的，你会说用vue-cli脚手架生成的。他会问你，那你有没有看过vue-cli里面生成的一些代码，而后这个时候你又说没有。那么他对你的指望值就会变得很是的低。

固然有的面试官还会不厌其烦地问你，为何咱们用webpack生成的文件名后面要带上一串哈希码？这个问题至少我问过不少初中级的童鞋，他们都是不知道的，不太清楚，或者只是清楚一些有概念叫作缓存。可是至于这个文件名后面加一堆哈希码，究竟是作什么事情，他们不太清楚。浏览器如何去缓存，他们也不太清楚。

因此webpack是一个逃不开的话题。而后还有vue-router、vuex这些已经算是vue项目开发的三驾马车。所以当你想学好vue的时候，意味着你还要学好webpack、vue-router、vuex。

固然，服务端渲染也是值得讨论的话题。这些东西要去所有学习好，对于基础比较差的童鞋来说，确实有点难，他一会儿接收的东西实在太多了。一旦涉及到webpack，而webpack又是跑在node端的，因此你还要学习用node.js如何去写脚本。

固然，若是对于追求上进的你来讲，还想学习下SSR服务端渲染，首先你要去学习用node.js如何去写一个server，而后还有服务端的接口实现，虽然这是一个纯后端的实现内容。

当你觉得这就结束了的话，你就错了。若是你面试的是BATJ等互联网大厂，面试官可能还会问你http相关的内容。好比说，面试官会问你，像http的get、post、put、delete这些request methods它们又有什么用，有什么区别？从语义上来说，http的code又有什么用。当这些问题抛向你的时候，若是你平时没有注意积累这方面的技术知识，此时的你是否依然会处于一个懵圈的状态？

这些东西，对于一个纯作前端，纯作页面的童鞋来讲的话，你确实不用特别的了解。可是你一旦升级为一个工程师，你要去跟后端交流一些接口，你要去思考统筹整个项目的时候，你必需要了解。否则的话，你会踩很是多的坑，犯很是多的错误。致使你的整个项目到后期维护的时候，有不少的内容到后期是没办法去升级的。

讲了这么多关于学习、前端、面试等话题，终归学习是要讲效率的，若是你学了很是多的时间，发现本身仍是不怎么会，你就会特别没有成就感。当时就不会想继续学下去了。

最后，向内认知，向外行走。

谨以此文与君共勉。

以上内容参考自某大型互联网公司前端架构师的心路历程，在此表示感谢。

最新的文章都会第一时间更新在个人公众号<闰土大叔>里面，欢迎关注。