我的Js模版引擎(二)
上次自己尝试着做了下js的模版,发现那种方法解析模版确实太复杂了,这次换了下思路,总体来说,js模版要实现的就是让模版里边的js代码能够运行起来
当然了,还有不少bug,比如支持的分隔标签有限,像{{,{%貌似还不行,ie下也有bug,以后慢慢修复!
以下是模版引擎的核心代码:
/** * @author hust_小C * email:hustcoolboy@gmail.com */ (function(w){ w.Template=Template||{}; function Template(options){ return this instanceof arguments.callee?this.init(options):new arguments.callee(options); } Template.prototype={ init:function(options){ this.tpl=options.tpl;//待解析的模版 this.target=options.target||options.tpl;//解析后渲染的模板dom this.tplcontent=options.tpl.text||options.tpl.value; this.left=options.left||"<%";//左分隔符 this.right=options.rigth||"%>";//右分隔符 this.body=[]; this.compiled="";//编译生成的函数 this.data=options.data; }, parse:function(){ var self=this; this.tplcontent.split(new RegExp('(?='+this.left+')|('+this.right+')')).filter(function(k,v){ return !(new RegExp(self.right)).test(v); }).each( function(k,v){ if((new RegExp('^'+self.left)).test(v)){ if(new RegExp('^'+self.left+'\s*=').test(v)){ self.body.push(v.replace(new RegExp('^'+self.left+'\s*=(.*)'),'\ttemp.push($1);\n').replace(/\\n/g,'')); }else{ self.body.push(v.replace(new RegExp('^'+self.left+'\s*(.*)'),'$1\n').replace(/\\n/g,'')); } }// else {self.body.push('\ttemp.push(\"'+v.replace(/\n|\t/g,'')+'\");\n');} }) return this.body.join(""); }, compile:function(){ if(!this.compiled){ this.compiled=new Function("json",'var temp=[];\nwith(json){\n'+this.parse()+'}\n return temp.join("");'); } return this.compiled; }, render:function(){ this.target.innerHTML=this.compile()(this.data); } } })(this); Array.prototype.filter=function(fn){ var temp=[]; for(var i=0,l=this.length;i<l;i++){ this[i]&&fn.call(this,i,this[i])&&temp.push(this[i]); } return temp; } Array.prototype.each=function(fn){ var temp=[]; for(var i=0,l=this.length;i<l;i++){ fn.call(this,i,this[i]); } return this; }