走进前端开发——框架的演变

小猴 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 有诸多缺陷,后续的框架只是在不断的弥补它的缺陷而已。还有关于各浏览器的支持问题,后续的框架也是在不断的填坑。你们有没有想过,是否有一天,我们能从根本上去解决这些问题,而不是一次又一次的背上历史的包袱。
感谢您的观看,如有不足之处,欢迎批评指正。
获取资料

相关推荐