<script type="text/tpl" id="list">
<ul>
[for data]
[if num > 0]
<li>[=nickname]-[=test]-[fn deal head]</li>
[else]
<li>[=nickname]-[=test]</li>
[/if]
[/for]
<ul>
</script>
<script type="text/javascript">
function myTpl(id,data) {
var str = document.getElementById(id).innerHTML;
var t={
'for':function(){
return '");'+'for(var i=0;i<data.length;i++){'+';p.push("';
},
'if':function(s){
s = s.replace('/ /g',' ').replace('/ /g',' ');
var sa = s.split(' ');
return '");'+'if(data[i]["'+sa[1]+'"]'+sa[2]+''+sa[3]+'){'+';p.push("';
},
'else':function(){
return '");}else{;p.push("';
},
'fn':function(s){
s = s.replace('/ /g',' ').replace('/ /g',' ');
var sa = s.split(' ');
if(sa[1]) {
return '"+'+sa[1]+'(data[i]["'+sa[2]+'"])+"';
} else {
return '';
}
}
};
var s = 'var p=[];p.push("'+str.replace(/[\r\n\t]/g,'').replace(/\[.*?\]/g,function(d){
var ms = d.match(/\[(.*?)\]/);
ms = ms[1];
var r='',m;
if(ms) {
var pre = d.substr(0,2);
if(pre=='[/') {
r = '");};p.push("';
} else if(pre=='[=') {
m = d.match(/=(.*?)\]/);
if(m[1]) {
r = '"+data[i]["'+m[1]+'"]+"';
} else {
r = d;
}
} else {
m = ms.split(' ');
if(m[0]) {
r = t[m[0]](ms);
} else {
r = d;
}
}
} else {
r = d;
}
return r;
})+'");return p.join("");';
var fn = new Function('data',s);
return fn(data);
}
function deal(d) {
return d;
}
console.log(myTpl('list',[{'nickname':'ddd','test':'sssddd','head':'ggggggggg','num':1},{'nickname':'ss','test':'eee','head':'ggggggggg','num':0}]));
</script>
鼓捣了几个小时的模板引擎,功能还比较简单,目前只支持for循环,函数执行,条件判断标签。自用。