前端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又有什么用。当这些问题抛向你的时候，如果你平时没有注意积累这方面的技术知识，此时的你是否依然会处于一个懵圈的状态？

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

讲了这么多关于学习、前端、面试等话题，终归学习是要讲效率的，如果你学了非常多的时间，发现自己还是不怎么会，你就会特别没有成就感。当时就不会想继续学下去了。

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

谨以此文与君共勉。

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

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