58
软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering
●社科项目：武汉职业技术学院2020年社科项目（2020YJ010）。
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 代码中添加<script src=’cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.min.js ’></script>语句即可完成引用，在后续的JavaScript 代码里便可以使用jQuery 语法。在项目中使用jQuery 可以极
大的减少JavaScript 的代码量。严格意义上来说jQuery 并不算是一个框架，而是一个JavaScript 库，简化了HTML DOM 对象的操作、遍历、事件绑定、
Web 前端框架技术综述
项阳阳
jquery在线教程交流
（武汉职业技术学院计算机技术与软件工程学院  湖北省武汉市  430074）
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 迎来
摘　要：本文对jQuery、Angular JS、Backbone、ReactJS、VueJS
五种主流前端开发框架进行研究介绍，给前端开发人员带来选择框架和编写前端项目的一些启示。
关键词：Web 前端开发框架；jQuery；Angular JS；Backbone JS；VueJS；ReactJS 图1：MVC 模式流程图
图2：MVVM 模式流程图
59
软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering
了新的生命，它提供了完整的文档，并提供一个搭建环境的脚手架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 作为开发框架，非常容易上手。参考文献
[1]黑马程序员.jQuery 前端开发实战教程[M].北京：中国铁道
出版社有限公司,2018,1-2.
[2]工业和信息化部教育与考试中心.Web 前端开发（初级）下册[M].
北京：中国电子工业出版社,2019:114-115.
[3]彭玲玲，李诗莹，冯爽.基于前端的Web 性能优[J].电子技
术与软件工程,2017(24):64-65.
[4]时明.Web 主流前端框架研究[J].信息记录材料,2020(21):
215-216.
[5]王鹤琴，朱珍元.基于MVVM 模式的Web 开发研究[J].菏泽学
院学报,2019,41(02):7-13.
[6]徐頔，朱广华，贾瑶.基于VueJS 的Web 前端开发研究[J].
科技风,2017(14):69.
[7]袁芳芳，宁君宇，田路强，陈森.浅谈Vue 生态圈[J].科技
风,2020(17):139.作者简介
项阳阳（1990-），女，河南省开封市人。武汉职业技术学院计算机技术与软件工程学院教师，研究生学历。研究方向为Web 前端，职业教育。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。