极简js模版引擎,30行代码,支持自定义分隔符、js语法、变量直接输出等功能。 基于大牛的引擎修改:http://ejohn.org/blog/javascript-micro-templating/
另有一款纯原创极简js填充引擎:format
源码:
(function($) {
var tmplCache={}, fnCache={}, guid=0, toString = Object.prototype.toString, compile = function( tmpl, sp ){
//默认分隔符
var f = sp || "%",
//动态创建函数,并增加数据源引用(data/my)
fn = new Function("var p=[],my=this,data=my,print=function(){p.push.apply(p,arguments);};p.push('" +
// Convert the template into pure JavaScript
tmpl
.replace(/[\r\t\n]/g, " ")
.split("<" + f).join("\t")
.replace(new RegExp("((^|" + f + ">)[^\\t]*)'", "g"), "$1\r")
.replace(new RegExp("\\t=(.*?)" + f + ">", "g"), "',$1,'")
.split("\t").join("');")
.split(f + ">").join("p.push('")
.split("\r").join("\\'") + "');return p.join('');");
return fn;
};
//对外接口
$.template = function(tmpl, data, sp) {
sp = sp||"%";
var fn = toString.call(tmpl) === "[object Function]" ? tmpl
: !/\W/.test(tmpl) ? fnCache[tmpl+sp] = fnCache[tmpl+sp] || compile(document.getElementById(tmpl).innerHTML, sp)
: (function(){
for(var id in tmplCache)if(tmplCache[id] === tmpl) return fnCache[id];
return (tmplCache[++guid] = tmpl, fnCache[guid] = compile(tmpl, sp));
})();
return data ? fn.call(data) : fn;
};
})(window.jQuery || window.Zepto || window);
基本示例:
var templ = "this is a easy <%=this.name%>.";
var ret = $.template(templ, {name:"demo"});
//ret: "this is a easy demo."
自定义分隔符:
var templ = "this is a easy <#=this.name#> too.";
var ret = $.template(templ, {name:"demo"}, "#");
//ret: "this is a easy demo too."
数据源变量别称:
var templ = "this is a <%=my.type%> <%=data.name%> too.";
var ret = $.template(templ, {name:"demo", type:"easy"});
//ret: "this is a easy demo too."
自定义函数:
var templ = "<%=my.name%>有<%=my.getNum(my.name)%>个编辑器。";
var getNum = function(name){
return {"我":"俩","他":"三"}[name];
};
var ret = $.template(templ, {name:"我", getNum:getNum});
//ret: "我有两个编辑器。"
ret = $.template(templ, {name:"他", getNum:getNum});
//ret: "他有三个编辑器。"
js语句调用:
var templ = "<%for(var i=0;i<data.length;i++){%><%=i+1%>、<%=data[i]%><%}%>";
var ret = $.template(templ, ["精简","易用"]);
//ret: "1、精简2、易用"
页面模版读取:
<script type="text/html" id="item_tmpl">
<%for(var x in data.list){%><li><%=x%>:<%=data.list[x]%></li><%}%>
</script>
//js代码:
ret = $.template("item_tmpl", {list:{"name":"zjcn5205","country":"china"}});
//ret: "<li>name:zjcn5205</li><li>country:china</li>" //已经忽略前后空格
模版预编译
var templ = "this is a easy <%=this.name%>.", data = {name : "demo"};
//注:预编译暂时不支持自定义分割符号
var fn = $.template( templ );
//编译后返回一个js函数,该函数可以重新交给模版引擎使用,也可以独立调用
var ret = $.template(fn, data);
//等价于 var ret = fn.call( data );
//ret: "this is a easy demo."
关于性能
该模板在现代浏览器中比不上doT、artTemplate等知名模板,但在IE中表现突出,综合性价比最好。如果你是有类似 jsp等编程经验的话,本模板的语法你将会非常熟悉,学习成本比较低。另外,请记得,模板源码只有三十行。
了解性能请移步速度测试用例: 高频测试 和 低频测试。 测试用例中,为了名字不跟其他模板冲突,本模板名字显示为 mcTemplate.