[总结] js 模板引擎

时间  2019-12-07
标签 总结 模板 引擎 栏目 JavaScript 繁體版
原文   原文链接

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

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

模板简介

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

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

若是有以下items数据：前端

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

经过某种方式的结合，能够产生下面的Html代码：java

<ul>
    <li class='done'>text1<li>
    <li class='pending'>text2<li>
    <li class='pending'>text3<li>
    <li class='processing'>text4<li>
</ul>

若是不使用模板，想要达到一样的效果，即将上面的数据展示成结果的样子，须要像下面这样将html标签拼接成字符串：web

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

能够看出使用模板有以下好处：正则表达式

  • 简化了html的书写编程

  • 经过编程元素（好比循环和条件分支），对数据的展示更具备控制的能力segmentfault

  • 分离了数据与展示，使得展示的逻辑和效果更易维护后端

模板引擎

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

模板文本转化

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

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

非模板写法：

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，而是在匹配的过程当中构建出“方法体"：

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g
//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){
    var index = 0;//记录当前扫描到哪里了
    var function_body = "var temp = '';";
    function_body += "temp += '";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一个匹配后，将前面部分做为普通字符串拼接的表达式
        function_body += text.slice(index,offset);

        //若是是<% ... %>直接做为代码片断，evaluate就是捕获的分组
        if(evaluate){
            function_body += "';" + evaluate + "temp += '";
        }
        //若是是<%= ... %>拼接字符串，interpolate就是捕获的分组
        if(interpolate){
            function_body += "' + " + interpolate + " + '";
        }
        //递增index，跳过evaluate或者interpolate
        index = offset + match.length;
        //这里的return没有什么意义，由于关键不是替换text，而是构建function_body
        return match;
    });
    //最后的代码应该是返回temp
    function_body += "';return temp;";
}

至此，function_body虽然是个字符串，但里面的内容其实是一段函数代码，能够用这个变量来动态建立一个函数对象，并经过data参数调用：

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

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

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

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

<script id='template' type='javascript/template'>
    <ul>
        <% for(var i in obj){ %>
            <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
        <% } %>
    </ul>
</script>

看似到这里就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;

相对完整的代码

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

//模板文本中的特殊字符转义处理
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
var escapes = {
    "'":      "'",
    '\\':     '\\',
    '\r':     'r',
    '\n':     'n',
    '\t':     't',
    '\u2028': 'u2028',
    '\u2029': 'u2029'
  };

//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){
    var index = 0;//记录当前扫描到哪里了
    var function_body = "var temp = '';";
    function_body += "temp += '";
    text.replace(matcher,function(match,interpolate,evaluate,offset){
        //找到第一个匹配后，将前面部分做为普通字符串拼接的表达式
        //添加了处理转义字符
        function_body += text.slice(index,offset)
            .replace(escaper, function(match) { return '\\' + escapes[match]; });

        //若是是<% ... %>直接做为代码片断，evaluate就是捕获的分组
        if(evaluate){
            function_body += "';" + evaluate + "temp += '";
        }
        //若是是<%= ... %>拼接字符串，interpolate就是捕获的分组
        if(interpolate){
            function_body += "' + " + interpolate + " + '";
        }
        //递增index，跳过evaluate或者interpolate
        index = offset + match.length;
        //这里的return没有什么意义，由于关键不是替换text，而是构建function_body
        return match;
    });
    //最后的代码应该是返回temp
    function_body += "';return temp;";
    var render = new Function('obj', function_body);
    return render(data);
}

调用代码能够是这样：

<script id='template' type='javascript/template'>
    <ul>
        <% for(var i in obj){ %>
            <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
        <% } %>
    </ul>
</script>

...

var text = document.getElementById('template').innerHTML;
var items = [
    { text: 'text1' ,status:'done' },
    { text: 'text2' ,status:'pending' },
    { text: 'text3' ,status:'pending' },
    { text: 'text4' ,status:'processing' }
];
console.log(template(text,items));

遗留的问题

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

  • 由于<%或者%>都是模板的边界字符，若是模板须要输出<%或者%>，那么须要设计转义的办法

  • 若是数据对象中包含有null，显然不但愿最后输出null,因此须要在function_body的代码中考虑null的状况

  • 在模板中每次使用obj的形参引用数据，可能不太方便，能够在function_body添加with(obj||{}){...}，这样模板中能够直接使用obj的属性

  • 能够设计将render返回出去，而不是返回转化的结果，这样外部能够缓存生成的函数，以提升性能

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

js模板引擎

var TemplateEngine = function(html, options) {
    var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\n', cursor = 0, match;//1
    var add = function(line, js) {//2
        js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
        return add;
    }
    while(match = re.exec(html)) {//3
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(html.substr(cursor, html.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);//4
}

解释

标注1

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

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

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

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

若是你看不懂上述正则表达式，请参考这里 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）和文本（对应一、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() 方法

标注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标签存放模板：

<script id='doctor-template' type="text/template">
        <% for(var i in data){ var item=data[i]; %>
            <li class="mui-table-view-cell mui-media ">
                <a href="javascript:;" class="mui-navigate-right">
                    <div class="mui-media-object mui-pull-left">
                        <img src="<%=(item.photo)%>" width="100%">
                        <span class="mui-badge mui-badge-danger"><%=(item.score)%>分</span>    
                    </div>
                    <div class="mui-media-body">
                        <%=(item.name)%>&nbsp;<span class="mui-badge mui-badge-warning"><%=(item.position)%></span>
                        <p class="mui-ellipsis"><%=(item.hospital)%></p>
                        <p class="mui-ellipsis"><%=(item.desc)%></p>
                    </div>
                </a>
            </li>
        <% } %>
    </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 模板引擎系列文章（一）
2.JavaScript模板引擎原理，几行代码的事儿
3.高性能JavaScript模板引擎原理解析
4.javascript模板引擎和实现原理
5.js模板引擎——art Template
6.[译] 只有 20 行的 JavaScript 模板引擎
7.javascript模板引擎和实现原理
8.推荐五款流行的JavaScript模板引擎

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程