它真的取决于您所说的“ 模板库” 的含义。 如果您想要字符串内插, 不需要 < code> eval code > 或 < code> new 函数 code>, 当你开始需要嵌入的循环结构时, 事情会变得更加复杂 。
几个月前,我写了一本String.prototype.tmpl.js 脚本 ,我在这里和那里用过几次我不介意超越 String.prototype
的地方用过。作为一个静态函数,你可以使用:
tmpl.js:
function tmpl(tmpl, o) {
return tmpl.replace(/<%=(?:"([^"]*)"|(.*?))%>/g, function (item, qparam, param) {
return o[qparam] || o[param];
});
}
An example template:
<div id="bar"></div>
<script type="text/x-tmpl" id="foo">
<h1><%=title%></h1>
<p><%=body%></p>
</script>
<script>
(function () {
var foo,
bar;
foo = document.getElementById( foo );
bar = document.getElementById( bar );
bar.innerHTML = tmpl(foo.innerHTML, {
title: foo bar baz ,
body: lorem ipsum dolor sit amet
});
}());
</script>
基础 tmpl
脚本当然可以修改,以便利用文档碎片来实际构建 DOM 元素,但我不清楚它是否算作“ 模板库 ” 。