doT模板引擎源码分析

来源:互联网 发布:将svg转化成canvas js 编辑:程序博客网 时间:2024/06/06 02:40
首先分析doT的setting,这里,我确实感觉到了,新浪没有code的坏处了,所有源码分析均在这里

url : http://www.luoage.com/download/doT.js (https连接,出现安全提示直接忽略掉)

下面只是一些简单的介绍和部分用法

// [\s\S]+? 非贪婪匹配任何数据
var doT = {
version: '1.0.0',
templateSettings: {
evaluate:   /\{\{([\s\S]+?\}?)\}\}/g, // 执行程序,使用方法 {{ program}}
interpolate: /\{\{=([\s\S]+?)\}\}/g,   //显示内容,对内容不进行编码,使用方法 {{= variable}}
encode:     /\{\{!([\s\S]+?)\}\}/g,   //显示内容,并对内容进行html编码 for {{!'aa>b ,使用方法 {{! variable}}


-------------------------------------------------------------

下面四个一起介绍 主要原因是因为它使用resolveDefs 这个函数,如果不需要可是将其屏蔽,也可以减轻压力不是,设置键值 use , define => '' 即可屏蔽
1, 模式 {{# xxx }} , 当template的第三个参数增加后,可以使用def来获取该数据中的内容 比如 vara = {b:function(){return argument[0]+'____';}};template(,,a) 
使用 def.b('ssssssssss') 得到的就是ssssssssss______;类似方法可以使用,主要是引入外部内容使用def为内容的整体。
2,模式 use 模板中使用方法

3,模式 用于定义def,使用方法 {{## def.fn = function(){ return '___';};#}},其目的就是为了创造函数
4,模式 define 模板中使用方法

--------------------------------------------------------------

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, // 条件判断 if=> {{? }} else if=> {{ ?? }} endif =>{{ ? }}
iterate:    /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,// 对数组或者object进行遍历操作  {data:{'name':'luoage@msn.cn'} } 模板文件 {{~it.data:value:index}} 内部循环value='luoage@msn.cn' index='name' {{~}}
varname: 'it', // 全局变量名,可修改
strip: true, // 是否删除\n,\r,\t true=>删除,false=>不删除
append: true, // 官网says 'append' 用于性能设置,设置为false时 结果会好些。

-----------------------------------------------------------
如果selfcontained : true,解除与doT的依赖关系。 当doT加载,默认执行String.prototype.encodeHTML = encodeHTMLSource(),
也就是说String 中已经存在该函数,当selfcontained : true时候,又重新重新定义了一遍String.prototype.encodeHTML =encodeHTMLSource(),
这是没必要。默认情况下,加载doT是不需要设置 selfcontained:true。但是,如果你得到了这段 newFunction() 匿名函数,而前后文没有doT,那么
这个时候是需要设置成true的时机了,谁这么蛋疼.....!
-----------------------------------------------------------

selfcontained: false 
},
template: undefined, //返回匿名函数,主调用文件
compile:  undefined //返回匿名函数,主要为express设计
};



上面的正则就是该模板的所有使用模式

使用方法在doT.template(tmpl,c,def);
接收三个参数

@param tmpl 模板内容
@param c    配置,@c = c ||doT.templateSettings; 也就是说,c可以替代doT.templateSettings配置,建议使用时extend,避免遗漏键值
@param def  引入外部变量,使用时以def作为整体,如it

附一个简单的例子:

http://www.luoage.com/doT_test.html

end.

增加两个JS 模板引擎测试页面
http://juicer.name/speedtest/

http://jsperf.com/dom-vs-innerhtml-based-templating/711