项阳阳

（武汉职业技术学院计算机技术与软件工程学院 湖北省武汉市 430074）

1 引言

1995年，网景公司发布第一款商业浏览器Netscape Navigator，为了提高网页互动性，网景公司设计出第一个能够在浏览器端运行的脚本语言，命名为LiveScript。为了借助Java 语言的营销效应，遂改名为JavaScript。1996年，微软发布VBScript 和Jscript 两个脚本语言，内置于其IE 浏览器中。为了确保JavaScript 占有市场领导地位，网景公司将JavaScript 提交到欧洲计算机制造商协会（ECMA）以便将其进行国际标准化，产生了ECMAScript。为了取得浏览器市场，网景公司在1998年成立了Mozilla 开源项目，准备开发下一代浏览器。2003年，苹果公司发布了Safari。随着浏览器产品越来越多，即使有了ECMAScript 标准，但是由于标准制定较晚，所以每个浏览器都有各自的标准。网页开发人员需要对同一个功能编写出多份代码，以适应不同浏览器。直到2006年，John Resig 编写出jQuery，封装实现浏览器兼容的JavaScript 细节代码，从此解决了网页开发人员处理网页兼容性问题的痛点，极大简化了前端编程。直到今天jQuery 仍旧是使用最广泛的框架之一。随着MVC 设计模式广泛应用于前端开发当中，Angular JS, Backbone JS, React JS, Vue JS 依次诞生并为大家所广泛使用。本文将详细介绍五种框架的原理及优缺点，为立志于与做前端开发的学生普及框架知识，同时给出学习和实践中选择框架的建议和启示。

2 五大主流框架介绍

下面按照前端框架诞生的时间线，依次讲解jQuery、Angular JS、BackBone JS、React JS、Vue JS 这五种广泛流行的框架。

2.1 jQuery开发框架

jQuery 是JavaScript 的封装，实现了常用功能的封装和浏览器兼容问题的处理。设计宗旨是“write less, do more”，以简洁的代码实现较为丰富的功能[1]。这是一个轻量级的脚本，非常小巧，生产版本文件包仅有94.8KB[2]。目前已经发布了3 个系列的版本，用途较为广泛的为1.12.4 版本和3.5 系列版本。很多网站提供了在线CDN 的jQuery 资源，只需要在HTML 代码中添加语句即可完成引用，在后续的JavaScript 代码里便可以使用jQuery 语法。在项目中使用jQuery 可以极大的减少JavaScript的代码量。严格意义上来说jQuery 并不算是一个框架，而是一个JavaScript 库，简化了HTML DOM 对象的操作、遍历、事件绑定、ajax 操作等。

2.2 Angular JS开发框架

Angular JS 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架，由Google 于2009年公布。为了应对“单页面应用”（ 由一个外壳页面和多个页面片段组成，可以在页面切换的时候添加加载动画，用户体验的到提升）。该框架现在已经发布到第二个版本， 是典型的MVC 模式（模型model-视图view-控制器controller）框架，支持双向数据绑定；其中V 为视图（View），使用html 实现的，用户能够看到的页面； C 为控制器Controller，使用JavaScript 实现，主要为页面的逻辑部分；M 为数据Model，页面所包含的数据模型；当用户浏览网页时，即View 部分，发生和页面交互，比如点击鼠标、移动鼠标、滚动鼠标等事件之后，被C（控制器）捕获进行相应的处理，处理完之后更新M（数据模型）。以上为MVC 模式的处理流程，MVC 模式中数据流动是单向的。如图1 所示。

不再像之前的jquery 项目，所有的代码融合在一起，显得臃肿。引入了MVC 模式之后，分离了代码逻辑和UI 层，使得代码整洁清晰，便于修改和维护。第一个版本的AngularJS 已经略显老旧， Angular 2.x 版本做了较大的改动。升级之后的AngularJS 迎来了新的生命，它提供了完整的文档，并提供一个搭建环境的脚手架Angular CLI，可以生成应用和库代码，以及执行各种持续开发任务，如测试、打包和部署。该框架以模块化的思想，建立了自己的指令系统[4]，要求开发人员按照框架规定的编码方式进行编码，因此用作团队开发时，代码的可维护性比较高。使用Angular 1.x 版本的开发人员需要重新学习Angular2.x 的版本，有一定的学习成本。

2.3 BackBone JS开发框架

BackboneJS 诞生时间2010年10月，整合了Underscore、Require JS、Handlebar，其中Underscore 是Javascript 库，功能类似于jQuery，提供基本的功能函数库，但是又非常轻量级，代码只有17.1k；Require JS 是JavaScript 的一个模块加载器，让前端代码也支持按需加载；Handlebar 是一个JavaScript 语义模板库，通过对view 和data 的分离来快速构建Web 模板。Backbone JS 非常适合复杂的“单页面应用”，它的出现为当时的开发人员提供了AngularJS 之外，更加轻量和友好的前端开发解决方案。Backbone实现了视图组件化，该思想也是VueJS、ReactJS、Angular2 框架的基本思想，将复杂的View 视图切割成小粒度的片段—自定义组件模版，分离事件绑定和数据绑定。将MVC 思想升华为MVVM 思想，更加清晰的进行Model->View->ViewModel 的数据绑定。如图2 所示。

其中Model 仍旧为数据模型，ViewModel 作为中间层，又称为组件模板，多个ViewModel 组成了View 视图，将页面分成多个小组件，分而治之，降低代码的耦合度，防止命名空间的污染。将View 和Model 分离，提高了代码复用，开发人员可以拆分称细小的模块独立开发，提高工作效率。Backbone JS 框架在2014年左右非常受欢迎，很多大公司如Airbnb（现已更换为React JS 框架）、Linkedin（领英）都曾经使用该框架，百度贴吧也使用了BackboneJS 的部分功能。Web 前端技术日新月异，Backbone JS 这个框架略显老态，但是它在JavaScript 前端框架演进历史中扮演着举足轻重的角色。

2.4 React JS开发框架

ReactJS 是FaceBook 公司于2013年开源[6]，最初的定位是提出UI 开发的新思路。英文资源比较丰富，其创新的开发理念受到很多开发者的推崇。ReactJS 最显著的特点就是一切以JS 为中心，提供了一种新的语法：JSX，把HTML 使用JS 生成。采用组件化的思想，每个组件生命周期分成三个阶段：挂载、渲染、卸载，每个阶段支持多个生命周期函数，例如：constructor->componentWillMount->componentDidMount->componentWillUnmont 等。只支持单向数据绑定，数据的流向是父组件到子组件。提出Virtual DOM 概念，对于DOM 频繁变化的场景，会通过其diff算法比较新旧两个Virtual DOM 树，找到最小差异的DOM 节点，重新渲染，拥有较好的性能。支持ES6，创新的JSX 增加了学习负担，相对来说学习曲线比较陡峭。React JS 使用state 作为状态管理，当state 发生变化时更新页面。

2.5 Vue JS开发框架

VueJS 是尤雨溪2016年利用业余时间编写，是一个MVVM 模式（Model-View-View Model）的框架；数据和视图分离，可以达到“高内聚，低耦合”的目标[5]。既支持双向数据绑定也可以单向数据绑定。最初的定位是尽可能的降低前端开发门槛，让更多的人更快的上手开发，拥有非常多的中文资源。用户只掌握Web 基础知识（HTML，CSS，JS）即可进行Vue 的开发。提出了符合HTML 语法规则的模板语法，完成数据和视图的绑定。其核心库只关注视图层，便于与第三方库或者项目整合，对开发者非常友好。采用组件化思想，将前端页面分成多个组件，每个组件的HTML，CSS，JS代码集中放在一个以vue 为扩展名的文件中VueJS 已经积累了非常大的用户群体，有非常丰富的生态圈[7]：Vue-cli 脚手架，状态管理工具Vuex，路由管理器Vue Router，调试工具Vue devtools 等，用户需要任意功能，只需要添加相应的库即可，非常方便。组件实现围绕其生命周期进行，共有5 个阶段：beforeCreated->created->beforeMount->mounted->beforeDestory，不同阶段可以调用生命周期对应的钩子函数实现组件数据管理和DOM 渲染够功能，非常灵活。

3 结语

本文主要介绍Web 框架的发展历史，描述了5 种Web 前端框架。总结来说，如果开发项目是多页面应用，且针对的用户群为PC 端客户，那么jQuery 能够满足需求；如果喜欢Typescript 语法的话，选择Angular 2.x 是个不错的选择。Backbone 已经有点老旧，如果现在你还未使用过的该框架的话，那么不建议选择该框架，可以尝试应用Vue 或者React JS 如果非常认同ReactJS 技术思想，那么选择该框架最好需要有一定的英文读写能力，方便阅读文档及与其他开发者交流；如果查看英文文档非常吃力，那么直接选择Vue 作为开发框架，非常容易上手。