基于数据驱动的动态Web模板技术设计与实现

第４０卷第１期　２０１７年２月　武汉科技大学学报　

Ｊｏｕｒｎａｌ　ｏｆ　Ｗｕｈａｎ　Ｕｎｉｖｅｒｓｉｔｙ　ｏｆ　Ｓｃｉｅｎｃｅ　ａｎｄ　Ｔｅｃｈｎｏｌｏｇｙ　Ｖｏ１．４０。Ｎｏ．１　

Ｆｅｂ．２０１７　

基于数据驱动的动态Ｗｅｂ模板技术设计与实现　刘放，陈和平　（１．武汉科技大学计算机科学与技术学院，湖北武汉，４３００６５；　２．武汉科技大学智能信息处理与实时工业系统湖北省重点实验室，湖北武汉，４３００６５）　

摘要：随着互联网产品规模的不断扩大，前端脚本代码规模大、重用性低、维护困难、扩展性差等问题不断涌　现。为此，本文分析了目前主流的ｗｅｂ模板技术及各自的优缺点，并结合国内测览器的兼容性，在Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ技术思想的基础上，提出一种基于数据驱动的动态Ｗｅｂ模板技术方案（ＤＷＴＴ），它能有效提高前端　开发效率和代码复用性，降低程序扩展和维护的复杂度。　关键词：模板；Ｗｅｂ应用；前端开发；数据驱动；抽象语法树　中图分类号：ＴＰ３１　文献标志码：Ａ　文章编号：１６７４—３６４４（２Ｏ１７）Ｏ１—００７０—０６　

随着互联网技术与应用的不断发展，以操作　Ｄ０Ｍ（ｄｏｃｕｍｅｎｔ　ｏｂｊｅｃｔ　ｍｏｄｅ１）元素为核心的传　统前端开发方式应对日益复杂的业务需求已显得　越来越力不从心。进入以人为本的Ｗｅｂ　２．０时　代后，网页不再以简单的文字和图片展示为主，丰　富多样的交互形式提升了Ｗｅｂ应用的用户体验，　Ｗｅｂ前端技术在互联网产品开发过程中的使用　越来越广泛。　本文围绕数据驱动关键点，结合当前主流前　端模板技术中的实现思路，分析各自的优缺点，提　出基于数据驱动的动态Ｗｅｂ模板技术（ｄｙｎａｍｉｃ　ｗｅｂ　ｔｅｍｐｌａｔｅ　ｔｅｃｈｎｏｌｏｇｙ，ＤＷＴＴ）的设计思路和　实现方法，以便于开发者分离业务逻辑、显示逻辑　和用户界面，使程序代码结构更清晰，更容易被阅　读、测试、维护、替换、扩展和改进。　１模板技术相关研究　早期的浏览器所渲染的ＨＴＭＬ代码由后端　开发人员将数据传人后端模板后拼接而成。随着　Ａｊａｘ技术的日渐流行，异步数据传输方式的用户　体验更佳，Ｊｓｏｎ格式存储量小且简洁易读等优势　也日益凸显Ｌ１］。前端开发人员普遍采用字符串拼　接的方式，将Ａｊａｘ获取的数据手动输出到ＨＴ—　ＭＬ。这种开发方式效率低下，代码逻辑与视图　过于耦合，难以阅读和维护。随着各种浏览器对　Ｗ３Ｃ标准下的新特性支持度越来越高，ＨＴＭＬ５　和ＣＳＳ３等新技术不断普及　］，前端模板引擎也　出现了百花齐放的局面。采用前端模板后，使得　开发流程中前、后端分离更加彻底｜３］。　下面对３种具有代表性的前端模板技术，即　Ｓｔｒｉｎｇ—ｂａｓｅｄ模板技术、ＤＯＭ－ｂａｓｅｄ模板技术和　Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ技术，进行比较与分析。　１．１　Ｓｔｒｉｎｇ－ｂａｓｅｄ模板技术　这是一种基于字符串的模板技术，以字符串　和数据为输入，通过用正则表达式将占位符替换　为所需数据的方式，构建出完整的ＨＴＭＬ字符　串。由于基于字符串的模板方法依赖于ｉｎ—　ｎｅｒＨＴＭＬ的渲染，所以会带来以下问题。　（１）安全问题：使用ｉｎｎｅｒＨＴＭＬ构建ＤＯＭ　具有安全隐患　］，用于渲染的动态数据可能存在　安全漏洞，如果没有经过特定的转义处理，就有可　能造成ＸＳＳ攻击或者ＣＳＲＦ攻击　］。　（２）性能问题：使用ｉｎｎｅｒＨＴＭＬ替换ＤＯＭ　效率较低，即使仅替换ＤＯＭ的一个属性或文本　内容，也必须通过ｉｎｎｅｒＨＴＭＬ替换整个ＤＯＭ，　从而导致浏览器的重排和重绘。　（３）开发效率问题：由于是通过正则表达式匹　配后在特定函数中拼接字符串，所以容易造成重　复计算，而且完全移除现有的ＤＯＭ，再重新渲染　

一遍，挂载在ＤＯＭ上的事件和状态都将不复存　

收稿日期：２０１６　１１—２８　基金项目：国家自然科学基金资助项目（６１１００１３３）．　作者简介：刘放（１９９２一），男，武汉科技大学硕士生．Ｅ—ｍａｉｌ：ｂｒｉｚｅｒ＠１６３．ｃｏｒｎ　通讯作者：陈和平（１９５６），男，武汉科技大学教授，博士．Ｅ—ｍａｉｌ：ｃｈｐ＠Ｗｔ￣ｓｔ．ｅｄｕ．ｃｎ　２０１７年第１期　刘　放，等：基于数据驱动的动态Ｗｅｂ模板技术设计与实现　７１　在，从而降低了开发效率。　１．２　ＤＯＭ—ｂａｓｅｄ模板技术　这是一种基于ＤＯＭ节点的模板技术，通过　ｉｎｎｅｒＨＴＭＬ获取初始ＤＯＭ结构，再通过ＤＯＭ　ＡＰＩ层级从原始ＤＯＭ属性中提取事件、指令、表　达式和过滤器等信息，编译成Ｌｉｖｉｎｇ　ＤＯＭ，从而　完成数据Ｍｏｄｅｌ和Ｖｉｅｗ的双向绑定。近年来，　Ｇｏｏｇｌｅ公司推出的ＡｎｇｕｌａｒＪＳＬ６　就是ＤＯＭ－　ｂａｓｅｄ模板技术的代表。ＤＯＭ—ｂａｓｅｄ模板技术比　Ｓｔｒｉｎｇ－ｂａｓｅｄ模板技术更加灵活，功能也更加强　大，达到了一定意义上的数据驱动，但其也存在以　下问题。　（１）信息冗余：由于ＤＯＭ—ｂａｓｅｄ模板技术通　过ｉｎｎｅｒＨＴＭＬ获取ＤＯＭ编译节点，信息承载　于属性中，造成了不必要的冗余，同时也会影响阅　读，提升开发难度。一种解决办法就是通过读取　属性后再进行删除处理，如此会影响性能，降低用　户体验。　（２）初始节点获取问题：通过ｉｎｎｅｒＨＴＭＬ获　取初始节点，没有独立的语法解析器或词法解析　器，与ＨＴＭＬ是强依赖关系。初次进入ＤＯＭ的　内容是模板，渲染需要时间，所以会造成内容闪　动。　１．３　Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ技术　这是一种基于动态模板思想的模板技术。　Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ技术与Ｓｔｒｉｎｇ—ｂａｓｅｄ、ＤＯＭ～ｂａｓｅｄ　模板技术的最大区别是不依赖于ｉｎｎｅｒＨＴＭＬ来　渲染和提取所需信息。其主要思想是：首先，结合　数据绑定技术，使用成熟的词法解析和语法解析　技术，将输入的字符串解析成抽象语法树　ＡＳＴｌ＿７］，而不是仅仅通过简单的正则表达式匹配　特定语法，再进行字符串拼接；其次，通过对ＡＳＴ　进行编译，创建具有数据动态绑定功能的Ｌｉｖｉｎｇ　ＤＯＭ，从而避免使用ｉｎｎｅｒＨＴＭＬ，解决了浏览器　的元素闪动问题，提高了应用的安全性，其原理如　图１所示。　图１　Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ原理图　Ｆｉｇ．１　Ｓｃｈｅｍａｔｉｃ　ｄｉａｇｒａｍ　ｏｆ　Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ　从图１可知，输入的字符串通过词法解析器　Ｌｅｘｅｒ，生成对应的词法块。词法块通过语法解析　器Ｐａｒｓｅｒ，构建抽象语法树ＡＳＴ。然后将ＡＳＴ　编译成具有动态数据绑定功能的Ｌｉｖｉｎｇ　ＤＯＭ，　从而实现Ｖｉｅｗ和Ｍｏｄｅｌ的双向绑定。　２　ＤＷＴＴ设计与实现　由于Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ同时拥有Ｓｔｒｉｎｇ—ｂａｓｅｄ　和ＤＯＭ—ｂａｓｅｄ模板技术的优点，并可以巧妙地　规避ｉｎｎｅｒＨＴＭＬ，以较小的开销来实现局部更　新，故本文基于Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ技术的思想，具　体设计并实现了一种基于数据驱动的动态Ｗｅｂ　模板技术ＤｗＴＴ。　２．１总体设计　ＤｗＴＴ总体设计如图２所示。顶层组件是　ＤｗＴＴ的人口模块，统一管理各模块的依赖和引　入，为动态模板技术和数据绑定技术提供相应接　口。动态模板技术由词法解析器Ｌｅｘｅｒ、语法解　析器Ｐａｒｓｅｒ、编译器ｗａｌｋｅｒ和过滤器Ｆｉｌｔｅｒ构　成。Ｌｅｘｅｒ的作用在于对字符串模板进行词法分　析，通过特定的正则表达式标识每个词块的类型，　生成词块对象［８］。Ｐａｒｓｅｒ的作用在于对Ｌｅｘｅｒ输　出的词法对象数组进行语法分析，然后根据　ＤｗＴＴ的模板语法，将各零散的词块拼接为有具　体含义的语法对象，并根据父子级联关系输出为　抽象语法树ＡＳＴ。Ｗａｌｋｅｒ的作用在于将Ｐａｒｓｅｒ　构建出的ＡＳＴ根据不同的节点类型，通过不同的　编译函数，生成对应的Ｌｉｖｉｎｇ　ＤＯＭ，并挂载到页　面中，完成组件ＵＩ的呈现。Ｆｉｌｔｅｒ可以在数据传　人前根据一定的规则过滤掉一些信息，或者设置　一些参数，再进行业务逻辑处理。数据绑定技术　由脏检测Ｗａｔｃｈ模块和指令Ｄｉｒｅｃｔｉｖｅ构成。　Ｗａｔｃｈ是实现数据驱动的核心，该模块实现脏检　测的监听和更新操作，通过ｗａｔｃｈ（）方法来实现　数据监听和回调函数的绑定，通过ｕｐｄａｔｅ（）方法　遍历观察者列表触发更新操作。Ｄｉｒｅｃｔｉｖｅ是对　某个节点的特定功能增强，一般以属性的方式在　节点上声明［９］。本文提出的内置指令有ｒ—ｃｌａｓｓ、　ｒ—ｓｔｙｌｅ、ｒ—ｈｉｄｅ、ｏｎ－ｘｘｘ、ｒｅｆ等，开发者也可以根据　项目需求扩展更多功能强大的指令，从而提高组　

图２　ＤＷＴＴ的总体设计　Ｆｉｇ．２　Ｏｖｅｒａｌｌ　ｄｅｓｉｇｎ　ｏｆ　ＤＷＴＴ　７２　武汉科技大学学报　２０１７年第１期　件的功能性。　２．２详细设计　ＤｗＴＴ的核心在于动态模板技术和数据绑　定技术，对此给出以下详细设计方案。　２．２．１　动态模板的设计　本文基于Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ思想，通过模板的　纬度给出ＤｗＴＴ的设计方案，如图３所示。　字符串模板　Ｉ　词法解析器　图３动态模板设计　Ｆｉｇ．３　Ｄｅｓｉｇｎ　ｏｆ　Ｌｉｖｉｎｇ　ｔｅｍｐｌａｔｅ　字符串先经过Ｌｅｘｅｒ词法解析器，根据解析　模式的词法，通过特定的正则表达式匹配出特定　的词块，输出由词块对象组成的数组。Ｌｅｘｅｒ词　法解析器拥有３种解析模式，最终都是将变量、注　释、开标签“＜”、闭合标签“＞”、模板语法“｛｝”、属　性等词块进行标识，解析为词法对象数组，具体结　构如下：　［　｛　”ｔｙｐｅ”：”ＴＡＧ—ＯＰＥＮ”，　”ｖａｌｕｅ”：”ｉｎｐｕｔ”，　”ｐｏｓ”：０　｝，　｛　”ｔｙｐｅ”：”ＯＰＥＮ”，　”ｖａｌｕｅ”：”ｉｆ．．，　”ｐｏｓ”：７　｝　］　其中，每个词法对象有３个ｋｅｙ，其含义如下：　（１）ｔｙｐｅ：用于标识词法，如ＳＴＲＩＮＧ、ＮＵＭ—　ＢＥＲ等；　（２）ｖａｌｕｅ：表示具体值；　（３）ｐｏｓ：表示该词在字符串中的位置索引。　Ｐａｒｓｅｒ语法解析器分析输入的词法对象数组　中每个词法对象的词法类型，生成对应的语法类　型节点对象　，再进行层层递归，将各语法节点　挂载至对应的父语法节点下，构成结构与字符串　模板一致的抽象语法树ＡＳＴ。通过ｔｙｐｅ表示节　点的词法类型，通过ｔａｇ指定节点的标签命名，将　节点的属性解析至ａｔｔｒｓ数组中，结构大致如下：　［　｛　’’ｔｙｐｅ”：”ｅｌｅｍｅｎｔ”，　”ｔａｇ”：”ｉｎｐｕｔ”，　”ａｔｔｒｓ”：［｛＇ｔｔｙｐｅ”：”ｉｆ”，）］　

｝　］　抽象语法树ＡＳＴ构建完成后，进入ｗａ１ｋｅｒ　编译器，建立数据监听，生成Ｌｉｖｉｎｇ　ＤＯＭ，并将　其最终挂载在页面中。　２．２．２数据绑定模块的设计　数据绑定模块设计如图４所示。　ｗＨｔｅｈ对象