经验分享：如何系统学习web前端（二）

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 技术。

如果通过这套学习路线图学完，那么就业是毫无压力的，但是做为有志向的码奴，我们还需要展望未来和扩展眼界。想要详细查看学习知识点的，点我查看吧！传送门在此。

一提到扩展眼界，有些人就会，疯狂的拿来一本永远不用技术的书，啃起来，比如你是用 html5 写前端界面的，永远用不上 QT 写界面，你买本 QT 津津有味的学起来，如果你感觉不错，那就学吧。

其实，我们学任何技术，都要讲究是否有用，技术本身是冰冷的，如果没有价值，或用不上就不必学，除非你理论计算机学家，这个职位我编出来的，不造有没有这个岗位。