软件开发与应用
Software Development And Application
电子技术与软件工程
Electronic Technology & Software Engineering Web主流前端开发框架的设计
周星岩王俊淘
(沈阳师范大学辽宁省沈阳市110034 )
摘要：本文在阐述Web前端演化历程的基础上，分别探究了 Query、Angular JS、Backbone、ReactJS、VueJS各前端开发框架的主 要构成、原理、适用性等，停工检测代码质量、整体应用框架及分析易用性等过程去测试开发框架。希望能和同行分享经验，整体优化前 段开发效果。
关键词：前端开发框架；Query;Angular JS;Backbone;ReactJS;VueJS
近年来，I T技术朝着多元化方向发展，浏览器段出现了很多 性能优异、功能强大得到开发框架，比如JavaScript、VBScript、Jscript等脚本。在浏览器产品呈多样化发展的态势中，即便还是存 有ECMAScri
pt标准，但是因其编制相对较迟，故而各个浏览器运 行阶段均设定了各自的标准，这就要求开发人员面对网页的同个功 能时，要为其编写出数份代码，进而使其在不同浏览器中表现出较 高的适用性m。迄今为止，jQ uery依然是应用范围最广的一种框 架，其有效应对了过去网页兼容性问题，使前端变成更具简洁性。和MVC模式在前端开发领域中应用范围不断拓展相伴随的是各种 开发框架的构建，本文主要介绍了几种主流框架。
1W eb前端模式的演化
早在1989年，就有物理学家研发出超文本标记语言，即我们 耳熟能详的HTML。
1993年HTML演变成成互联网草案，原始的HTML仅是静态 页面，无法动态整改页面内容。1995年，JavaScript诞生后使页面 实现了动态整改，时至今日，我们可以将Web前端模式细化为如 下四个阶段[21:
(1) j s整合原始的浏览器AP丨，以浏览器的运行机制维基础 直接操作控制、页面DOM。
(2) Web 2.0时代到来以后，对Web开发提出了更多、更高 的要求，a_ja x日渐流行。为降低跨浏览器开发过程的繁杂性及综合 分析不同浏览器之间的兼容性，Dojo、Mootools、Prototype等前端 类库陆续出现，jQ uery以简洁、优雅。美观等设计优势脱颖而出，在业内占据着很高的地位。
(3) MVC模式出现后，在前端技术的引领下，很多后台的业 务逻辑慢慢转移至向前端，单独使用jQuery经常不能满足繁杂业务 的运转需求，特别是在单页面运用方面表现得更为显著，Backbone, j s应时而生，其被视为前端MVC框架的鼻祖，显著提升了前端开 发的价值[31。
(4) MVVM模式以MVC的思想为基础，巧用数据驱动视图，促进数据和视图两者的完全分离，这样前、后端达到了真正意义上 的分离，自然而然的在Web开发领域中占据了独一无二的地位。
2几种常见的W eb前端开发框架
2.1 j Q u e r y
jQuery是JavaScript的封装，其主要是用于封装常规功能以及 处置浏览器的兼容性问题。“write less,do more”是其核心宗旨，力争用简洁代码形成多样化的功能。jQuery属于轻量级的脚本，生产版本文件包单一，只有94.8KB。当下己对外发布了 3个系列 的版本，1.12.4、3.5系列版本应用范围较宽广。现存的很多网站 对外提供了线上CDN的jQuery资源，只要能将特定语言添加至 HTML代码内便能顺利引用jQuery语法。项目推进阶段合理应用 jQuery，有助于减少JavaScript的代码数量。
2.2 A n g u l a r JS
该框架主要是采用HTML III TypeScript去建设客户端应用的平 台，主要是为了解决既往“单页面运用”
时暴露出的不足。当下，该框架己发布至第二个版本，MVC框架是最经典的模式，对双向 数据绑定过程起到了强大的支撑作用；其内的V作为视图元素，是 利用html实现自身功能的，样广大用户便能清晰的观察到页面内容 C对应的是控制器Controller，基于JavaScript实现，作为页面的逻 辑部分；M是数据Model，即页面上存有的数据模型[4]。用户浏览 网页过程中，和页面进行交互，例如点击、移动、滚动鼠标等后，控制器获得相应信号去进行处理，处理结束后最明显的特征是数据 模式被更新。
Angular J S和Jquery项目之间存在较大差异，没有将所有代码 融合为一，更具简洁性。应用MVC模式后，促进代码逻辑、U I层 两者的分离过程，代码的整洁性、清晰度均有很大提升，为信息整 改及运维管理等过程创造了很多便利条件。升级后的AngularJS版 本能提供完整度更高的文档，并提供脚手架Angular CLI用于搭建 环境，能够形成库代码、运行多种连续开发任务，比如检测、包装 与布置。模块化是本框架设计时遵循的主要思想，以此为基础构建 出个性化的指令系统，要求工作人员严格依照框架设定的方式进行 编码，需在工作团队的协助下进行，无形中增加了代码的可维护性。
2.3 BackBone JS
2010年是该框架的诞生之年，其融合了 f Underscore、Require JS、Handlebar，其中Underscore持有的功能和jQuery较为详细，能够提供基础性的功能函数库；Require J S为构成JavaScript的加载器，能够使前端代码对按需加载过程提供强大的支持作用；Handlebar通过分离view、data区快捷的建
设出Web模板h1。Backbone JS在繁杂的“单页面运用”中表现出极高的适应能力，其为当时的很多开发人员提供更轻量、友好性更强的前端开发处 理办法。Backbone框架下能够达到视图组件化，具体是对繁杂的 View视图进行切割处理，使其成为微，自行定义出组件模版，完
30
电子技术与软件工程
Electronic Technology & Software Engineering
全分离事件绑定与数据绑定。2014年前后，Backbone JS框架在国 内外备受欢迎Airbnb、Linkedin、百度贴吧等均用了该框架的局部功能。
2. 4 React JS开发框架
该框架始源于Facebook的内部项目，主要被用在搭建用户界 面的JavaScript库领域中，将简洁、独立的代码片段组建成繁杂度 很高的U I界面。其性能优良、代码逻辑简易，能较好的应对既往 跨浏览器过程出现的兼容性问题。
ReacUs能够直接整合用户界面，借此方法协助开发人员获得 多种交互式网页。并且将JSX语法整合至
该用户界面内，能明显提 升复用式组件的简洁度，操作过程更为简易，且还能维持组件内部 构造的高清晰性。以这些组件为基础，React J s能够精确辨别代码 和现实目标，在浏览器内DOM渲染功能的协助下去研发网页，这 是成功研发原生移动应用功能的重要基础。
2. 5V ue JS
这是一种建设w eb界面的hvaScript框架，渐进式是该种框架 的主要特征，和其他类型的前端框架相比较，Vue J S按照从下至上 的顺序实现增量级幵发、应用，器给予视图层较高关注，较便捷的 和第三方库或现有项目整合为一
Vue JS框架能够提供极为独特的MVVM数据捆绑与一个能够 实现组合的组件系统。站在技术层面上分析，MVVM模式上设定 的视图模型屋是Vue JS框架关注的焦点，并基于双向数据绑定的 形式建设了视图与模型两者的连接关系，进而对页面的效果形成良 好的驱动作用。何其他MVVM框架做比较分析，VueJs更具操作性，能够迅速应用异步批处理方法更新DOM，整合应用可复用的、解 耦的组件，准许安装多种类型模块，情境应用过程也具有很高的灵 活性。
3测试开放能力
3. 1监测代码质量
前端代码质量是测评框架开发效率的主要指标之一。利用模块 化思想设计开发框架，其对开发人员编写代码的方法表现出了强大 的支撑作用，引用模板后能更标准、规范的编写代码，明显减少了 既往拼接字符过程中的错差，也规避因开发人员编码格调不统一而 增加框架运维成本的问题m。利用JSHim检测框架j s代码质量，借此方式利用检测规则、运行指令去探查到代码潜在的一些不足。通过检测j s代码质量，而后有针对性的整改检出问题，不仅能优化 框架编码品质，还能引领编码风格标准程度提升过程。
3.2框架的综合运用
开发Web应用程序时框架的主要作用，运营告示、活动、问题、权限、消息、申请、现金、文件和计划管理等均是当下主流框架的 基本功能。标准U I样式区规范页面样式。在以上开发实践中，釆 用框架内持有的功能，比如基于数据驱动模型形成的差异化渲染、预编译、数据化存储等功能。
3. 3分析易用性
主要是采用易学习性、易理解性与易操作性去测评前端易用性
软件开发与应用
Software Development And Application
抵达的程度，需要综合分析框架的各个功能属性、模块学习的难易 程度、框架使用者持有的能力。具备JavaScript开发实践经验的人 员是框架的主要使用体，大部分开发人员对语法、方法能扎实掌 握及娴熟运用。只要能对前端开发涉及到的数据模型与模块化机制 有全面了解，便能顺利的了解框架源代码的内涵，随后掌握框架的 正确应用方法|81。框架还对外提供了教程与详尽的应用操作说 明，这样即便是程序员新手也能通过学习教程去掌握框架的具体应 用方法。
视图层、模型层和视图模型层是构成框架的三个主要层次。模块化思想明显提升了视图层代码编写过程的简洁度，帮助相关人员 更快捷的掌握模块的操作使用方法。熟悉模板语法是模型层学习过 程中的核心内容，框架外供极为丰富的指令集去提升模板的简洁度，便有开发人员灵活使用。
4结束语
本文简要分析、概括了 Web框架的发展演进过程，阐述了 五种Web主流前端框架的发展、应用情况。若被开放的项目属于 “多页面应用”的范畴，P C断客户是主要的用户，那么jQuery 能较好的满足现实需求；如果热衷于Typescript语法，则推荐使用 Angular2.x。在互联网技术不断发展的时代背景下，相信将会成功 研发出更多样、功能更为优异的Web前端框架，进而为众多开发 者提供更多品质优良、运行高效的工具。
参考文献
[1] 黄玉春.MVC框架在A SP.NET中的应用研究与实践[J].商丘师
范学院学报，2021，37 (03): 14-18.
[2] 陈奕成，方辉，尤树林等.机械设计计算Web系统的设计与实
现[J].现代制造工程，2020, 74 (11): 55-60.
[3] 刘振强.在L aravel项目中应用Foundat io n框架的实现[J].
jquery框架原理
科技视界，2020, 75 (31): 48-49.
[4] 徐杰.基于F la sk的分布式Web服务架构研究与应用[J].工
业控制计算机，2020, 33(10): 97-98+101.
[5] 刘一燃，白卉洁，胡涵洋等.基于W EB开发的高校竞赛网站设
计与实现[J].电子世界，2020 (19): 19卜193+197.
[6] 李云.Web前端M V C框架的意义研究[J].电子技术与软件工
程，2020, 74 (19): 47-48.
[7] 郭金涛，余建波，王龙.实验室采购审批的Web平台的设计与
实现[J]•工业控制计算机，2020, 33 (08): 110-111.
[8] 何冬辉，史晓波，李知俊.基于谐分量-影响系数法的转子动
平衡计算软件开发与应用[J].东北电力技术，2020,41 (08): 54- 57+62.
作者简介
周星岩（1999-)，女，陕西省铜川市人。大学本科学历。研究方向为软件工程。
王俊淘（2000-)，男，山东省淄博市人。大学本科学历。研究方向为软件工程。
31

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