js模板简单版模板引擎

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