返回首页
当前位置: 主页 > 编程语言 > Javascript教程 >

自己尝试写的一个javascript模板引擎

时间:2016-05-13 12:38来源:电脑教程学习网 www.etwiki.cn 编辑:admin

现在javascript模板引擎非常多了,让人眼花缭乱,不过很多复杂的引擎很多功能并不需要,并且个人想要在模板中加些js,当然这说来不符合模板应当尽可能跟逻辑分离,但我需要的并没有那么复杂的逻辑,所以还是用嵌入式的吧,于是尝试研究学习了一下,写出这个小东东。

模板
<script type="text/html" id="tmpl">
<h1>{{header}}</h1>
<# for(var i in list){ #>
<li{{ list[i].class ? ' class='+list[i].class : '' }}>{{list[i].title}}</li>
<# } #>
</script>

数据,渲染
var data = {
"header" : "这是头部",
"list" : [
{"title" : "red", "class" : ""},
{"title" : "green", "class" : ""},
{"title" : "blue", "class" : "strong"}
]
};
var tmpl = Template.compile('tmpl', data);

javascript模板引擎代码
var Template = {
filter : function(array) {
var temp = [];
for (var i = 0, l = array.length; i < l; i++) {
!(/#>/.test(array[i]) || array[i] === undefined) && temp.push(array[i]);
}
return temp;
},
parse : function(id) {
var temp, body = [];
var tpl = document.getElementById(id).text;
tpl = tpl
.replace(/[\r\t\n]/g, '')
.replace(/\"/g, '\\\"')
.replace(/\{\{/g, '\"+(')
.replace(/\}\}/g, '||"")+\"');
temp = tpl.split(/(?=<#)|(#>)/);
temp = this.filter(temp);
for (var i = 0, l = temp.length; i < l; i++) {
if (new RegExp('^<#').test(temp[i])) {
body.push(temp[i].replace(/^<#\s*(.*)/g,'$1\n').replace(/\\n/g,''));
} else {
body.push('\ttemp.push(\"' + temp[i].replace(/\n|\t/g,'') + '\");\n');
}
}
return body.join('');
},
compile : function(id, data) {
var script = 'var temp=[];\n with(data){\n' + this.parse(id) + '\n}\n var compiled=temp.join("");';
eval(script);
return compiled;
}
};


------分隔线----------------------------
标签(Tag):javascript模板
------分隔线----------------------------
推荐内容
猜你感兴趣