最走心的前端开发技术栈（概览）

在前端大全微信公号后台收到不少以下这样的留言反馈

• 我该如何学习、提高前端开发水平？

• 前端开发涉及到哪些技能点？

• 能不能推荐经典的前端开发技术书籍？

• ……

若是你也有相似的困惑，这份 Web 前端开发技能栈就是为你准备的。它的目标是作成一份前端开发入门、进阶的参考指南。目前已经出炉的是概览部分，后续还会补充前端开发的技能点列表和各类扩展阅读资料。若是你对这份参考指南有任何反馈，请在评论中留言告诉咱们。谢谢！

如下是正文

这篇文章并无单纯的罗列出前端开发涉及到的技术栈，而是探寻这些技术栈背后的『秘密』，适合初学者以及想要了解这些『秘密』的阅读者。如仅想了解前端开发技术栈的话，请持续关注前端技能栈 https://github.com/jobbole/web-skill-set

开篇：

工欲善其事，必先利其器。

出自：《论语·卫灵公》

前言：

因为 JavaScript 的语法很简单，因此上手容易，基本上少则数周就能够开发项目了，但这就是 JavaScript 的所有吗？显然不是！不少刚接触 JavaScript 开发的程序员，或多或少的都要再继续学习其它的技术栈，如：grunt / gulp, npm, requre.js / seajs 等辅助性技术；学习 prototype / proto 等较晦涩的语法知识；掌握 MVC / MVP / MVVM 等设计模式；Backbone.js / Vue.js / React / AngularJS 等框架；jQuery / Protorype / lodash 等库。

疑惑：

一些初学者大多都有这样的想法：我如今能够用 JavaScript 编写程序了，而且也正常上线了，并且运行的也不错，为何我要再花额外的时间学习这些技术栈呢？

答案：

上述这些技术栈是为了弥补 JavaScript 在开发大型项目时的短板。

疑问：

JavaScript 做为前端开发领域中最重要的语言，难道没法胜任如今的大型项目开发吗？若是要寻求这个答案，须要咱们从新认识 JavaScript 的前世此生。

前世：

JavaScript 在创造初期用来（ 脚本形式 ）弥补网页开发的不足。在那个时代，JavaScript 做为诸如： ASP / JSP 等开发语言的辅助功能存在，常用的场景（ 之一 ） 就是 『表单验证』。虽然 JavaScript 的缔造者 Brendan Eich 大神早已 『洞悉』了将来，但也没法阻挡 JavaScript 只花 10天 创造出来的事实。（ 初版 ）那个时代，尚未一个专门从事 JavaScript 开发的职位，前端开发先驱们将更多的精力放在了 『浏览器大战』 以后的兼容性问题上。

发展：

浏览器大战以后的另一个影响，就是推进了 JavaScript 成为国际化标准，即：ECMAScript （欧洲标准化组织ECMA（European Computer Manufacturers Association）），后者用来描述 JavaScript 的语法结构，并推进它的发展，前者只是后者的实现方案。（备注：另一个 ECMAScript 实现方案是 ActionScript 3.0 ）

此生：

随着 Chrome 这种现代浏览器的出现，其背后的 JavaScript 解析器（V8）大大加强了 JavaScript 的执行速度/效率。（在 V8 的基础上，另一位大神 Ryan Dahl 发明了 Node.js，将原本仅仅运行在浏览器端的语言，发展到了后端开发。）jQuery 的诞生，使前端开发先驱们抽离出『浏览器兼容性问题的泥沼』，有更多的精力来思考 JavaScript 的将来。网络带宽的增大以及 Ajax 技术的出现，使网页具备异步更新的方式，大大的加快了由传统 B/S 架构向 C/S 架构的探索，Google Gmail 的成功进一步推进此项技术成为大型项目的可能性。最终出现了 SPA（ Single Page Application：单页面应用程序 ），至此使用 JavaScript 开发大型项目成为一种趋势和标准。

短板：

因为 ECMAScript 推进着 JavaScript 的发展，即使 JavaScript 是上世纪的产物，但使用它开发一个小型的前端项目，其实并不困难。可是，一个大型的 SPA 项目每每具备 n个外部引用类库，数十个（甚至更多） js/html/css/图片 等资源组成；多人参与/长时间维护，成千上万行的代码的特色。显然，这些都是 JavaScript 在最初时所没有考虑过的状况。

前端项目的特色：

正如前文描述，技术栈弥补了 JavaScript 在开发大型项目上的短板，因此为了更加清晰的分析技术栈的特色，先从问题入手：

一个大型的 JavaScript 项目一般须要解决哪些问题？

• 外部引用包的管理；

• 过多的代码致使的项目更新，迭代，重构难题；

• 多人参与，开发职责区分困难；

• 虽然网络带宽获得了很大的提升，但页面的加载速度还是问题；

• 静态资源（ html/js/css/图片资源等 ）过多致使上线时的重复性工做量增大；

外部引用包的管理：

JavaScript 先天不具备其它语言的包管理功能，但这并无阻碍咱们伟大的前端开发先驱们的探索，npm，bower 这类技术栈为咱们解决了包管理问题。

过多的代码致使的项目更新，迭代，重构难题：

既然代码过多，就须要使用诸如：封装，继承 等现代化编程语言的面向对象编程方式。虽然 JavaScript 缔造初期并非解决这些问题的，但 Brendan Eich 大神显然预见了将来，即在第一版的 JavaScript 语言中，就包含了 OO 思想。换言之，JavaScript 是基于对象的开发语言。

虽然都是面向对象，但 JavaScript 与传统的面向对象不太同样，它使用了 更加高级但晦涩 的 继承链 方式，这就是咱们须要理解 prototype / proto 这些技术栈的缘由。

多人参与，开发的职责区分困难：

因为大型 SPA 项目的出现，页面不只承载了用户行为，更多的是将后端主导的逻辑开发也带到了前端。本来 MVC 中的 『M』比任何以往都要『重』，以致于在 『M』层，又造成了新的框架理论。所以了解并掌握 MVC / MVP / MVVM 等设计模式就变成了必要手段，进而 前端框架 开始流行。与其它语言同样，选用现成的前端框架天然变成了趋势，这些现代化框架的『设计思想』包含了前端开发新颖的理念， 如：操做虚拟 DOM（ Virtual DOM ）的 React；单纯的践行 MVC 理论的 Backbone.js；MVM 风格的 AngularJS 等。学习并掌握前端框架能够更好的区分职责，而框架统一的 API 实现了长时间多人开发/维护的可能性。

虽然网络带宽获得了很大的提升，但页面的加载速度还是问题：

因为SPA 是单页面应用，所以页面在加载的时候几乎包含了所有功能，但用户每每却只使用其中的一部分，因此网速的限制，带宽的浪费，用户的等待则是另外一个难题。『模块化开发』 是解决这类难题的银弹，而 AMD / CMD 的理论天然成为前端开发者们掌握的必要知识，而 requre.js / seajs 则是这些理论的具体实现方式。因为 Http 的特性所致 ( 分散的，小的静态资源在加载的时候更慢 )，所以 合并/压缩 则是另一个解决方案，所以也产生了一个新的问题，即第四个问题。

静态资源（ html/js/css/图片等资源 ）过多致使上线时的重复性工做量增大：

当这类静态资源不多的时候，手动 合并/压缩 并无问题，反之这些资源呈指数上升的时候，手动方案显示不是一个好办法。自动化方案 的引入势在必行，而其中践行者：grunt / gulp / webpack 就须要掌握了。

思考：

上述大可能是『 非官方机构 / 开发者社区 』创造出来的技术栈，推进 JavaScript 发展的 ECMAScript 官方组织在作什么？难道当前 『最in』 JavaScript ，实际上是个过期的产物？

答案固然是错的，ECMAScript 早已公布了 它的第六个版本：ECMAScript 6（ 2015年6月正式发布 ）

ECMAScript 6：

它最重要的特性（之一）就是包含了：Class（ 原生 OOP ） 和 Module（ 原生模块化 ）方案。

结论：

不掌握这些技术也能够实现 JavaScript 开发，但掌握了这些技术栈可使咱们从 『繁重 / 繁琐』的事务中抽离出来，更加 『专一于业务逻辑』。

上述技术的掌握能使咱们更好的融入现代化的前端开发中来。

结语：

若是你看到这里的话，那么恭喜你，欢迎来到新世界！！！

彩蛋1：

上述列举的知识点仅仅属于前端技术栈的一部分，除此之外还包括了：调试/测试，性能优化，CSS预编译方式，编码规则，SEO，移动 Web 开发 等。

彩蛋2：

掌握这些技术后就万事无忧了吗？固然不，随着前端开发的发展，总有一天，这些技术仍没法知足开发。因此要了解这些技术栈背后的理论逻辑，以不变应万变，方为制胜之道！

彩蛋3：

• 类似的技术栈，如何取舍？

• 只要是大型项目就都须要这些技术栈吗？

• 为何使用了框架后，仍是以为开发慢？

• 使用了 xxx 后，并无实际解决个人问题？

想弄懂它们？，请关注前端技能栈 https://github.com/jobbole/web-skill-set

参考文献：

• ECMAScript is an object-oriented

• ECMAScript 6 语言描述

• ECMAScript 6 浏览器兼容表

• 浏览器兼容性问题 连接 及 浏览器大战

• Chrome V8 解析器