走进前端开发——框架的演变
小猴 2019-07-01
对于大多数前端框架，我想聊一聊，这些前端框架从何而来，解决了什么问题，又有哪些高明之处。
认识了解问题，切忌一头扎进去研究而未了解其全貌。为此，我们追溯到20世纪90年代，网景浏览器横空出世，占据了浏览器市场第一的份额。那时的网景浏览器已经搭载了 Cookie、 Frames 和 JavaScript 等功能，可惜好景不长，再后来与微软的“浏览器大战”中败下了阵来。
于是网景公司将代码开源，创造了 Mozilla ，也就是现在的 Firefox。可以说，浏览器大战从未停止过，Opera 、 Safari 、 Google Chrome …… 当然，还有微软的 Internet Explorer 以及一些其他的浏览器。各浏览器引擎不同，标准不一，苦了的就是我们的主角：前端开发。
排版引擎
所有这些浏览器，使用最广泛的无非是这些引擎： Gecko 、 WebKit 和 Trident 。最早的 Netscape 使用的是 Gecko 排版引擎，后来的 Firefox 继承了它的衣钵。微软从 Spyglass 公司买来技术开发了 Internet Explorer ， 使用了 Trident 引擎。苹果开发了 WebKit ，做出了 Safari 浏览器，后来引擎开源， Google 做出了基于 WebKit 的 Chrome 。
有人会说，那 QQ浏览器、360浏览器、世界之窗、搜狗浏览器之类的，这些浏览器只是套了 Chrome 或 IE 的内核罢了。
而和前端程序员打交道的，最终就是这三样东西： HTML 、 CSS 、 JavaScript 。
JavaScript
HTML 负责描述界面的元素结构， CSS 负责描述界面的样式表现， JavaScript 负责界面元素的交互和与后台数据的交互。早期的静态网页，甚至不需要 JavaScript ，因为不需要太多的交互。即使用到 JavaScript ，最多也是用于表单验证、弹弹提示框。
随着 Web2.0 的概念炒起来，动态网站逐渐成为主流。早期的动态网站，随便的一个数据更新都要刷新整个页面，体验逐渐变得不可接受。于是，局部数据刷新成了当时的热点，这就是当年炒的很热的 Ajax 技术。
Ajax 的全称是 Asynchronous JavaScript and XML , 即异步 JavaScript 和 XML 技术。当时炒的神乎其神，而其根本本质其实很简单，就是 XMLHttpRequest ，然后配合 DOM 的操作，就可以变化出各种不同的花样出来。 XMLHttpRequest 负责和服务器交互，返回数据后通过 DOM 的操作动态实时的更新界面元素。
然而，一个简简单单的 Ajax ，各个浏览器的支持却不同。为了兼容不同的浏览器，导致写 Ajax 变得异常痛苦。比如，一个 XmlHttpRequest 的跨浏览器的通用写法就必须写成这样：
// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
// when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
for (var i = 0; i < aVersions.length; i++) {
try {
xmlHttp = new ActiveXObject(aVersions[i]);
break;
} catch (e) {}
} //欢迎加入全栈开发交流圈一起学习交流：1007317281
}单单一个 XmlHttpRequest 就让前端程序员百苦难辩，更别说跨浏览器的 DOM 选择与操作、 CSS 的差异…… 前端程序员只能默默檫干眼泪，为了解决这些问题， jQuery 横空出世。
jQuery
jQuery 是一套跨浏览器的 JavaScript 库，既然大家都这么痛苦要处理兼容问题，那何不让我一个人来承受。自 jQuery 从 2006 年 1 月发布第一个版本以来，现在已完全占领市场。据统计，全球前10,000个访问最高的网站中，有65%使用了jQuery 。
jQuery 不仅解决了浏览器兼容的问题，还提供了大量的简便语法，用于选择和操作 DOM 对象、创建动画效果、处理事件以及 Ajax 的支持。
得麒麟才子者，可得天下。 jQuery 出来后，有种得 jQuery 者可得前端天下的感觉。随后基于 jQuery 的各种 UI 插件、组件层出不穷，如 YUI 等等，也呈现出百花齐放的气象。
似乎 jQuery 已经解决了所有问题，而我对前端开发的经验，也止于 jQuery 。 jQuery 的确能解决之前的诸多问题，然而互联网在发展，浏览器的地位不断提高，人们对浏览器里的体验的要求也逐渐变高，Web 端的功能越来越重。 Google 甚至认为你的电脑仅仅需要一个浏览器即可。
需求越来越多，功能越来越复杂，使得 JavaScript 本身的缺点暴露了出来。 JavaScript 过于灵活，代码的组织过于零散，一旦需求变得复杂，这一大坨一大坨的 JavaScript 代码将变得难以维护。特别是如今崇尚的快速开发、快速试错的开发模式，臃肿、难以组织和维护的 JavaScript 代码成了一个需要重要解决的问题。 欢迎加入全栈开发交流圈一起学习交流：1007317281
于是，如何将 JavaScript 代码有效的组织和分类，如何简化代码的写法成为了研究的重点。就连 1978 年就被提出的 MVC 模式也被应用到了前端开发的框架之中。
MVC
MVC 是一种软件架构分层的思想。将软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。
- （控制器 Controller）- 负责转发请求，对请求进行处理。
- （视图 View） - 界面设计人员进行图形界面设计。
- （模型 Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
MVC 的优点是将系统进行了分层，单独的分层变得逻辑更加清晰，便于维护，提高了代码的可重用性，由于各司其职，在响应变化时，也能做出快速反应。
应用到前端开发， MVC 里的 Model 、 View 、 Controller 分别对应：
- （控制器 Controller）：业务逻辑，URL Router
- （视图 View）：用户界面，DOM 处理。
- （模型 Model）：数据保存
除了 MVC ，还有 MVP、 MVVM 等模型。然而，这些所谓的概念真的重要吗？黑猫白猫都是好猫，能解决问题的才是好模型好框架。
xxx.js
后面出来的 xxx.js 我就不太懂了。比如：Ember.js、Angular.js、Backbone.js、Knockout.js、React.js。直到写这篇文章前，才打开各自的主页，粗略的浏览了一下各自的 Quick Start ， 了解了一点各自的特性。
首先，我们来对比一下这几个库在 GitHub 上的 关注度 ：
从上面的数据可以看出， Angular.js 、 Backbone.js 、 React.js 几乎占据了半壁江山。
Angular.js由 Google 推出，从上面的 Fork 数据看出， Angular 在社区支持和贡献上最为突出。从首页的介绍示例看出， Angular 使用简单，代码逻辑清晰一看就明白，比如数据双向绑定的示例：
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>Backbone.js是一个老牌的 JavaScript 框架了，据说后来的 JavaScript 框架都受了它的影响。它的特点是简单、灵活，但是很多事情却要你自己来做。我只是不明白，为什么 Backbone.js 的 Getting Started 会写的那么冗长，对于初学者真的好吗？也许真的是应该是老牌框架的原因吧。
React.js 由 FaceBook 开发，现在也是火的不行。 React.js 让人为之眼前一亮的功能是 虚拟 DOM 的机制。前面提到，为了能支持局部刷新，就需要通过 DOM 操作局部更新元素，一旦项目变大需求变的复杂，也会变得难以维护。而虚拟 DOM 解决了这一问题，通过虚拟 DOM ，你只需要关注整体的 DOM ，当数据发生变化时， React 会重新构建整个 DOM 树， 然后与上一次的 DOM 树进行对比，自己计算出需要变化的部分。由于虚拟 DOM 都是在内存中操作，所以性能会非常好。
React 推崇组件化开发，提供了专有的语言 JSX ，不过并非必须。一个简单的 React 组件的例子：
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
} //欢迎加入全栈开发交流圈一起学习交流：1007317281
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);趋势
关于 Angular.js 、 Backbone.js 、 React.js ， 如果你是这三种的使用者，也许更有发言权一些。我在百度指数里对比了 angularjs , backbone , react 这三个关键字：
可见 Angular 一经推出便先发制人增长迅猛，而 React 开始阶段和 Backbone几乎并列，但从 2015 年开始爆发，增长速度直指 Angular ， 发展不可估量。
总结
未来前端的世界必定会是天翻地覆，过往的发展历史我能力有限也只能提到这么多。虽然前端框架还在一直往前发展，但我回过头来仔细想想，这样的发展方向正确吗？
即使很多人并不喜欢 JavaScript ， 但是 JavaScript 凭借早期的浏览器奠定了坚不可摧的地位， JavaScript 有诸多缺陷，后续的框架只是在不断的弥补它的缺陷而已。还有关于各浏览器的支持问题，后续的框架也是在不断的填坑。你们有没有想过，是否有一天，我们能从根本上去解决这些问题，而不是一次又一次的背上历史的包袱。
感谢您的观看，如有不足之处，欢迎批评指正。
获取资料
