经验分享：如何系统学习 Web 前端技术？

这篇文章主要是面向小白用户的，如果你有些基础，当然也建议你看看，尤其是最后一个主题，或许你能得到一些启发。本文的观点，纯属个人自以为是的想法，不是真理，仅供参考。

抛开具体技术细节，先主要谈谈程序员如何更高效的，有选择的学习技术。我能体会到选择的轻松和乐趣，体会到身为技术人员和人类的平衡感。字里行间中，我要表达的是一种放弃与选择的哲学，能品到这一点，我就很高兴。

 

人生苦短 我们需要一个基线

 

古代小说里，高手如云，人们为了生存，要掌握一套保命武功。其中，我最喜欢的是轻功，毕竟三十六计走为上策（狡诈的一笑）。说到底，武功和技术一样，都是为了生存。

 

问题是，现实一点来说，一个武者，很难掌握所有的武功秘籍，因为臣妾做不到啊；所以如果有一种武功，能够远攻和近攻，能逃跑能单挑，那就极好了。

 

玩“农药”也一样，我发现英雄们各有优缺点，但你又不可能什么英雄都练，因为臣妾也做不到啊，毕竟上场时就一个英雄，所以就需要选择，我选择的是吕布和赵云，他俩在游戏故事设定中是情敌，其实貂蝉喜欢的是赵云，我之所以选这两个情敌成为基友，是因为符文一样，这点很重要，五级符文真mde难攒，吕布和赵云战斗力都很棒，我基本就练这两个，现在的级别是永久钻石，虽然不是最厉害的，但在王者的世界，确有一席之地。

 

技术也是一样，我通过一套技术，每天用这套技术开发，不断磨练，好过啥都学，啥都不深入，因为之所以深入，是因为你不断去用，很多时候，一个技术名出来，就买书学，其实很傻很天真，因为技术是手段，目的是解决开发问题，如果用不上，就毫无意义。

 

回过头来，我们发现“农药”中选英雄，和选自己的技术体系是一样的。我们狭义的目的，是想通过一种技术（手段），能够开发尽可能多的应用程序。

 

那么如果有这种技术，最好满足以下几个特点：开源，前后端全栈式开发，前后端代码可以共享，最好在有生之年不被淘汰的，最重要的是好就业的。

 

符合这些特点的技术，当属 Web 技术了，下个主题让我们探讨，它为什么符合。另外需要说明的是，这里说的 Web 技术，是我进一步浓缩的技术体系，因为广义上的 Web 技术，其实涵盖的面太广了，我们需要进一步，抽离出更符合这些特性的具体技术，形成一套便于开发的 Web  技术。所以，下面讲的是狭隘的 Web 技术。

 

 

Web 全栈式开发

 

HTML5 与 Node.js 技术，可以让程序员做到 Web 全栈式开发。这套技术是标准的、开源的。

 

HTML5 大家都听过，百度就可以知道它的定义啊，历史啊等一些信息，所以，这里不再赘述。HTML5 是标准化的技术，Node.js 是开源技术，所以完全免费，随便用。另外，当你进入到 npmjs.com 网站，会发现无数 Node.js 第三方库，最重要的，这都是免费的，开源的，这为我们的项目开发提供了一个强大的、免费的开发团队！你可以直接用别人的开发成果！

 

这套技术不会被淘汰

 

学习是有成本的，时间是宝贵的，因为生命宝贵；人都是想用更多时间陪陪家人，陪陪女朋友和基友，也喜欢玩玩“农药”，去迪士尼当回小孩儿；如果你爱技术胜于当人的乐趣，那么恭喜你！至少我们不太喜欢，学个一溜十三招，最后学的东东淘汰了或过时了。

 

HTML5 技术是标准的，我们用到的浏览器都支持他，所以在可预见的未来不会被淘汰。而 Node.js 是开源的，不受一个公司的控制，却受到各个大咖公司的赞助和支持，包括微软、因特尔、IBM … 具体参看 https://nodejs.org/en/foundation/members/  所以 Node.js 在可预见的未来，也不会被淘汰。

 

所以学习 HTML5 and Node.js 技术可长久有效。

 

这套技术可前后端全栈式开发

 

我们所说的 HTML5 和 Node.js ，是前后端技术的代名词，因为围绕它们的，是非常庞大的生态圈。这个我们会在下一主题中说明。

 

一个软件可以分为前端和后端，比如一个 App 分为客户端和服务器端程序。通过 HTML5 技术可以开发客户端程序，服务器端程序可以用 Node.js 开发。

 

那么，为什么 HTML5 要与 Node.js 构成前后端全栈技术呢？ 而不能是 html5 ＋ php 或其它呢？也不是不能，而是前者更有优势。

 

浏览器程序是采用 Javascript 语言编写的，而服务器端的 Node.js 程序，也是用 Javascript 语言编写的，所以前后端可以统一使用一种编程语言开发。这样前后端的很多库，都可以共享，既可以运行前端，又可以运行后端，提高了开发效率。

 

学好这套技术好就业

 

上面说了一些，这套技术的优势所在，那么为什么说，学好这套技术好就业呢？要回答这个问题，还需更进一步说明，使用这套技术到底能干什么。

 

我们掌握这套技术后，可以开发全端程序，比如 iPhone Android 的 APP ，可以开发 Web 程序，可以开发桌面应用程序，甚至可以开发物联网程序等等，更重要的是它节省了开发成本，提高了开发效率。

 

节省开发成本，是因为雇佣一个程序员，可以同时开发前后端，工资要比两个人少，而且由于 Node.js 本身的特点，可以节省公司服务器，这也是 paypal 之所以用 Node.js 技术重写系统的原因。

 

而提高开发效率，是因为使用这套技术，可以写一套程序，运行在  Android iPhone  PC  和 服务器端，当然这样说有些夸张，多少会更改一些，但基本上做到了，一次编写到处运行。

 

再有，Web 前端肯定要用到  HTML5 技术，后端可能会用到其他技术，但即便后端程序不用 Node.js 开发，或多或少都要用到 Node.js ，因为围绕它诞生的一些工具，在开发中必然会用到的，比如 Webpack ，Gulp等 Node.js 相关技术。

Web 前端技术知识体系

 

前面讲了两点。第一点，说明人精力有限，有空要多陪陪基友和女友，所以我们要选择一套全栈式开发技术，帮助我们轻松开发应用程序，这就是 HTML5 + Node.js 技术体系。第二点，吹了半天，来说明这套技术多多好。

 

那么，HTML5 和 Node.js 就是两种技术吗？当然不是了，衍生出的技术好多好多。HTML5 是什么，你 google 吧，我这里不粘贴了，可好？ 如果你说：google 臣妾做不到，那就百度吧。

 

Web 前端程序，实际上运行环境就是浏览器，现代浏览器已经是一个平台了，提供了很多 API ，我们叫做 Web API。编写一个 Web 前端程序，需要用到的技术有 HTML5 / CSS3 / Javascript 。而 HTML5 往往是这些技术的总称。

 

那么，用这三个技术确实能写出程序来了，但是从头自己些也是很慢的，可以用很多工具库和框架，帮助我们快速开发。

 

前端技术库

 

比较火的技术包括：  JQuery , Angular2 , React , Redux , Vue.js 等，这些工具库各有千秋，比如，比较小的程序，用  JQuery 就可以搞定了，如果比较复杂的，可以用 React ，Angular2 或 Vue.js 库。

 

开发  Android 、iPhone 和桌面程序

 

上面介绍的部分前端技术，可以写出程序来，但只能运行在浏览器中，我们也可以用打包工具，让开发好的程序，运行在 Android iPhone 和 电脑上。

 

PhoneGap 和 React-Native  就可以用我们已知的技术，来开发Android 和 iPhone 程序，而用 electron 就可以把程序打包成 PC 电脑桌面程序。

 

掌握以上技术，就让我们可以开发各种客户端程序了。

 

服务器端技术

 

那么，服务器端程序用 Node.js 就可以了吗？ 你当然可以从头写服务器端程序，最好是用现成的框架。比如 Express koajs 等框架，来编写 Web 服务器端程序。

 

数据库也是需要的，要不数据就没法持久化和查询了，我推荐用 mongodb 数据库，采用 mongoosejs 库来写 Node.js 的数据库程序，因为  mongodb 数据库的文档结构，和 javasript 的 json 是很类似的，另外 mongodb shell 用的也是 javascript 语言。

 

单元测试

 

到目前为止，前后端程序所需技术，都够用了。那么，还有一个问题，就是测试！ 程序开发后，再整体测试，会出现很多幽灵bug，也就是很难找到问题根源bug。所以，最好是单元测试，就是写点代码就测试一下，遇到问题及时解决，而不是 bugs 攒多了到最后无法解决。这方面的单元测试工具也有很多，推荐 Node.js 后端程序用 mocha 做单元测试，前端用 jasmine + karma 做单元测试，因为karma 可以让我们在终端就能看到多个浏览器测试结果，而不是各种浏览器，挨着个的刷新看结果，前端浏览器测试最麻烦，因为有兼容问题，所以用 karma
大大提高了我们测试效率。

 

打包工具

 

像 Webpack , gulp 等技术也是需要掌握的，可以帮助我们自动打包程序。

 

 

Web 前端技术学习路线图

 

上面说了这么多，到底如何一步步掌握这些技术呢？ 下面推荐一个学习路线图，希望对初学者有帮助。

 

Javascript 语言：全栈开发中，用的编程语言就是 javascript

 

HTML5 标签和 DOM：这是前端最核心技术，为之后学习各种开发框架，打下坚实基础。

 
CSS3：学习通过 css
开发网页和各种可视 UI 组件。

 
SASS：利用 sass
语言，开发复杂的页面 css

 
Node.js：掌握Node.js 核心 API ，具备后端开发能力。

 
Express 5.x 框架：掌握 Express 框架，从而具备快速开发后端程序的能力。

 
socket.io 库：让前后端通过 websocket协议通信，是web 开发游戏、聊天等程序必备技术。

 

Mongoose 框架：可以让程序具备文档数据储存能力

 
Git 命令与 github：可以对项目进行版本管理，从而能团队开发项目。

 
Gulp 构建工具实战：通过 gulp 工具，灵活对项目进行构建。

 

Webpack：可以用和 Node.js 后端模块化方式，开发前端程序，从而能开发大型系统。

 
Jasmine & Karma：可以利用 Jasmine & Karma 轻松实现，多种浏览器同时进行单元测试，而不必切换界面。

 
前端相关框架：JQuery ／ Bootstrap ／ Vue.js ／React ／ Angular通过框架帮我我们快速开发程序

 

移动端与桌面程序开发工具：phonegap ／ react-native / electron / 微信小程序开发，这套工具，基本上只是打包工具，和提供了一些特定平台 API ，开发还是使用之前的 Web 技术。