Web前端框架技术综述

软件开发与应用Software Development And Application电子技术与软件工程Electronic Technology & Software EngineeringWeb前端框架技术综述项阳阳（武汉职业技术学院计算机技术与软件工程学院 湖北省武汉市 430074）摘　要：本文对jQuery、Angular JS、Backbone、ReactJS、VueJS五种主流前端开发框架进行研究介绍，给前端开发人员带来选择框架和编写前端项目的一些启示。关键词：Web前端开发框架；jQuery；Angular JS；Backbone JS；VueJS；ReactJS1 引言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对象的操作、遍历、事件绑定、●社科项目：武汉职业技术学院2020年社科项目（2020YJ010）。58图1：MVC模式流程图图2：MVVM模式流程图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迎来

电子技术与软件工程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）的框架；数据和视图分离，可以达到“高Software Development And Application软件开发与应用内聚，低耦合”的目标[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前端，职业教育。59