[总结] js 模板引擎

嗯,这也是一个学习笔记,材料均来自网络,有改动。。
文章主要分为三部分,第一部分通过实现一个简易的ERB模板引擎来介绍其原理,参考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代码:

    text11.     text2    text3    text4

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

var temp = '';for(var i in items){    temp += "" + items[i].text + "";}temp += '';

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

  1. 简化了html的书写

  2. 通过编程元素(比如循环和条件分支),对数据的展现更具有控制的能力

  3. 分离了数据与展现,使得展现的逻辑和效果更易维护

模板引擎

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

模板文本转化

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

        '>

非模板写法:

var temp = '';for(var i in items){    temp += "" + items[i].text + "";}temp += '';

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

  1. 遇到普通的文本直接当成字符串拼接

  2. 遇到interpolate(即),将其中的内容当成变量拼接在字符串中

  3. 遇到evaluate(即),直接当成代码

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

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

最后执行这个函数,传入数据参数即可:

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 = //g;var evaluate_reg = //g;

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

var matcher = /|/g

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

var matcher = /|/g//text: 传入的模板文本字串//data: 数据对象var template = function(text,data){ ... }

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

var matcher = /|/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:

            ">

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

temp += '    ' + ... ;

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

temp += '\n \t\t\n' + ...;

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

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

var matcher = /||$/g;

相对完整的代码

var matcher = /||$/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);}

调用代码可以是这样:

            ">...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));

遗留的问题

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

  1. 因为或者%>都是模板的边界字符,如果模板需要输出或者%>,那么需要设计转义的办法

  2. 如果数据对象中包含有null,显然不希望最后输出null,所以需要在function_body的代码中考虑null的情况

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

  4. 可以设计将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)和文本(对应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() 方法

标注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文件:

  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 模板引擎系列文章(一)
2.JavaScript模板引擎原理,几行代码的事儿
3.高性能JavaScript模板引擎原理解析
4.javascript模板引擎和实现原理
5.js模板引擎——art Template
6.[译] 只有 20 行的 JavaScript 模板引擎
7.javascript模板引擎和实现原理
8.推荐五款流行的JavaScript模板引擎

关键字:JavaScript

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部