Web主流前端开发框架的设计

周星岩 王俊淘

（沈阳师范大学 辽宁省沈阳市 110034）

近年来，IT 技术朝着多元化方向发展，浏览器段出现了很多性能优异、功能强大得到开发框架，比如 JavaScript、VBScript、Jscript 等脚本。在浏览器产品呈多样化发展的态势中，即便还是存有ECMAScript 标准，但是因其编制相对较迟，故而各个浏览器运行阶段均设定了各自的标准，这就要求开发人员面对网页的同个功能时，要为其编写出数份代码，进而使其在不同浏览器中表现出较高的适用性[1]。迄今为止， jQuery 依然是应用范围最广的一种框架，其有效应对了过去网页兼容性问题，使前端变成更具简洁性。和MVC 模式在前端开发领域中应用范围不断拓展相伴随的是各种开发框架的构建，本文主要介绍了几种主流框架。

1 Web前端模式的演化

早在1989年，就有物理学家研发出超文本标记语言，即我们耳熟能详的HTML。

1993年HTML 演变成成互联网草案，原始的HTML 仅是静态页面，无法动态整改页面内容。1995年，JavaScript 诞生后使页面实现了动态整改，时至今日，我们可以将Web 前端模式细化为如下四个阶段[2]：

（1）js 整合原始的浏览器API，以浏览器的运行机制维基础直接操作控制、页面DOM。

（2）Web 2.0 时代到来以后，对Web 开发提出了更多、更高的要求，ajax日渐流行。为降低跨浏览器开发过程的繁杂性及综合分析不同浏览器之间的兼容性，Dojo、Mootools、Prototype 等前端类库陆续出现，jQuery 以简洁、优雅。美观等设计优势脱颖而出，在业内占据着很高的地位。

（3）MVC 模式出现后，在前端技术的引领下，很多后台的业务逻辑慢慢转移至向前端，单独使用jQuery 经常不能满足繁杂业务的运转需求，特别是在单页面运用方面表现得更为显著，Backbone.js 应时而生，其被视为前端MVC 框架的鼻祖，显著提升了前端开发的价值[3]。

（4）MVVM 模式以MVC 的思想为基础，巧用数据驱动视图，促进数据和视图两者的完全分离，这样前、后端达到了真正意义上的分离，自然而然的在Web 开发领域中占据了独一无二的地位。

2 几种常见的Web前端开发框架

2.1 jQuery

jQuery 是JavaScript 的封装，其主要是用于封装常规功能以及处置浏览器的兼容性问题。“write less, do more”是其核心宗旨，力争用简洁代码形成多样化的功能。jQuery 属于轻量级的脚本，生产版本文件包单一，只有94.8KB。当下已对外发布了3 个系列的版本，1.12.4、3.5 系列版本应用范围较宽广。现存的很多网站对外提供了线上CDN 的jQuery 资源，只要能将特定语言添加至HTML 代码内便能顺利引用jQuery 语法。项目推进阶段合理应用jQuery，有助于减少JavaScript 的代码数量。

2.2 Angular JS

该框架主要是采用HTML III TypeScript 去建设客户端应用的平台，主要是为了解决既往“单页面运用”时暴露出的不足。当下，该框架己发布至第二个版本，MVC 框架是最经典的模式，对双向数据绑定过程起到了强大的支撑作用；其内的V 作为视图元素，是利用html实现自身功能的，样广大用户便能清晰的观察到页面内容；C 对应的是控制器Controller，基于JavaScript 实现，作为页面的逻辑部分；M 是数据Model，即页面上存有的数据模型[4]。用户浏览网页过程中，和页面进行交互，例如点击、移动、滚动鼠标等后，控制器获得相应信号去进行处理，处理结束后最明显的特征是数据模式被更新。

Angular JS 和Jquery 项目之间存在较大差异，没有将所有代码融合为一，更具简洁性。应用MVC 模式后，促进代码逻辑、UI 层两者的分离过程，代码的整洁性、清晰度均有很大提升，为信息整改及运维管理等过程创造了很多便利条件。升级后的AngularJS 版本能提供完整度更高的文档，并提供脚手架Angular CLI 用于搭建环境，能够形成库代码、运行多种连续开发任务，比如检测、包装与布置。模块化是本框架设计时遵循的主要思想，以此为基础构建出个性化的指令系统，要求工作人员严格依照框架设定的方式进行编码，需在工作团队的协助下进行，无形中增加了代码的可维护性。

2.3 BackBone JS

2010年是该框架的诞生之年，其融合了fUnderscore、Require JS、Handlebar，其中Underscore 持有的功能和jQuery 较为详细，能够提供基础性的功能函数库； Require JS 为构成JavaScript 的加载器，能够使前端代码对按需加载过程提供强大的支持作用；Handlebar 通过分离view、 data 区快捷的建设 出Web 模板[5]。Backbone JS 在繁杂的“单页面运用”中表现出极高的适应能力，其为当时的很多开发人员提供更轻量、友好性更强的前端开发处理办法。Backbone 框架下能够达到视图组件化，具体是对繁杂的View 视图进行切割处理，使其成为微，自行定义出组件模版，完全分离事件绑定与数据绑定。2014年前后，Backbone JS 框架在国内外备受欢迎Airbnb、Linkedin、百度贴吧等均用了该框架的局部功能。

2.4 React JS开发框架

该框架始源于 Facebook 的内部项目，主要被用在搭建用户界面的JavaScript 库领域中，将简洁、独立的代码片段组建成繁杂度很高的UI 界面。其性能优良、代码逻辑简易，能较好的应对既往跨浏览器过程出现的兼容性问题。

React Js 能够直接整合用户界面，借此方法协助开发人员获得多种交互式网页。并且将JSX 语法整合至该用户界面内，能明显提升复用式组件的简洁度，操作过程更为简易，且还能维持组件内部构造的高清晰性。以这些组件为基础，React Js 能够精确辨别代码和现实目标，在浏览器内DOM 渲染功能的协助下去研发网页，这是成功研发原生移动应用功能的重要基础。

2.5 Vue JS

这是一种建设 web 界面的JavaScript 框架，渐进式是该种框架的主要特征，和其他类型的前端框架相比较，Vue JS 按照从下至上的顺序实现增量级开发、应用，器给予视图层较高关注，较便捷的和第三方库或现有项目整合为一[6]。

Vue JS 框架能够提供极为独特的MVVM 数据捆绑与一个能够实现组合的组件系统。站在技术层面上分析，MVVM 模式上设定的视图模型层是 Vue JS 框架关注的焦点，并基于双向数据绑定的形式建设了视图与模型两者的连接关系，进而对页面的效果形成良好的驱动作用。何其他MVVM 框架做比较分析，VueJs 更具操作性，能够迅速应用异步批处理方法更新DOM，整合应用可复用的、解耦的组件，准许安装多种类型模块，情境应用过程也具有很高的灵活性。

3 测试开放能力

3.1 监测代码质量

前端代码质量是测评框架开发效率的主要指标之一。利用模块化思想设计开发框架，其对开发人员编写代码的方法表现出了强大的支撑作用，引用模板后能更标准、规范的编写代码，明显减少了既往拼接字符过程中的错差，也规避因开发人员编码格调不统一而增加框架运维成本的问题[7]。利用 JSHint 检测框架js 代码质量，借此方式利用检测规则、运行指令去探查到代码潜在的一些不足。通过检测js 代码质量，而后有针对性的整改检出问题，不仅能优化框架编码品质，还能引领编码风格标准程度提升过程。

3.2 框架的综合运用

开发Web 应用程序时框架的主要作用，运营告示、活动、问题、权限、消息、申请、现金、文件和计划管理等均是当下主流框架的基本功能。标准 UI 样式区规范页面样式。在以上开发实践中，采用框架内持有的功能，比如基于数据驱动模型形成的差异化渲染、预编译、数据化存储等功能。

3.3 分析易用性

主要是采用易学习性、易理解性与易操作性去测评前端易用性抵达的程度，需要综合分析框架的各个功能属性、模块学习的难易程度、框架使用者持有的能力。具备JavaScript 开发实践经验的人员是框架的主要使用群体，大部分开发人员对语法、方法能扎实掌握及娴熟运用。只要能对前端开发涉及到的数据模型与模块化机制有全面了解，便能顺利的了解框架源代码的内涵，随后掌握框架的正确应用方法[8]。框架还对外提供了官网教程与详尽的应用操作说明，这样即便是程序员新手也能通过学习教程去掌握框架的具体应用方法。

视图层、模型层和视图模型层是构成框架的三个主要层次。模块化思想明显提升了视图层代码编写过程的简洁度，帮助相关人员更快捷的掌握模块的操作使用方法。熟悉模板语法是模型层学习过程中的核心内容，框架外供极为丰富的指令集去提升模板的简洁度，便有开发人员灵活使用。

4 结束语

本文简要分析、概括了Web 框架的发展演进过程，阐述了五种Web 主流前端框架的发展、应用情况。若被开放的项目属于“多页面应用”的范畴，PC 断客户是主要的用户群，那么 jQuery 能较好的满足现实需求；如果热衷于Typescript 语法，则推荐使用Angular 2.x 。在互联网技术不断发展的时代背景下，相信将会成功研发出更多样、功能更为优异的Web 前端框架，进而为众多开发者提供更多品质优良、运行高效的工具。