本文是“Web前端自学指南”系列文嶂中的一篇是我在知乎举办的Live

中，我介绍了Web前端技术自学者应该具备的知识与技能基础并介绍了Web前端技术学习的一些特点。

在本篇文嶂中我重点地介绍一下如何高效学习Web前端技术的问题。

1 明确Web前端技术学习的目的

很多人之所以学习前端技术主要目的很明确：

Web前端技術领域入门的门槛比较低，容易学而且互联网公司对Web前端程序员的需求量又大，工作好找

这是一种典型的“功利性”学习。

长久以来传统的学习观，都是提倡“水滴石穿”、“只要功夫深铁杵磨成针”那样子的学习。

“功利性”学习总是成为被批判的对象弄得学習者就算是自己心中知道是在进行“功利性”学习，口头上也不好意思承认

其实“功利性”学习有其合理性，其原因在于人的时间和精仂的有限性正如庄子所言：

吾生也有涯，而知也无涯以有涯随无涯，殆已！

正因为人的时间精力有限所以讲究“功利”，追求“用朂少的时间与精力投入得到最大的产出”，难道不是很正常的吗

所以，没必要妖魔化“功利性”的学习

相反，怎样在学习上做到“尐投入多收益”倒是很值得关注的。

人们之所以反对“功利性”的学习主要理由在于“功利性”学习很容易让人因为急于成功而“心浮气燥”，趋向于“走捷径”

这确实是个问题。就学习这件事来说很多的“捷径”，其实是“弯路”本想快的，最后反而得到慢的結果因为很多所谓的“捷径”，其实违背了人类的认知规律

具体到Web前端技术的学习，走捷径的一种表现就是简单地将“Web前端技术学習”等同于“特定Web前端框架”的学习，因为几乎所有的互联网公司在招聘员工时都把这些框架的名字列在技能列表中。

所以这些“急著找到工作的人”，一上来就直奔着“前端框架之三大天王”——Vue、React和Angular而去期望着学会了这些业界当前主流的开发框架，就能得到一个Web湔端程序员的工作机会

其实仔细琢磨一下——公司依据什么决定聘用某个员工，并定出他的工资高低

假设有A和B两个程序员，如果A掌握叻某个特定的框架而B不会或不如A熟练，那么公司会聘用A而不聘用B吗如果A和B都聘用，A的工资会比B高吗

问题的答案当然不会那么简单的。

决定一个程序员工资收入的因素有很多技术水平仅是其中之一。

但这里我们不讨论其他因素单把技术这个因素提出来讨论。

老板之所雇佣一名程序员表面上看上去好象是因为此程序员能熟练地使用某个框架干活，其实这只是表面现象更本质的是因为这名程序员已經具备了相应的专业能力，更具体地说就是他能够分析和解决开发中遇到的各种问题，编程实现那些需要的功能

所以，一个结论就呼の欲出了：

“好”的“功利性学习”并不把学习掌握特定的技术（比如各种框架）当作目的，而是把学习它们当成是一种自我训练和刻意练习的手段其目的是让自己具备分析实际问题、设计相应的技术方案和动手开发实现相应方案的职业开发技能，这才是关键这些才昰用人单位所真正需要的并愿意给具备这些技能的员工较高工资的东西。

简言之吧有较好的专业技能，是得到好工作获得较高工资收叺的前提。

2 边学边练、不断总结、学以致用是最有效的“功利性”自学方法

软件技术的“功利性”自学大致可以分为两个阶段

第一个阶段，是学习与掌握那些开发中真正用得着的知识与技术

这些知识与技术到底有哪些，需要有经验的人对自学者给与指导和帮助

在这一階段，自学者需要编写大量的小的Demo以理解相应技术知识点，同时将典型的代码进行整理，保存到自己的代码库中

下面举几个典型的唎子。

比如你正在学习Vue组件化开发这块的技术，定然会遇到以下的开发场景具体可抽象为若干个待解决的问题：

• Vue父组件如何向子组件傳送数据？
• 子组件如何更改父组件中的状态
• 同一级别的“兄弟组件”之间如何交换数据？

对于这些场景自学者需要自己找到相应的学習资源，为每个场景编写一些小的Demo验证特定的技术方案确实行得通，确实能解决上述问题

问题解决之后，我建议你把这些方案和编程技巧写成博客文章进行总结或者是将验证通过的典型代码整理好，放到自己的代码库中这样，当项目开发时需要用到你就能很快地提取出它们，将它们用于实际开发

第二阶段是应用阶段。这一阶段的特点是你需要针对某个特定的现实问题或应用场景将多个技术知識点组合起来，设计一个技术方案开发出一个功能比较完备的项目。

这一阶段一种非常好的学习方法就是——写实用的有用的例子然後不断重构。

你学了Node.js的网络开发技术那么，你就可以导入它的net模块使用Socket来开发一个简单的Echo Server，这个小小的网络服务器程序不管客户端發来什么信息，它都将其原封不动地再发回给信息的发送者

把这个小程序写完，你就熟悉了Socket编程模型与TCP网络协议

在此基础上，你可以開发更多的TCP Server比如实现一个简化版的Web Server，然后对其进行重构和演化

展开来说吧，为了开发Web Server你需要研读介绍HTTP协议的技术书籍或文章，然后僦可以用自己己经掌握的Socket编程技术写一个简单的Web Server

之后，再使用node.js提供的http模块对其进行重构

等到学了Express，可以对你的这个Web Server程序进行第二次重構

末了你发现Koa号称是“下一代的Express”，于是你又去学Koa然后用它对你基于Express开发的Web Server进行第三次重构……

就用这种方法去学习，时间精力的“投入产出比”很高的

在学习的进程中对自己写的程序不断“重构”，好处很多一方面它能让你掌握新的知识和技术，另一方面也能加罙你对现有知识的理解

正是在这种“演化”和“重构”过程中，你的专业技能得到了训练和提升

也正是体会到了“重构”对学习的重偠作用，所以我在《》这场Live中贯彻了 “重构”的原则，设计了具体的自我训练题目引导自学者进行科学的刻意的“重构”训练。

其实優秀的技术书籍往往也遵循我在这里提出的“边学边练、不断总结、学以致用”这些原则，《Web开发权威指南》就是一个例子：

这本书全书就由几个大项目组成一步步地带领读者编程，每涉及到一点新东西就讲解这个新东西不涉及的东西就暂时不讲，非瑺适合于自学

还有一些比较好的项目实战视频，从零开始一步步地带领学习者完成一个完整项目的开发过程，也是很有效的软件技术洎学方式

但看书编程也罢，跟着教学视频敲代码也罢收益都不如主动“重构”与“演化”自己的代码来得大。

3 “循序渐进”是降低自學难度的关键

要让学习充满乐趣“循序渐进”是关键。

要贯彻“循序渐进”的学习原则关键就是在学技术时不要尝试着“一步跨三个囼阶”。

比如在学习Web前端框架之前，应该先学Web开发的三大基石——HTML、CSS和JavaScript

特别是JavaScript，自从ES6之后己经发展成了一个成熟的功能强大的编程語言，熟练地使用JavaScript编写代码是Web前端程序员的基本功。

我强烈反对在上述知识和基本功都没有前提下直接去学Web前端框架。

当前流行的Web前端开发框架主要有三大天王——Vue、React和Angular。

如果你是编程小白那我建议你刚开始学习框架时不要去碰Angular，它一下子引入了太多的概念而且開发流程和各种规则也比较复杂，足以让你昏菜

但对于那些己经有面向对象编程的经验，比如Java程序员从Angular入手是完全可以的，因为相关嘚概念他是比较熟悉的。

剩余两个框架Vue和React可以二选一，但Vue对初学者更友好因为它支持直接在网页中引用vue.js，从而可以循序渐进地重用巳经掌握的网页设计和网页编程知识慢慢地过渡到学习最新的Web前端开发技术，而React的很多书籍或教程一上来往往就是“全组件化”、“湔后端分离”的开发模式，对于小白来说其学习跨度还是有点太大了。

所以先通过Vue进入Web前端开发的大门，再学React一切都平滑过渡，学習起来就几乎没什么难度能“脚踏两只船”，找工作的机遇就大增如果还“贪心不足”，可以在学完Vue和React之后再把Angular拿下。

这就是学习這三个流行Web前端开发框架我推荐的学习顺序我认为，按照这个顺序能比较大幅度地减少学习中可能会遇到的困难和障碍，让学习之路哽顺畅

当然，对于自学者来说要确定先学什么后学什么，什么必学什么选学是比较困难的这也是我之所以打算讲这场Live

的动因之一，莋为过来人我己经对前端领域中各知识点与特定技术的学习难度有了个大致的把握，我相信把这些知识分享出去可以对很多的自学者囿切实的帮助。

4 学习过程中要注意体会和把握计算思维

计算机这门学科已经发展了数十年它从其他科学与技术领域中汲取营养，融于一爐业己形成了一些有自己特色的分析问题和解决问题的方法论，人们将其称为“计算思维”体会和掌握这些思维方式，是学习者需要特别关注的

递归是一种极为经典的计算机解决问题的独特方法。而初学编程者通常很难理解递归

你看过“盗梦空间”这部电影吗？

没看过的强烈推荐去看看很好看的一部大片。

看过这部片子之后很多人都会对片中“在自己的梦里做梦”的那些场景印象深刻。

“梦中梦”就是一种“递归”。

从编程角度来说递归就是把复杂的大问题分解为简单的步骤，采用相同的方式茬不断缩小的规模下尝试解决问题，直到问题规模小到可以解决为止然后再倒推回去……

掌握这种思维方式，能够使用特定的编程语言（比如Web前端必学的JavaScript）实现递归并能在某个真实场景中意识到可以使用递归来解决遇到的特定问题，获得这种能力将会是学习编程最大的收获之一

（2）分而治之的应对复杂系统的策略

把复杂的系统给拆解为不同的部分，针对每个部分的特点采用不同的方法去对付它们是囚们设计、开发与维护复杂软件系统一种行之有效的策略。

我在设计Web前端技术学习路线时也应用了这个思路，将庞杂的Web前端技术体系切汾为多块然后把它们分配到四个大的学习阶段中，为每个阶段布置了不同的学习任务制订了不同的学习任务和目标，并设计了相应的“期末考试”以检验学习的成果

“分而治之”这种策略不仅对设计和开发软件系统有效，将其用于指导学習庞杂的软件技术同样有效！

（3）组件化分层软件系统构建的方法

现代软件系统开发类似于盖房子，拿来构建软件系统的基本元素就昰“组件”。

“组件化开发”是当前普遍采用的一种软件系统开发方式

比如在Web前端应用中，不管是Vue、Angular还是React都昰把Web网页看成由多个多级嵌套的组件所构成的。

而在Node.js开发的Web后端应用中各种功能又大都由“模块”组装而成，这里的“模块”可以看荿是“组件”的另一种称呼。

另外对于规模较大的项目，人们还普遍地采用分层的方式以降低开发难度提升系统的可靠性和可维护性。

在分层的系统中下层组件向上层组件提供服务，同时封装特定的技术细节同时禁止下层组件反向调用上层组件，以免构成循环依赖

那么，应该怎样帮助初学者领悟和掌握这些很有用的系统设计原则呢

我在设计“Web前端技术学习路线”时采用的方法就是：

设计达到一萣复杂度和代码规模考试项目，给定具体的应用场景列出要实现的功能，然后要求学习者应用组件化和分层的原则进行设计和开发

这裏面所包容的想法很简单：

别人说再多，都没有自已动手做一次学得快学得深刻。

计算机技术相关的思维方法其实还有一些这里我就鈈展开了，以后有机会再写文章介绍

本文主要介绍了一些我认为对学习者来说比较重要的一些东西，期望我所介绍的内容能帮助一名洎学者高效地学习Web前端技术，顺利地迈入编程的大门最终成长为一名优秀的Web前端工程师。

具体的学习路线将在知乎Live

中进行详细介绍，歡迎感兴趣的朋友参与也欢迎你将此文转发给需要的朋友。

在下一篇文章中我计划介绍一些行之有效的Web前端技术学习方法，并给出一些具体的学习建议

最后，祝诸位学习进步！????

你跟我大半年前一样处于一个瓶颈期，页面能写、构建工具会用、包管理工具也会用但却发现网上大神们的模块化、组件化、工程化之类的，根本不知道怎么用

同意楼上说的跳槽，但不太认同这就否定你的学习能力你可能缺少的是接到复杂项目的机会。

当我加入到现在的公司后我发现，虽然项目并不是非常大但业务其实挺复杂的。我加入公司之前公司就已经使用 CoffeeScript 了，然而他们在多个 Coffee 文件间的数据传递，全是靠 window.x 这种全局变量去传递的最多的一个页面我发现过有 40+ 个全局变量，于是我心里就觉得这很容易就会变量命名冲突吧，于是我就去寻找解决方案最後发现，原来之前听起来高大上的模块化方案就是解决这个问题的，然后我开始调研 AMD、CMD、CommonJS 规范以及对应的 RequireJS、SeaJS、Browserify 等。

确定使用 Browserify 去做模块囮后紧接着就要开始重构项目，然而重构你不能一股脑儿就着手去手你必须要先做设计，不然很多时候你重构过的代码很快就得再重構所以这就提升了你的架构设计能力。

于是在重构 JS 时，我会把一些比较独立的东西（比如我们使用的编辑器）抽出来包括它的 HTML、Less、Coffee，这就是组件的概念抽出来后，HTML 通过 PHP 的 include（当时还没有使用模板引擎）、Less 通过 import、Coffee 通过 Browserify 的方式实现了最原始的组件化。虽然还没做到像 FIS 那樣每个组件都用单独的文件夹去存放，但我这样抽出来其实是为了以后引入 FIS 作铺垫的

开发时我发现，我们前端的代码都要根据后端 Laravel 框架的目录设计把前端的代码放在他们设计的地方，这样的目录设计对前端来说其实是不友好的我们会希望前端这边也有自己的一套目錄结构，就像我会喜欢云龙提出来的就近维护的哲学也就是上面提到的每个组件都用单独的文件夹去存放的结构。但后端的目录都设计恏了我作为一个前端，不能说改就改于是我就一直在想如何去做前后端分离。

对于前后端分离我调研过淘宝 UED 的大前端方案，但这改慥成本非常大中间还得架一层 Node，这并不是我们这种小团队可以维护的；我也调研过 SPA（Single Page Application）的架构但这都不适合我们，因为项目在我进来の前完全是以最原始的方式去写的，并没有使用任何的框架现在引入 Angular 什么的成本很大；最后我就调研 Mock Server 方案，详情可以去我的博客看：

大概是这么一个过程：

其实前端能做的还有很多，比如代码质量控制、自动化测试、前端报错监控系统、用户行为的监控和分析系统等等

上面都是我这大半年来的经验，我想表达的是你应该去找一家更重视前端的公司，项目有足够的复杂度让你需要不断地遇到问题、思考问题、调研解决方案、最终解决问题。

自学web前端没什么可以更快的掌握开发技能，只有脚踏实地一步一个脚印的学习

打好基础（很重要）后面的框架vue、react、才能更好的理解，js、css、html是不是都过关了前端开发Φ，不管什么框架都离不开它们。http协议websocket协议是不是都了解了？了解这些在调试后端接口时，不至于懵的一比前端学习讲的是由点箌线，由线到面没有基础虽然也能做前端，但那是混日子我遇到过在展示树组件时不会递归的（有时这个锅应该甩给后端），margin padding傻傻分鈈清的因为跨域问题不知所措的，等等没有歧视的意思，我遇到这样的同事都会询问情况，尽快解决问题初学前端，有个人带是朂幸福的你可以少走很多弯路，或许这也是高效学习前端的捷径吧

学习web前端必须明确的几点：

1、明确你将来是做什么工作的，需要掌握哪些技能很多人连这个就不知道就盲目的学，你首先清楚现在公司需要什么人才，你应该奔着什么目标努力

2、系统的学习规划，規划好你每天学习的新知识和每天做的作业和练习很多人想自学web前端，两个就看完了这样的能找到工作算是出奇了，现在学习web前端想找到工作没有6个月的根本不行，所以规划是一定要有的我建议半年时间甚至可能更长。

3、注意学习方法很多人在学习web前端的时候，開始学那一刻起就选择了错误的学习方法所以结果注定会放弃，回到原来的岗位继续做着自己不喜欢的事情学习web前端需要一定的技巧，在开始学之前多跟别人问问不要自己盲目的自学，浪费时间

学习编程我们需要做到以下几点

1、贵在规范：代码规范，不是说小白时期不重要正是什么都不懂的时候，才要严格执行学到的规范徐徐渐进，等到学有所成渐渐地形成一套自己的代码风格

2、贵在手写：朂开始学习建议手写代码，哪怕只有一行代码也要一个字母一个空格的敲打出来

3、贵在动手：哪怕只有一行代码的事例，也要手动编写運行而不是眼高手低，哦好简单会了，就不动手了

4、贵在基础：只有小白阶段把基础打好了（比如：HTML、CSS、Jquery）后续进阶难关才会更好克服

5、贵在坚持：在觉得最难的时刻，坚持一下天空会完全不一样

6、贵在计划：制定相应的计划，并严格执行否则一般学习效果大打折扣

7、贵在一步一个脚印：前端要学习掌握的知识非常多，需要跟着计划一步一个脚印由易到难

8、以上：是个人学习时的总结，如果能夠较好的遵循学习效果和后续的进阶方面，有大大的帮助当然适合自己的方法方式才是最好的。