CN104461484B - 前端模板的实现方法和装置 - Google Patents

Abstract

本发明涉及一种前端模板的实现方法和装置。该方法包括：获取预先定义的前端模板中所需替换的变量，所述变量包括预先定义的起始标识和结束标识之间的变量；将所述变量替换成数据源中指定的内容，并将所有替换后的内容合并；将内容合并后的前端模板进行渲染生成超文本标记语言文本；将所述超文本标记语言文本转化为DOM节点，将所述DOM节点***到网页中。上述前端模板的实现方法和装置，通过将前端模板中的变量替换为数据源指定的内容，然后渲染生成超文本标记语言文本，再转化为DOM节点，即可直接***网页中，不依赖第三方库，降低了开发成本，可迁移性较好，且支持基于渲染生成的HTML文本的DOM操作，提高了开发效率。

Description

前端模板的实现方法和装置

技术领域

本发明涉及网络应用技术，特别是涉及一种前端模板的实现方法和装置。

背景技术

早期的Web开发中，采用的是浏览器请求页面，后台直接返回HTML（Hyper TextMarkup Language，超文本标识语言）页面的方式。用户所看到的页面为后台返回的页面，也就是，后台承担着业务逻辑处理的同时，还需负责前台页面的具体呈现即生成HTML页面。

随着以gmail为代表的OPA（One Page Application）概念的兴起，Web前端开发的复杂度进一步增加，Web页面原来只需简单的视觉呈现，现在需要担负更多诸如用户交互处理等工作以及频繁的视图更新。原先的后台直接返回最终呈现需要的页面的方式，已经无法满足现有的开发需求。由后台负责业务逻辑处理，前端页面负责呈现以及用户交互处理，成为一种发展的趋势。

前台视图更新，通常采用的是字符串拼接的方式，简单灵活，但容易出错，后续维护的成本高。为此采用前端模板解决该后续维护成本高的问题。传统的前端模板主要有两种：嵌入式和logic less。然而发明人经过研究发现：嵌入式，只能生成模板字符串，不支持模版嵌套，操作繁琐，容易出错；logic less，以jQuery Tmpl为代表，需要自定义语法，语法学习成本高，且依赖第三方库，额外增加脚本库的成本。

发明内容

基于此，有必要针对现有的前端模板维护成本高、需要依赖第三方库而需额外增加成本的问题，提供一种成本低的前端模板的实现方法。

此外，还有必要提供一种成本低的前端模板的实现装置。

一种前端模板的实现方法，包括：

获取预先定义的前端模板中所需替换的变量，所述变量包括预先定义的起始标识和结束标识之间的变量；

将所述变量替换成数据源中指定的内容，并将替换后的内容合并；

将内容合并后的前端模板进行渲染生成超文本标记语言文本；

将所述超文本标记语言文本转化为DOM节点，将所述DOM节点***到网页中。

在其中一个实施例中，所述将所述超文本标记语言文本转化为DOM节点，将所述DOM节点***到网页中的步骤包括：

创建临时节点；

将所述临时节点的innerHTML属性设置为渲染生成的超文本标记语言文本；

将所述超文本标记语言文本转化为属于所述临时节点的子节点的DOM节点；

将所述DOM节点***到网页中。

在其中一个实施例中，所述获取预先定义的前端模板中所需替换的变量的步骤之前，还包括：

搜索所述前端模板中是否存在预先定义的模板嵌套标识且模板嵌套标识内存在模板标识，若是，则将所述模板标识替换成相应的模板内容；

所述变量包括所述相应的模板内容中的变量。

在其中一个实施例中，所述方法还包括：

以模板标识为索引，缓存渲染过程中生成的中间代码。

在其中一个实施例中，所述前端模块采用原生语句描述，所述原生语句包括逻辑判断和循环处理。

一种前端模板的实现装置，包括：

获取模块，用于获取预先定义的前端模板中所需替换的变量，所述变量包括预先定义的原生语句中起始标识和结束标识之间的变量；

替换合并模块，用于将所述变量替换成数据源中指定的内容，并将替换后的内容合并；

生成模块，用于将内容合并后的前端模板进行渲染生成超文本标记语言文本；

***模块，用于将所述超文本标记语言文本转化为DOM节点，将所述DOM 节点***到网页中。

在其中一个实施例中，所述***模块包括：

创建单元，用于创建临时节点；

设置单元，用于将所述临时节点的innerHTML属性设置为渲染生成的超文本标记语言文本；

转化单元，用于将所述超文本标记语言文本转化为属于所述临时节点的子节点的DOM节点；

***单元，用于将所述DOM节点***到网页中。

在其中一个实施例中，所述装置还包括：

搜索模块，用于搜索所述前端模板中是否存在预先定义的模板嵌套标识且模块嵌套标识内存在模板标识；

替换合并模块，还用于在前端模板中存在预先定义的模板嵌套标识且模板嵌套标识内存在模板标识时，将所述模板标识替换成相应的模板内容；

所述变量包括所述相应的模板内容中的变量。

在其中一个实施例中，所述装置还包括：

缓存模块，用于以模板标识为索引，缓存渲染过程中生成的中间代码。

在其中一个实施例中，所述前端模块采用原生语句描述，所述原生语句包括逻辑判断和循环处理。

上述前端模板的实现方法和装置，通过将前端模板中的变量替换为数据源指定的内容，然后渲染生成超文本标记语言文本，再转化为DOM节点，即可直接***网页中，不依赖第三方库，降低了开发成本，可迁移性较好，且支持基于渲染生成的HTML文本的DOM操作，提高了开发效率。此外，因支持原生语法，执行效率高，且灵活。

附图说明

图1为一个实施例中前端模板的实现方法的流程图；

图2为一个实施例中将该超文本标记语言文本转化为DOM节点，将该DOM 节点***到网页中的步骤的流程图；

图3为第一张需要生成的网页内容；

图4为第二张需要生成的网页内容；

图5为一个实施例中前端模板的实现装置的结构框图；

图6为图5中***模块的内部结构框图；

图7为一个实施例中前端模板的实现装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，为一个实施例中前端模板的实现方法的流程图。该前端模板的实现方法可应用于终端上的浏览器的页面更新。该终端可为智能手机、个人计算机、个人数字助理、平板电脑等。该前端模板的实现方法，包括：

步骤102，获取预先定义的前端模板中所需替换的变量，该变量包括预先定义的起始标识和结束标识之间的变量。

首先，需预先定义前端模板所能适用的数据源类型、原生语句类型、模板的起始标识、计数标识、嵌套标识等。该数据源类型为Primitive Object（原始对象）类型，例如｛“nick”：“陌生网友”｝。模板的起始标识和结束标识可根据需要设定，如<%、%>。嵌套标识也可根据需要设定，如<%tmpl%>。该前端模块采用原生语句描述，该原生语句包括逻辑判断和循环处理等。变量如 <%=nick%>中的“nick”。

步骤104，将该变量替换成数据源中指定的内容，并将所有替换后的内容合并。

具体的，数据源是指所需更新的内容的来源。如数据源中指定的内容为“casper”，将“nick”替换“casper”。

步骤106，将内容合并后的前端模板进行渲染生成超文本标记语言文本。

步骤108，将该超文本标记语言文本转化为DOM节点，将该DOM节点***到网页中。

具体的，将渲染生成的HTML（超文本标记语言）文本，转化成DOM （DocumentObject Model，文件对象模型）节点，然后通过appendTo函数***到网页中。DOM是以面向对象方式描述的文档模型，定义了表示和修改文档所需的对象、这些对象的行为和属性以及对象之间的关系。

上述前端模板的实现方法，通过将前端模板中的变量替换为数据源指定的内容，然后渲染生成超文本标记语言文本，再转化为DOM节点，即可直接***网页中，不依赖第三方库，降低了开发成本，可迁移性较好，且支持基于渲染生成的HTML文本的DOM操作，提高了开发效率。此外，因支持原生语法，执行效率高，且灵活。

如图2所示，为一个实施例中将该超文本标记语言文本转化为DOM节点，将该DOM节点***到网页中的步骤包括：

步骤202，创建临时节点。

具体的，如创建临时节点node。

步骤204，将该临时节点的innerHTML属性设置为渲染生成的超文本标记语言文本。

例如renderedHTML为前端模板进行渲染生成的HTML文本。将node的 innerHTML属性设置为渲染生成的renderedHTML。

步骤206，将该超文本标记语言文本转化为属于该临时节点的子节点的 DOM节点。

将renderedHTML转化成实际可操作的DOM节点，该DOM节点为node 的子节点。

步骤208，将该DOM节点***到网页中。

通过创建临时节点，并设置临时节点的属性为渲染生成的超文本标记语言文本，再生成DOM节点，操作简单，提高了开发效率。

在一个实施例中，该获取预先定义的前端模板中所需替换的变量的步骤之前，还包括：

搜索该前端模板中是否存在预先定义的嵌套标识且嵌套标识内存在模板标识，若是，则将该模板标识替换成指定的模板内容；该变量包括该指定的模板内容中的变量。

具体的，存在嵌套标识即表示采用了模板嵌套，在获取嵌套标识内的模板标识，该模板标识是开发者预先为每个模板分配的唯一身份标号。嵌套标识内的模板标识表示调用该模板标识对应的模板内容，故搜索到模板标识后，将其替换成相应的模板内容。即可预先建立了模板内容与模板标识之间存在映射关系，根据模板标识从映射关系中查找到对应的模板内容，进行替换。

上述模板嵌套，对于公用的部分采用一个公共模板，对于不同的部分采用各自模板，将各自模板嵌入公共模板中，将不需再重复制作公共模板，仅需对不同的内容制作，节省了制作成本，提高了开发效率。

在一个实施例中，该前端模板的实现方法，还包括步骤：以模板标识为索引，缓存渲染过程中生成的中间代码。

具体的，将模板标识对应的模板内容进行渲染生成中间代码后，并缓存，下次再使用该模板标识对应的模板内容时，不需再进行渲染，提高了渲染效率，节省了时间。

上述前端模板的实现方法具体应用生成网页的示例如下，模板的起始标识和结束标识分别为<%和%>：

对上述被<%、%>包围的内容进行处理。通过模板id（标识）“my_tmpl”获取到上述模板内容，然后获取数据源（data）对该模板进行渲染得到HTML 文本，将该渲染得到的HTML文本，转化成DOM节点，再将DOM节点通过“appendTo”函数***网页中。具体代码为：

通过上述代码生成最终的结果如下：

图3为第一张需要生成的网页内容，图4为第二张需要生成的网页内容。图3和图4均包括头像和昵称，不同的在于操作按钮。图3中的操作按钮是“加好友”，图4的操作按钮是“看动态”、“会话”。图3单独生成前端模板为：

图4单独生成前端模板为：

采用上述前端模板支持模板嵌套，可将公用的部分即头像和昵称部分制作成一个公共模板，将操作按钮“加好友”制作为子模板一，操作按钮“看动态”、“会话”制作为子模板二，在公共模板加入模板嵌套标识<%tmpl%>，并在模板嵌套标识中设置模板标识，如需要生成图3的网页内容，则设置模板标识为子模板一，将该模板标识替换成相应的模板内容即可，然后再将公用模板和子模板一中的变量替换为数据源的内容，进行渲染生成HTML文本，再将HTML文本转化为DOM节点，***网页中。

如图5所示，为一个实施例中前端模板的实现装置的结构框图。该前端模板的实现装置，包括获取模块520、替换合并模块540、生成模块560和***模块580。

其中，获取模块520用于获取预先定义的前端模板中所需替换的变量，该变量包括预先定义的原生语句中起始标识和结束标识之间的变量。

首先，需预先定义前端模板所能适用的数据源类型、原生语句类型、模板的起始标识、计数标识、嵌套标识等。该数据源类型为Primitive Object类型，例如｛“nick”：“陌生网友”｝。模板的起始标识和结束标识可根据需要设定，如 <%、%>。嵌套标识也可根据需要设定，如<%tmpl%>。该原生语句可能包括逻辑判断和循环处理。变量如<%=nick%>中的nick。

替换合并模块540用于将该变量替换成数据源中指定的内容，并将所有替换后的内容合并。

具体的，数据源是指所需更新的内容的来源。如数据源中指定的内容为“casper”，将“nick”替换“casper”。

生成模块560用于将内容合并后的前端模板进行渲染生成超文本标记语言文本。

***模块580用于将该超文本标记语言文本转化为DOM节点，将该DOM 节点***到网页中。

具体的，将渲染生成的HTML文本，转化成DOM节点，然后通过appendTo 函数***到网页中。

上述前端模板的实现装置，通过将前端模板中的变量替换为数据源指定的内容，然后渲染生成超文本标记语言文本，再转化为DOM节点，即可直接***网页中，不依赖第三方库，降低了开发成本，可迁移性较好，且支持基于渲染生成的HTML文本的DOM操作，提高了开发效率。此外，因支持原生语法，执行效率高，且灵活。

如图6所示，该***模块580包括创建单元582、设置单元584、转化单元 586和***单元588。其中：

创建单元582用于创建临时节点。具体的，如创建临时节点node。

设置单元584用于将该临时节点的innerHTML属性设置为渲染生成的超文本标记语言文本。例如renderedHTML为前端模板进行渲染生成的HTML文本。将node的innerHTML属性设置为渲染生成的renderedHTML。

转化单元586用于将该超文本标记语言文本转化为属于该临时节点的子节点的DOM节点。将renderedHTML转化成实际可操作的DOM节点，该DOM 节点为node的子节点。

***单元588用于将该DOM节点***到网页中。

通过创建临时节点，并设置临时节点的属性为渲染生成的超文本标记语言文本，再生成DOM节点，操作简单，提高了开发效率。

如图7所示，为一个实施例中前端模板的实现装置的结构框图。该前端模板的实现装置，包括获取模块520、替换合并模块540、生成模块560和***模块580，还包括搜索模块590和缓存模块592。

搜索模块590用于搜索该前端模板中是否存在预先定义的嵌套标识标记。

替换合并模块540还用于在前端模板中存在预先定义的嵌套标识标记时，将该嵌套标识标记替换成指定的模板内容。该变量包括该指定的模板内容中的变量。

缓存模块592用于以嵌套标识标记为索引，缓存渲染过程中生成的中间代码。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory， ROM）或随机存储记忆体（Random AccessMemory，RAM）等。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (8)

1.一种前端模板的实现方法，包括：

搜索前端模板中是否存在预先定义的模板嵌套标识且模板嵌套标识内存在模板标识，若是，则将所述模板标识替换成指定的模板内容；所述模板嵌套，对于公用的部分采用一个公共模板，对于不同的部分采用各自模板，将各自模板嵌入公共模板中；

获取预先定义的前端模板中所需替换的变量，所述变量包括预先定义的起始标识和结束标识之间的变量以及包括所述相应的模板内容中的变量；

将所述变量替换成数据源中指定的内容，并将替换后的内容合并；

将内容合并后的前端模板进行渲染生成超文本标记语言文本；

将所述超文本标记语言文本转化为DOM节点，将所述DOM节点***到网页中。

2.根据权利要求1所述的方法，其特征在于，所述将所述超文本标记语言文本转化为DOM节点，将所述DOM节点***到网页中的步骤包括：

创建临时节点；

将所述临时节点的innerHTML属性设置为渲染生成的超文本标记语言文本；

将所述超文本标记语言文本转化为属于所述临时节点的子节点的DOM节点；

将所述DOM节点***到网页中。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

以模板标识为索引，缓存渲染过程中生成的中间代码。

4.根据权利要求1所述的方法，其特征在于，所述前端模块采用原生语句描述，所述原生语句包括逻辑判断和循环处理。

5.一种前端模板的实现装置，其特征在于，包括：

搜索模块，用于搜索前端模板中是否存在预先定义的模板嵌套标识且模板嵌套标识内存在模板标识，若是，则将所述模板标识替换成指定的模板内容；所述模板嵌套，对于公用的部分采用一个公共模板，对于不同的部分采用各自模板，将各自模板嵌入公共模板中；

获取模块，用于获取预先定义的前端模板中所需替换的变量，所述变量包括预先定义的起始标识和结束标识之间的变量以及包括所述相应的模板内容中的变量；

替换合并模块，用于将所述变量替换成数据源中指定的内容，并将替换后的内容合并；

生成模块，用于将内容合并后的前端模板进行渲染生成超文本标记语言文本；

***模块，用于将所述超文本标记语言文本转化为DOM节点，将所述DOM节点***到网页中。

6.根据权利要求5所述的装置，其特征在于，所述***模块包括：

创建单元，用于创建临时节点；

设置单元，用于将所述临时节点的innerHTML属性设置为渲染生成的超文本标记语言文本；

转化单元，用于将所述超文本标记语言文本转化为属于所述临时节点的子节点的DOM节点；

***单元，用于将所述DOM节点***到网页中。

7.根据权利要求5所述的装置，其特征在于，所述装置还包括：

缓存模块，用于以模板标识为索引，缓存渲染过程中生成的中间代码。

8.根据权利要求5所述的装置，其特征在于，所述前端模块采用采用原生语句描述，所述原生语句包括逻辑判断和循环处理。