<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循环,函数执行,条件判断标签。自用。