走进前端开发之：框架的演变

by CoderZh 2015年11月07日 3138 Words ~ 7min reading time | Improve on

上周挖了个坑，这周末怎么也得填上。对于大多数前端框架，我都并未用过，但我还是想聊一聊，这些前端框架从何而来，解决了什么问题，又有哪些高明之处。

认识了解问题，切忌一头扎进去研究而未了解其全貌。为此，我们追溯到20世纪90年代，网景浏览器横空出世，占据了浏览器市场第一的份额。那时的网景浏览器已经搭载了 Cookie、 Frames 和 JavaScript 等功能，可惜好景不长，再后来与微软的“浏览器大战”中败下了阵来。

于是网景公司将代码开源，创造了 Mozilla ，也就是现在的 Firefox。可以说，浏览器大战从未停止过，Opera 、 Safari 、 Google Chrome …… 当然，还有微软的 Internet Explorer 以及一些其他的浏览器。各浏览器引擎不同，标准不一，苦了的就是我们的主角：前端开发。

排版引擎

web-kit-renders

所有这些浏览器，使用最广泛的无非是这些引擎： 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

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) {}
    }
}

单单一个 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 代码成了一个需要重要解决的问题。

于是，如何将 JavaScript 代码有效的组织和分类，如何简化代码的写法成为了研究的重点。就连 1978 年就被提出的 MVC 模式也被应用到了前端开发的框架之中。

MVC

MVC 是一种软件架构分层的思想。将软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

（控制器 Controller）- 负责转发请求，对请求进行处理。
（视图 View） - 界面设计人员进行图形界面设计。
（模型 Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

MVC 的优点是将系统进行了分层，单独的分层变得逻辑更加清晰，便于维护，提高了代码的可重用性，由于各司其职，在响应变化时，也能做出快速反应。

更多关于 MVC 的历史和介绍，可以参考 Martin Fowler 的文章： http://www.martinfowler.com/eaaDev/uiArchs.html

应用到前端开发， 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 上的关注度：

Type	Ember.js	Angular.js	Backbone.js	Knockout.js	React.js
Watch	1149	4036	1676	604	2261
Star	15036	43986	23349	6903	30894
Fork	3233	19973	5230	1180	4833

从上面的数据可以看出， 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>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

趋势

关于 Angular.js 、 Backbone.js 、 React.js ，如果你是这三种的使用者，也许更有发言权一些。我在百度指数里对比了 angularjs , backbone , react 这三个关键字：

angular-backbone-react

可见 Angular 一经推出便先发制人增长迅猛，而 React 开始阶段和 Backbone几乎并列，但从 2015 年开始爆发，增长速度直指 Angular ，发展不可估量。

总结

未来前端的世界必定会是天翻地覆，过往的发展历史我能力有限也只能提到这么多。虽然前端框架还在一直往前发展，但我回过头来仔细想想，这样的发展方向正确吗？

即使很多人并不喜欢 JavaScript ，但是 JavaScript 凭借早期的浏览器奠定了坚不可摧的地位， JavaScript 有诸多缺陷，后续的框架只是在不断的弥补它的缺陷而已。还有关于各浏览器的支持问题，后续的框架也是在不断的填坑。你们有没有想过，是否有一天，我们能从根本上去解决这些问题，而不是一次又一次的背上历史的包袱。

为了解决 JavaScript 的问题，甚至出现各种替代语言，而这些所谓的替代语言，也只能算是 JavaScript 的预处理语言，最终还是编译成了 JavaScript 代码，你不觉得有点可笑吗？

比如，CoffeeScript、 Flow 、 Dart 、 Babel 、 TypeScript 。而说到 TypeScript，它的作者是鼎鼎大名的 Anders Hejlsberg 。刚才说麒麟之才，这个才真的是麒麟之才！他是 Turbo Pascal 编译器的作者，后来发明了 Delphi ，加入微软后主导开发了 C# 。现在，他正致力于 TypeScript 的开发。看了最近关于的他的报道，他表示 TypeScript 并不追求替代 JavaScript ，并不计划直接运行在浏览器或系统里，而仅仅关注如何编译成 JavaScript 。这是一种妥协吗？还是暂时的低调？未来会如何发展，这是留给前端同学的问题。

微信扫一扫交流

作者：CoderZh
微信关注：hacker-thinking （代码随想）
本文出处：https://blog.coderzh.com/2015/11/07/front-end-dev/
文章版权归本人所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

走进前端开发之：框架的演变

排版引擎

JavaScript

jQuery

MVC

xxx.js

趋势

总结

Search

Categories