[发明专利]前端模板的实现方法和装置

说明书

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

技术领域

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

背景技术

早期的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节点插入到网页中。

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

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

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

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