高效javascript模板引擎——doT.js原理及应用

2013年08月09日发布阅读(2528) 作者：Jerman

什么是Javascript模板引擎？

随着WEB的发展，以及MVC模式的广泛应用。Javascript模板引擎逐渐被重视，它是数据与模板分离的关键环节。这么关键的一个环节，自然就引发的性能的择优。市面上现在有很多javascript模板引擎

目前完成的一个基于MVC模式的管理系统，综合考虑后，选择了doT.js，这篇文章主要也是介绍下它的优势及使用方法。

为什么选择doT.js，？

1、不依赖任何框架和库(如jQuery)，纯原生的写法

2、doT.js文件小，文件大小只有4K,压缩后可达到2K。相比juicer(12k)和artTemplate(8k)小很多

3、doT语法默认使用{{ }} 作为语法分隔符，但它可以自定义。（我的项目中就把它改成<% %>形式了)

因此我们可以轻松扩展一下，就可以让它支持子模板（模板里面嵌套模板）,如下

主模板用<% %>分隔，子模板用 {{ }}分隔

//扩展,如果要在模板里嵌入子模板,请用{{ }}替换<% %>,在使用子模板前，应用templateChild替换{{ }}成<% %>
 doT.templateChild = function(template){
    return template.replace(/{{/gi, "<%").replace(/}}/gi, "%>");
};

4、渲染数据过程中，如出错，有错误提示。很容易使用firebug找出错误所在处

5、在模板里面使用doT.js，完全可以用javascript原生语法来写，这让模板编写变得很容易，也不会让前端开发工程师又得学新的语法。

因此我们可以直接在模板里使用javascript的for循环、for in循环、if else、等语名来输出我们的数据、或者使用var 定义变量，或用function定义函数就随你所欲啦

doT.js语法分隔符的自定义如何修改：

修改前，默认为{{ }}

templateSettings: {
            evaluate: /\{\{([\s\S]+?\}?)\}\}/g,
            interpolate: /\{\{=([\s\S]+?)\}\}/g,
            encode: /\{\{!([\s\S]+?)\}\}/g,
            use: /\{\{#([\s\S]+?)\}\}/g,
            useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
            define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
            defineParams: /^\s*([\w$]+):([\s\S]+)/,
            conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
            iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
            varname: 'it',
            strip: true,
            append: true,
            selfcontained: false
        }

修改后，为<% %> 即把修改前的{{变成\<\%，}}变成\%>就可以了。

templateSettings: {
            evaluate: /\<\%([\s\S]+?\}?)\%\>/g,
            interpolate: /\<\%=([\s\S]+?)\%\>/g,
            encode: /\<\%!([\s\S]+?)\%\>/g,
            use: /\<\%#([\s\S]+?)\%\>/g,
            useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
            define: /\<\%##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\%\>/g,
            defineParams: /^\s*([\w$]+):([\s\S]+)/,
            conditional: /\<\%\?(\?)?\s*([\s\S]*?)\s*\%\>/g,
            iterate: /\<\%~\s*(?:\%\>|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\%\>)/g,
            varname: 'it',
            strip: true,
            append: true,
            selfcontained: false
        }

看到上面的代码，我们来分析一下各个参数的意义：

evaluate: 即<% %>，分隔符的定义

interpolate：即<%= %>，直接输出某个数据

encode: 即<%! %> ，英文解释：for interpolation with encoding

use: 即 <%# %> ，编译时输出。英文解解释： for compile-time evaluation/includes and partials

userParams: 编译时使用参数

define: 即 <%## %>，编译时定义

defineParams:编译时定义参数

conditional：即 <%?it.name %> <%??it.location%> <??><?>条件语句开始符

iterate：即<%~ %>，对数据的循环

varname：这里为“it”，这个特别要注意，这是我们传到模板中的数据的名称，如果传{“name”:”jerman”},那么调用name值就用it.name

doT.js如何与数据结合，生成带数据的html代码呢？

调用方法：

 //template是模板文件（即string)
        var doTtmpl = doT.template(template);
        //data数据文件，一般为json格式
        //html就是数据与模板生成好的html代码了，你可以使用jQuery.html()方法或原生innerHTML写入到任何div容器中了
        var html = doTtmpl(data);
        //简单调用
        var html = doT.template(template)(data)

使用doT.js制作模板的一些语法:

假设有数据 {“name”:”jerman”，”location”:”shenzhen”,”work”:”Front-end development engineer”,”number”:[1,2,3,4,5,6]}，

分隔符自定义为：<% %>

varname值就为默认“it”

分隔符的使用

<% if(it.name){ %>
//分隔符里面我们可以使用原生的Javascript语法

我的名字叫<%=it.name%>

<%}%>

输出name值

<%= it.name%> 或使用 <%=it.companyname || it.name%>
//可以使用”||”判断数据是否存在,也可以使用条件语句: “? : “

条件语句

<%? it.name %>

Oh, I love your name, <%=it.name%>!

<%?? it.age === 0%>

Guess nobody named you yet!

<%??%> You are <%=it.age%> and still don’t have a name? <%?%>

循环输出数组

<%~data.system.Mains:value:index %>

<%=index%>:<%=value%>

<%~%>

对“片断”的支持

定义片断使用： <%##def.片断名称: #%>

输出片断使用： <%##def.片断名称%>

//定义一个片断joke

<%##def.joke:
谁是<%=it.jermanName || "jerman"%>？
#%>
//定义一个片断snippet，并把片断joke插入进去
<%##def.snippet:
<div>Hi,<%=it.jakeName || "jake"%>,<%#def.joke%></div>
#%> //输出片断sippet <%#def.snippet%>

doT英文参考资料：

http://olado.github.io/doT/

doT.js文件下载

https://github.com/olado/doT

目前版本为:1.0.0

Javascript

高效javascript模板引擎——doT.js原理及应用

什么是Javascript模板引擎 ？

为什么选择doT.js，？

什么是Javascript模板引擎？