说到前端开发，涉及的知识面确实太广，知识点也过于庞杂。很多人在学习过程中都会经历一段迷茫期，不知道从哪入手、怎么规划。今天就聊聊怎么平稳度过这个阶段，让前端的成长路线清晰起来。

先搞清楚前端开发到底需要掌握哪些东西。但凡学过编程的人都知道HTML + CSS + Ja vaScript，这三大件是基础中的基础。连这些都不会，谈何前端开发？稍深入一点，就会碰到一堆杂七杂八的技术：jQuery、Bootstrap、Node.js、React、Vue、Angular等等。除此之外，网站优化、浏览器兼容、设备兼容、开发调试这些也一个不能少。如今Web App、微信小程序层出不穷，HTML5的应用也越来越广。可以说，前端要学的东西实在太多，每个开发者都会面临同一个问题——如何在有限的时间里，高效地学完这么五花八门的技术。

夯实基础

最重要的永远是夯实基础，也就是HTML + CSS + JS。很多人觉得HTML和CSS简单，其实不然。HTML是超文本标记语言，用来构建网页元素。也许每个人都能用标签写页面，但稍微深入一点就不一定了——contentEditable、isContentEditable属性你知道怎么用吗？怎么用原生HTML和CSS写一个导航菜单？离开Ant Design，很多人还真不知道怎么写。这叫真正掌握吗？显然不是。如果到现在都没系统性地看过一遍HTML和CSS教程，那谁还敢说自己真正掌握了这些基础？

再说Ja vaScript。几乎所有前端框架和技术都源于JS，而JS要学的东西太多，系统掌握需要时间。真正的JS绝不是一两个基础教程就能讲透的。学习JS可以分阶段：初级→中级→高级。建议一开始从基础教程入手，对JS的原理、数据类型、函数这些最基本的东西全面学习。推荐W3C这样的官方网站学习初级教程。基础掌握以后，可以开始做开发实践。最初阶段只要学着会用、会写程序就好，对原理可以暂时不求甚解——因为这时候理解内部原理还有困难。等代码量积累到一定程度，积累到位了，再深入去学。

如何深入全面学习JS等编程技术

一、书是进步之阶梯

（1）看书的好处是什么？

好处不言而喻。书看多了，基础会逐渐夯实。判断力自然会上来，看别人的文章能很快判断出哪块讲得对、哪块自己还含糊。也为看源码、分析源码打下基础。10本书读2遍的好处，应该大于一本书读20遍。10本书的交集就是基础知识的核心，并集就是所有知识。好书当然要多读、反复读，但只读一本不行，因为每本书的侧重点不同。从不同侧面去理解一个知识点，很有意义。比如印度人跟你讲英文，一个词你没听懂，他会蹦出好几个同义词，你听懂一个就行。看书也是这个道理——某一块讲得不透彻，别担心，其他书能帮你补上。

（2）什么书值得看？

网上关于学习JS的推荐书籍很多，简单总结如下：

《Ja vaScript面向对象编程指南》——风格轻松易懂，适合初学者，原型那块讲得透彻，12种继承方式。
《JS权威指南》《JS高级程序设计》——经典是经典，但太厚，适合把任意一章当成一本书来读，更适合当参考书。
《你不知道的Ja vaScript》——狙击JS核心细节，闭包、原型、this讲得清楚，目前上中下册都出了。
《JS设计模式与开发实践》——把JS设计模式讲得非常清晰，一点都不晦涩。
《正则指引》——分析源码时正则不懂没法进行，这本书讲得比较清晰。
《基于MVC的Ja vaScript Web富应用开发》——看完基本能写出自己的MVC框架。
《Ja vaScript函数式编程》——JS是一门函数式语言，这本书是函数式编程入门。
《JS忍者秘籍》——JQ作者写的，没有传说中那么难读。就算看完理解所有知识点，也不会达到世界高手级别——因为你还没做到随心所欲。
《Ja vaScript框架设计》——初看会感觉有罗列代码之嫌，但讲究的是框架的全局观。

以上是成为高手之路上必须看的，也需要反复看。CSS相关的书我看得比较少，大概六七本，有两本必须推荐：

《CSS权威指南》——CSS基础知识点讲得非常清楚，比如层叠优先级、line-height等。不是随便一本书都敢叫“权威指南”。
《CSS揭秘》——此书不屑于全面讲CSS3各属性，它只讲你最不在意的。47个问题的解决思路和解决方案同等重要，非常有启发性。以上各书你都可以不买，至少买这本吧。

（3）看书的正确方法？

很多人想看书但看不下去。文字部分还能忍，一遇到代码头皮就发麻。这个坑我也踩过。说一个学习理论——学英语有个“开水理论”：词汇量必须到6000才能见效，没到就像烧开水，烧烧放凉，永远不沸腾。一旦煮沸过，随时都能喝。20本书看不下去，说明什么呢？任何一本书你都没看完过，熟悉的永远只是前三章（别笑，我原先也这样）。

怎么把一本书看完？很简单：敲。

《基于MVC的Ja vaScript Web富应用开发》这本书我看的时候就是这样，下定决心从头到尾敲一遍。文字加代码都敲，一章一章就啃完了。代码敲一遍后，发现并没有之前看起来那么难。如果你是一看书就犯困的类型，强烈建议把《Ja vaScript面向对象编程指南》从头到尾敲一遍。坚持看完一本后，信心就来了。先保证看完一本，看完三本后基本能做到几天看一本。万事开头难，加油。

书看完后要自己总结，要与其他书对比看。有同学同时对比着看《权威指南》和《高设》。随手拿出一个知识点，闭着眼都能说得头头是道，说明水平够了。

二、源码学习

作为程序员，一定要注重源码学习。精湛的代码都来自学习——不是人人都有爱因斯坦的大脑，但只要你愿意学习、取长补短，就能写出漂亮代码。好的创造灵感源于不断学习。看框架源码之前，先提一件事：DOM的API不懂没关系，可以查。但正则一定要先研究研究，不然大多数人分析源码时的挫折都在这里。

怎么阅读源码？敲，照着敲。哪些代码值得敲？优秀框架或库的源码都值得。但拿jQuery来敲门不行——太长了，八九千行呢。个人觉得underscore.js是不错的第一选择，都是工具方法，敲完水平应该略有小成。有些API的实现，要像getElementById一样深深刻在脑海里，比如extend方法，必须张口就来。敲完underscore后，可以考虑看《Ja vaScript函数式编程》了。

jQuery源码不好敲，但zepto的源码只有1800多行，敲一天应该敲完。敲几遍后，把所有不懂的地方都百度清楚，就可以写自己的类jQuery库了。然后可以当技能写进简历：比如“创建过自己的jQuery库”。敲的过程还能帮助对jQuery API的认识。

然后是backbone.js——以类jQuery和underscore为基础的MVC框架，代码也没多少行。敲吧。spine.js与backbone类似，敲之前可以先看看《基于MVC的Ja vaScript Web富应用开发》。希望你的简历能添上“创建过自己的MVC框架”。其他我还敲过jq.validate.js和一些插件。如果你愿意，bootstrap也可以敲敲，按插件逐个来。分析明白了，轮播、分页、下拉框这些插件分分钟随手写一个。最起码看看人家API接口是怎么设计的。话说在阅读其CSS代码中也学到了不少东西。说到插件，有两个必须提：表格插件和树。都敲完，简历里就能写“创建过自己的UI框架”。

当然也可以敲你喜欢的框架代码，重要的是明白实现原理，最好理解为什么那么设计。如果对设计模式熟悉，会发现原来是这样……照着敲只是分析源码的入门，目的是学习，最后能用在项目中才是正道。就算没啥用，也是打发时间的好方式，比看电视剧强多了。闲着无聊时，我就背着敲underscore源码。

三、新手怎么办？

看书和分析源码是重要的提高方式，但不适合新手。新手需要快速入门、快速上手工作。一种快捷的学习方式就是看视频——知道有哪些东西、怎么用就可以了。看视频的好处是它是一种被动学习方式。我的入门也是看视频来的，一遍没懂就再放一遍，基本上1.5倍数去看。而读书是主动方式，需要自己一页一页翻，需要主动理解。很多重点也许只是视频老师一句话就能点透。另一个好处是发现自己某个知识点不清楚，可以单独去百度，比如this，文章很多。这种学习方式也是快速掌握知识点的好办法。

书籍有技术评审，看文章一定要看评论。视频一般不会太深入，偶尔也有讲错的。当年我也曾被一些视频误导过，建议找不错的视频看看。

四、看书和分析源码的时机

当已经工作一年半载时，正是提高的好时候。这时可以去看书，全面系统地梳理知识点，扫清盲区。如果只靠项目经验是不够的——工作本身是学习过程，但工作三年不看书，又能学到多少？何况很多项目都很类似，一直待在舒适区，那真是5年经验重复第一年了。所以我不认同“面试时强调学习能力是工作能力不强的表现”。3年经验的水平，完全有可能超过5年。

五、时间和兴趣

没有时间学习？如果你还没毕业就已经天天在学习，其实领先了一大步。大学里天天LOL和电视剧相伴，进入社会是要还的。最可怕的是该还、还不还。时间是有的，看愿不愿意付出。下班后学习、周末学习、节假日别人玩的时候在家敲代码，这样才能领先别人。

兴趣问题？兴趣和擅长是一个良性循环。你擅长某件事就会越喜欢，越喜欢就越愿意花时间，进而越擅长。这个道理都懂，只是缺一个trigger。如果你喜欢玩游戏，其实可能非常适合做前端——玩游戏有反馈机制，前端工作的反馈也非常及时，代码一改，网页一刷，就看到效果。擅长、优越感、成就感通常连在一起。每看完一本书都很有成就感，每敲完一个库也很有成就感。

如何坚持

一个朋友问我，如何才能坚持做一件事？他发现总是无法坚持完成有意义的事情——健身、学乐器、每天看一小时书等等。为什么自己坚持一两天或三五天就放弃了？

坚持本身确实困难，常人都很难坚持，这很正常。如果每个人说坚持就能坚持，那不就人人都成专家了？但坚持又是一件简单的事——只要你有想要坚持的想法，就有可能做到。这好像是废话，但仔细想想，如果自己连坚持的想法都没有，那才真的没救了。为什么难坚持？因为没有兴趣、没有计划、没有环境、懒惰等等，原因很多。但坚持本身并不难，难的是没有用对方法。想知道怎么坚持，不要徒劳地找方法，先问问那些坚持下来的人。只要和几个有恒心有毅力的人深入沟通交流过，一定会有收获。

坚持需要环境，没有怎么办？自己去创造环境。比如每天坚持看一小时书，怎么做到？很简单：营造一个看书的环境，然后每天在这个环境待一小时。在手机和床旁边坚持看书是煎熬，看到手机就想玩，床在旁边就想睡。可以选一个僻静的公园角落、去附近书店，只要能安心看书就行。如果手机影响你，就选一个少有人联系你的时间，关掉手机或不带手机。还可以和志同道合的朋友一起坚持，这样更有动力。坚持还要有计划和目标：比如看书，要有短期或长期的学习内容。坚持的目的是什么？毫无目的的坚持没有意义，不如不做。反之，有目标有计划，就会源源不断地有动力。特别是完成一个计划、达成一个目标时，自信心会蓬勃起来。

短期的坚持靠环境和计划、目标；长期的坚持离不开兴趣、信心和乐趣。如果从做一件事中得到快乐、喜欢上它，长期坚持就会自然而然。如果一直不喜欢，短期能坚持，长期也难坚持。所以兴趣很重要。很多事看起来索然无味，深入研究就会发现乐趣。就像编程看起来繁琐困难，似乎没人会喜欢，但恰恰相反，很多人深入钻研后，一天不看代码就浑身不自在。坚持后的感觉是什么，如何从索然无味到充满乐趣，很难说清楚，只有真正坚持过、尝试过的人才有发言权。不要以没有兴趣为借口而不去坚持——如果没有坚持过就否定兴趣，那叫懒惰。如果真的想在计算机领域做出一番成就，就好好坚持完成你的计划和目标。未来其实掌握在自己手中。

如果你坚持，前端的世界是丰富多彩的。