[总结] js 模板引擎

Myth丶恋晨 2022-04-24 05:54 208阅读 0赞

嗯，这也是一个学习笔记，材料均来自网络，有改动。。  
文章主要分为三部分，第一部分通过实现一个简易的ERB模板引擎来介绍其原理，参考[javascript模板引擎和实现原理][javascript]，有改动，看了很多关于模板引擎的文章，就这一篇最通俗易懂，适合入门。第二部分介绍一个非常NB的模板引擎，参考[JavaScript template engine in just 20 lines][]，超级简洁，仅20行，适合进阶。第三部分介绍一种js模板引擎——art Template，之所以介绍他是因为。。。。你猜。

# 一.入门－简易的ERB模板引擎 #

## 模板简介 ##

模板通常是指嵌入了某种动态编程语言代码的文本，数据和模板通过某种形式的结合，可以变化出不同的结果。模板通常用来定义显示的形式，能够使得数据展现更为丰富，而且容易维护。例如，下面是一个模板的例子：

如果有如下`items`数据：

items:[
        { text: 'text1' ,status:'done' },
        { text: 'text2' ,status:'pending' },
        { text: 'text3' ,status:'pending' },
        { text: 'text4' ,status:'processing' }
    ]

通过某种方式的结合，可以产生下面的`Html`代码：

如果不使用模板，想要达到同样的效果，即将上面的数据展现成结果的样子，需要像下面这样将`html`标签拼接成字符串：

var temp = '<ul>';
    for(var i in items){
        temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
    }
    temp += '</ul>';

可以看出使用模板有如下好处：

*  简化了`html`的书写
 *  通过编程元素（比如循环和条件分支），对数据的展现更具有控制的能力
 *  分离了数据与展现，使得展现的逻辑和效果更易维护

## 模板引擎 ##

通过分析模板，将数据和模板结合在一起输出最后的结果的程序称为*模板引擎*，模板有很多种，相对应的模板引擎也有很多种。一种比较古老的模板称为`ERB`，在很多的web框架中被采用，比如：`ASP.NET` 、 `Rails` ... 上面的例子就是`ERB`的例子。在`ERB`中两个核心的概念：`evaluate`和`interpolate`。表面上`evaluate`是指包含在`<% %>`中的部分，`interpolate`是指包含在`<%= %>`中的部分。从模板引擎的角度，`evaluate`中的部分不会直接输出到结果中，一般用于过程控制；而`interpolate`中的部分将直接输出到结果中。  
从模板引擎的实现上看，需要依赖编程语言的动态编译或者动态解释的特性，以简化实现和提高性能。例如：`ASP.NET`利用`.NET`的动态编译，将模板编译成动态的类，并利用反射动态执行类中的代码。这种实现实际上是比较复杂的，因为`C#`是一门静态的编程语言，但是使用`javascript`可以利用`Function`，以极少的代码实现一个简易的模板引擎。

## 模板文本转化 ##

针对上面的例子，回顾一下使用模板和不使用模板的差别。  
模板写法：

非模板写法：

var temp = '<ul>';
    for(var i in items){
        temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
    }
    temp += '</ul>';

仔细观察，实际上这两种方法十分“相似”，能够找到某种意义上的一一对应。如果能够将模板的文本变成代码执行，那么就能实现模板转化。在转化过程中有两个原则：

>  *  遇到普通的文本直接当成字符串拼接
>  *  遇到`interpolate`(即`<%= %>`)，将其中的内容当成变量拼接在字符串中
>  *  遇到`evaluate`(即`<% %>`)，直接当成代码

将上面的例子按照上述原则进行变换，再添加一个总的函数：

var template = function(items){
        var temp = '';
        //开始变换
        temp += '<ul>';
        for(var i in items){
            temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
        }
        temp += '</ul>';
    }

最后执行这个函数，传入数据参数即可：

var result = template(items);

## javascript动态函数 ##

可见上面的转化逻辑其实十分简单，但是关键的问题是，模板是变化的，这意味着生成的程序代码也必须是在运行时生成并执行的。好在`javascript`有许多动态特性，其中一个强大的特性就是`Function`。  
我们通常使用`function`关键字在`js`中声明函数，很少用`Function`。在`js`中`function`是字面语法，`js`的运行时会将字面的`function`转化成`Function`对象，所以实际上`Function`提供了更为底层和灵活的机制。

用 `Function` 类直接创建函数的语法如下：

var function_name = new Function(arg1, arg2, ..., argN, function_body)

例如：

//创建动态函数    
    var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
    //执行    
    sayHi('Hello','World');

函数体和参数都能够通过字符串来创建！So cool！有了这个特性，可以将模板文本转化成函数体的字符串，这样就可以创建动态的函数来动态的调用了。

## 实现思路 ##

首先利用正则式来描述`interpolate`和`evaluate`，括号用来分组捕获：

var interpolate_reg = /<%=([\s\S]+?)%>/g;
    var evaluate_reg = /<%([\s\S]+?)%>/g;

为了对整个模板进行连续的匹配将这两个正则式合并在一起，但是注意，所有能够匹配`interpolate`的字符串都能匹配`evaluate`，所以`interpolate`需要有较高的优先级：

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g

设计一个函数用于转化模板，输入参数为模板文本字串和数据对象

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g
    //text: 传入的模板文本字串
    //data: 数据对象
    var template = function(text,data){ ... }

使用`replace`方法，进行正则的匹配和“替换”，实际上我们的目的不是要替换`interpolate`或`evaluate`，而是在匹配的过程中构建出“方法体"：

至此，`function_body`虽然是个字符串，但里面的内容实际上是一段函数代码，可以用这个变量来动态创建一个函数对象，并通过`data`参数调用：

var render = new Function('obj', function_body);
    return render(data);

这样`render`就是一个方法，可以调用，方法内部的代码由模板的内容构造，但是大致的框架应该是这样的：

function render(obj){
        var temp = '';
        temp += ...
        ...
        return temp;
    }

注意到，方法的形参是`obj`，所以模板内部引用的变量应该是`obj`：

看似到这里就OK了，但是有个必须解决的问题。模板文本中可能包含`\r` `\n` `\u2028` `\u2029`等字符，这些字符如果出现在代码中，会出错，比如下面的代码是错误的：

temp += '
            <ul>
        ' + ... ;

*注意：*javascript 中的字符串是不能跨行的！  
我们希望看到的应该是这样的代码：

temp += '\n \t\t<ul>\n' + ...;

这样需要把`\n`前面的`\`转义成`\\`即可，最终变成字面的`\\n`。

另外，还有一个问题是，上面的代码无法将最后一个`evaluate`或者`interpolate`后面的部分拼接进来，解决这个问题的办法也很简单，只需要在正则式中添加一个行尾的匹配即可：

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g;

## 相对完整的代码 ##

调用代码可以是这样：

## 遗留的问题 ##

还有几个细节的问题需要注意：

*  因为`<%`或者`%>`都是模板的边界字符，如果模板需要输出`<%`或者`%>`，那么需要设计转义的办法
 *  如果数据对象中包含有`null`，显然不希望最后输出`null`,所以需要在`function_body`的代码中考虑`null`的情况
 *  在模板中每次使用obj的形参引用数据，可能不太方便，可以在`function_body`添加`with(obj||{}){...}`，这样模板中可以直接使用`obj`的属性
 *  可以设计将`render`返回出去，而不是返回转化的结果，这样外部可以缓存生成的函数，以提高性能

# 二.进阶－超简洁js模板引擎 #

## js模板引擎 ##

## 解释 ##

### 标注1 ###

re = /<%([^%>]+)?%>/g

该正则表达式用于获取模板中的标识字段`<%...%>`,然后用传入引擎中的数据去填充它们.

reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g

该正则的作用是，如果一段JS代码以`if, for, else, switch, case, break, |`开头，那它们将会直接添加到函数体中。如果不是，则会被push到code变量中。

如果你看不懂上述正则表达式，请参考这里[ js正则表达式语法 ][js_]

### 标注2 ###

var add = function(line, js) {
            js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
                (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
            return add;
        }

js模板由三部分组成

> 1.普通文本字符串，比如标签元素`ul`等  
> 2.js流程控制语句，比如`if, for, else`等等，对应ERB模板中的`interpolate`  
> 3.变量，需要用输入的数据替换的部分，对应ERB模板中的`evaluate`

*注意*：有的将模板分为两部分，js代码（对应2）和文本（对应1、3）

注释2中add函数的作用是生成渲染函数的函数体字符串（Function函数体字符串），该函数最终返回HTML文档字符串。模板中的所有部分都需要拼接组成函数体字符串，但根据是否需要拼接到HTML文档字符串中，需要对不同部分执行不同的操作。js代码作为流程控制语句，不需要拼接到HTML文档字符串中（函数返回的字符串中不会包括该部分），直接作为代码执行，而对于文本需要拼接成HTML文档字符串，具体分析如下：

**注释：**拼接HTML文档字符串有两种方式，一种是利用`+`运算符，另一种是将需要拼接到HTML文档字符串的部分`push`到数组中，然后利用'join'函数合并。

> 1.对于普通文本字符串，需要作为字符串拼接到HTML字符串中，此时，js取`false`，将执行

(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');

*注意*：`push`到数组中的内容需要被`""`包围的，因此如果普通文本中包含有`"`，需要转译为`\\"`

> 2.对于流程控制语句和变量，他们都是被标识符号`<%%>`包围的部分，对应的js去`true`，将执行

(code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n')

> > 1）对于js流程控制语句，`line.match(reExp)`为`true`,不需要拼接到HTML文档字符串中，因此不需要`push`到数组中，而直接拼接到函数体字符串中。  
> > 2)对于变量，需要拼接到HTML文档字符串中，但是不能被`""`包围，否则会作为字符串输出，而不会作为变量。

**另外**：注意add函数最后又返回了自身，类似于js中的链式操作。

### 标注3 ###

while(match = re.exec(html)) {
            add(html.slice(cursor, match.index))(match[1], true);
            cursor = match.index + match[0].length;
        }

这里需要了解`exec`函数,不懂得请移步这里[JavaScript exec() 方法][JavaScript exec_]

### 标注4 ###

return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);

利用`apply`设置`Function`函数作用域，在函数内部，`this`指向`options`,可以利用this.attr访问options.attr。

# 三.art Template #

## 简介 ##

javascript模板引擎是数据与界面分离工作中最重要一环。虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。

## art Template高效的秘密 ##

### 预编译 ###

在一般的模板引擎实现原理中，因为要对模板变量进行赋值，所以每次渲染都需要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的，这种方式称之为“预编译”。

### 更快的字符串拼接方式 ###

很多人误以为数组 `push` 方法拼接字符串会比 `+=` 快，要知道这仅仅是 `IE6-8` 的浏览器下。实测表明现代浏览器使用 `+=` 会比数组 `push` 方法快，而在 `v8` 引擎中，使用 `+=` 方式比数组拼接快 `4.7` 倍。所以 `artTemplate` 根据 `javascript` 引擎特性采用了两种不同的字符串拼接方式。

## 使用方法 ##

1.  引用js文件：<script src="js/arttmpl.js"></script>
2.  页面中，使用一个type="text/template"的script标签存放模板：

模板逻辑语法开始与结束的界定符号为`<%` 与`%>`，若`<%`后面紧跟`=`号则输出变量内容。同ERB模板

3.渲染模板

template.render(id, data);

继续上面的例子：

var fragment = template('doctor-template', {
                    "data":[
                        {
                            name:"王静",
                            score:4.5,
                            photo:'images/logo.png',
                            hospital:"江苏省中医院",
                            desc:'妇科、不孕不育症、月经病等',
                            position:'副医师'
                        },
                        {
                            name:"啦啦",
                            score:4.9,
                            photo:'images/logo.png',
                            hospital:"鼓楼医院",
                            desc:'儿童呼吸系统疾病的诊治，对于儿童疾病',
                            position:'主治医师'
                        }
                    ]
                });

# 四.参考 #

1.[javascript 模板引擎系列文章（一）][javascript 1]  
2.[JavaScript模板引擎原理，几行代码的事儿][JavaScript]  
3.[高性能JavaScript模板引擎原理解析][JavaScript 1]  
4.[javascript模板引擎和实现原理 ][javascript]  
5.[js模板引擎——art Template ][js_art Template]  
6.[\[译\] 只有 20 行的 JavaScript 模板引擎][_ 20 _ JavaScript]  
7.[javascript模板引擎和实现原理][javascript 2]  
8.[推荐五款流行的JavaScript模板引擎][JavaScript 2]

[javascript]: http://www.pchou.info/javascript/2014/03/13/javascript-template-engine.html
[JavaScript template engine in just 20 lines]: http://krasimirtsonev.com/blog/article/Javascript-template-engine-in-just-20-line
[js_]: http://blog.csdn.net/zaifendou/article/details/5746988
[JavaScript exec_]: http://www.w3school.com.cn/jsref/jsref_exec_regexp.asp
[javascript 1]: https://segmentfault.com/a/1190000005158364
[JavaScript]: http://www.cnblogs.com/hustskyking/p/principle-of-javascript-template.html
[JavaScript 1]: http://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/
[js_art Template]: https://segmentfault.com/a/1190000004974354
[_ 20 _ JavaScript]: https://segmentfault.com/a/1190000005705169
[javascript 2]: https://segmentfault.com/a/1190000000432600
[JavaScript 2]: http://www.csdn.net/article/2013-09-16/2816951-top-five-javascript-templating-engines