基于HTML5技术的WEB前端框架的设计及应用

陈 上

（海南软件职业技术学院，海南 琼海571400）

电商类业务的需求量较大，内容繁杂，所以在WEB开发时通常需要由不同专业所长的人来进行。想要获得高效率的电商平台系统，就要将电商业务中多次使用的模块组成通用组建，并结合电商类业务的特点把电商业务必备功能进行业务封装。在电子商务类业务开发初期阶段，通过组件引用、组合可以实现一些模块的功能，而不需要从零开始，因此开发效率大大提升。另外，在以往的前端开发过程中，HTML层的代码与数据代码两者混合起来，这无形中使代码的可读性变差。另外，在WEB开发过程中，如果需要进行个性化页面交互，那么就会影响到整个系统的逻辑性。但是，在框架模式架构下，页面逻辑和业务逻辑可以实现功能算法分离，并减少不同层间的偶合性，提高了层次间的独立性。

1 HTML5介绍

HTML5与HTML相比有一些新功能，其语义化标签更为便捷，如视频。另外，HTML5同时提升了编码的可读性，并减少了完成这些功能所需的复杂编码。随着信息化技术的发展，HTML5凭借其良好的前端优势和客户体验逐渐被接受，应用范围也越来越广，有WEB网络平台基石的称号。HTML5还有跨平台的特点，能够提升不同平台的兼容性。所以，HTML5同样可以应用于游戏和移动应用的开发和设计中。在传统操作平台开发的实施中，受版本和系统限制，平台的兼容性很差。因此，开发质量难以保障，开发效率很低。公司必须承担维护不同版本的费用。HTML5以form为基础添加了表单验证功能，输入元素类型更加丰富，表单的开发效率被大幅提高。此外，HTML5的使用也可以降低网站多媒体元素的引入难度，使用者可以摆脱FLASH和Silverlight，借助浏览器对动画和图形进行展示。HTML5删除了一些能通过CSS进行处理的标签；对SEO更友好，能够更好地执行网站内容的抓取和索引。HTML5同时还具有更好的易用性和用户体验性，因此HTML5常被用于前段开发中。

2 前端框架总体设计

前端框架设计同样需要以MVC分层和模块化为基础，采用面向前端开发的轻量型DVL框架，将前端分为数据模型层，视图层与逻辑层。按照电子商务业务需求，最终DVL框图如图1所示：

图1 DVL框架图

从图中可以看出，该体系结构包括列表、表单、用户权限、状态管理、商品、订单等内容。结合DVL体系结构的分层思想上述内容大体可以分为三层，即视图层、逻辑层和数据模型层，具体如表1所示。

表1 DVL框架结构

这三个层次是独立的，各层分工明确，层间的耦合度低，可以满足不同人员的需求。电商业务开发人员可以对逻辑层进行开发；网页设计人员可以对视图层进行开发。所以，在DVL框架下，团队成员间的团队合作能力较强，可以根据规则优化层次间交互操作，从而有效提升系统框架的整体效率和可维护性。对层间相同的功能进行提取实现层级间相似或相同功能的抽象。图2显示了DVL架构下的静态数据结构。

图2 DVL框架下的静态数据结构

根据订单列表视图、商品视图、购物车列表视图、用户列表视图等的共同特征，以列表的形式将数据显示在页面上，同时将列表抽象为列表视图类。以相同的方式对其他的视图进行抽象。抽象出来的视图有其共同点，能够以页面的形式进行显示，并抽象为视图基类。以相同的方式能够得到以业务逻辑为基础的逻辑基类和以数据模型为基础的数据模型基类。这三个基类以聚合的模式可以生成总体框架。

3 View Graph层设计

视图层的设计主要是页面渲染。在页面显示时，某些网页由于客户请求数据的变化而发生变化。不过，某些网页则属于静态状态，不因用户请求数据的变化而变化。在静态页面上通过抽取和动态页面形成模板，借助模板渲染技术创建HTML网页。

模板渲染技术是用传递的值替换占位符，并在模板引擎的辅助下，实现HTML片段与字符串数组的转化和同等表达。模板渲染过程中，视图实体行被模板引擎渲染到整个页面，页面模板、服务器则将反馈信息传递给模板引擎，实现HTML片段的动态编译，并实现数据层业务逻辑与视图层展示效果的独立运行。

模板在进行渲染时，传入相关参数，并根据模板引擎实现特定模板文档渲染操作。模板引擎先执行模板间的代码，把执行结果替换到相应位置。在第一次建立DOM连接点时，需要建立模板语法中的特殊标签与特殊符号之间的匹配关系，以判断填充数据，这个过程是通过正则表达式进行的。然后再通过数据填充及函数解释，从而借助DOM连接点组织实现对原模板的内容表达，达到动态内容转化的目的。

视图层的视图对象都需要有相应的DOM连接对象。为了便于控制界面操作，提升页面渲染速率，视图操作要在限定的DOM对象类别内进行。一般来说，render方式是完成视图渲染的有效手段。模板内的变量在采用render调用时会同时传输参数。视图基类包括视图元素的ID名称，元素标签名，类名，特征值和父元素。视图基类包含的方法有初始化视图，隐藏，显示和属性设置。

4 Logic层设计

逻辑层提供了业务逻辑的连接接口，并且还是视图层和数据模型层的连接桥梁。其功能在于调度模型层的数据信息、控制视图层的页面显示。不仅如此，及时响应视图层内用户的操作行为也是逻辑层的重要职责。逻辑层的基类包括关联，关联消除，触发事件等。同时，前端路由器管理也在逻辑层执行。前端路由器与传统路由器之间的最大区别在于，它在HTML5提供的history API进行而不依赖于服务器。

本文设计了基于TMS320DM368的嵌入式声源定位系统,系统包括主处理器模块、语音采集模块、存储模块、电源模块,系统结构如图4所示。

5 Data Model层设计

通过将业务逻辑层、数据模型层、视图层数据封装为模型对象，实现数据处理方式封装。数据模型主要进行数据信息的存储，不过不是以视图为基础，所以促进了数据层之间的解耦。数据经过验证接口并传递至自控层，并进一步对数据的长度、类型等进行验证。若验证无法通过，则返回错误。数据模型层的基类包括值集合、元素值、属性值、视图基类和服务器交互的基本数据方法，例如数据统计，添加数据信息，数据信息更改，数据信息清除，数据验证等。

数据交互是框架设计的关键组成部分。加载功能文档后，浏览器与服务器借助数据传输实现信息交互。现阶段常用的数据交互技术如Ajax提交。通过Ajax封装后，编码更加简单。

Ajax向服务器端发送http的过程并不是同步进行的，需要借助回调对返回数据进行再处理，并创立XML Http Request对象。为了提高浏览器加载速度，Ajax还开发了缓冲技术。

异步Ajax的主要参数设置：首个参数请求方法值是get或post。若是get则说明数据拼接在url上传输。第四个参数是回调函数；若请求方式是post，需要先将头部信息内容（content-type）进行参数设置，一般设置成application/x-www-fomi-urlencoded格式。然后进一步设定URL参数，完成请求携带的数据信息。

6 前端框架工作流程

DVL前端框架的工作流程如下：首先初始化，对工具、模块、文本等公共资源进行加载。其次启用路由器加载指定路径资源，通过正则表达方法解析模块内的符号和语法进行模块分析，判断并获取响应数据。接着由逻辑层向前端服务器发送请求，并获得相应数据生成模块渲染视图。随后WEB服务器将数据信息反馈到数据模型层，并由逻辑层进一步借助模板引擎完成渲染并生成初始视图。然后进入客户操作环节，当客户操作需要调整视图对象属性时，客户的操作请求则会通过网页发送到WEB服务器，并由逻辑层根据监听视图变化对数据层数据信息做出相应调整。这一过程的实现通常需要数据模型层向前端服务器发送请求并根据反馈数据实现对视图层的调整，完成网页更新。若响应失败，页面上则会显示出错误提示，并由客户选择下一步操作。

7 前端开发规范设计

7.1 文件分层结构和命名规范

文件分层结构的作用及价值在于，提升系统的可维护性、提升数据信息独立性和完整性。视图层，逻辑层和数据模型层的文档根据规定存储在models、page及logic文件中。本文在文件分层结构方面的创新在于，对文件命名模式进行了优化改良，提升了编码的可读性，更有利于开发利用。此外，类内声明，若文档为类的定义，其名称的第一个字母要大写；若文档为功能集合，按惯例其名称首字母应小写。另外，文件命名应尽量简化，尽量用单词表达，在复杂情况下可采用驼峰模式的多词表达。

组件文件目录主要是项目中常用公用之间，img存储项目内需要引用的图片。此外，models、logic等目录内同一组建命名相同，采用小写模式。page文件夹存储视图层问题，采用驼峰式命名；models文件夹存储数据模型层文件；logic文件夹存储罗基层文件；style文件夹存储样式文件。

7.2 注释规范

在进行单行注释时，要注意以//作为开头，同时还应单独占一行，不要遗忘空格，也要注意代码的一致性，尤其是“缩进”和下一行的注释说明之间。若遇到多行注释的情况，需要认清头尾标识符，一般以/*开头，以*/结束。注释中的行长度要限制在40个汉字或者80个英文字符内。函数声明通常在函数的顶部，具体内容包括函数的属性、参数、方法名等内容。

7.3 页面显示信息规则

新增数据通常放置在首页首行，以起到强调作用，同时注意数据保存。若数据保存失败，则对已经输入的数据进行保存，利于下次请求；如果需要进行数据修改，那么修改后的数据将替换原数据位置，同时对记录进行更新；若数据修改失败，则内容无法提交，仅对已经修改的内容进行保存，利于下次请求；如果需要进行记录删除操作，则应先对删除部分数据信息进行确认。删除操作完成后仍要返回到原有记录位置。若没有原有记录，则需要返回到上一页；另外，在查询操作时还需要对每一次的查询条件进行存储。倘若查询条件很多，那么还可以在页面增加清空按钮。假如未能搜索到需要查询的记录，系统还可以给出响应的提示。确定要求以后，系统还能够为用户提供一些模糊条件的查询。此外，页面设计时要注意同一级别图标大小的一致性。

8 结束语

随着WEB技术的发展，信息系统与企业生产管理的支撑作用更加明显，人们对信息技术、信息系统的要求也在日益提升，也促成了信息系统开发建设的源动力。为满足人们多元化、高性能信息技术、信息平台的使用需求，前端代码量日益增多，前端程序代码的冗余度与耦合性也日益提高，系统维护难度逐渐加大。HTML5技术的诞生可以更好地解决前端开发中遇到的问题，所以本文以HTML5为基础对前端框架进行设计，有效解决了前端程序代码冗余及系统维护问题，有效提升了代码耦合性，对信息系统的开发和建设具有积极的意义。