我的Js模版引擎（四）

上次的js模版引擎在ie6,7下总是发生错误，今天用ie8的调试工具终于找到了错误的根源所在，原来是自己多写了一个逗号，真囧！

这次的模版引擎基本没啥大问题了，全面兼容ie6,7,8 ff,opera各大主流浏览器，并且修复了特殊标签}}}的bug,ok，直接上demo吧。

<div>hust_小C的模版引擎 <h2>对象遍历</h2> {{ for(var i in data.a){ }} <li>{{=i}}:{{=data.a[i]}}</li> {{ } }} <h2>If else 解析</h2> {{if(data.b==100){}} b的值为:{{=data.b}} {{}else{ }} b的值不满足if条件 {{ } }} <h2>表格解析</h2> <table style="background:red;color:#fff; text-align:center;" _mce_style="background: red; color: #fff; text-align: center;"> <tr><th width="200;">歌曲名</th><th width="200;">歌手</th><th width="200">进入试听</th></tr> {{ for(var i=0,l=data.song.length;i<l;i++){ }} <tr><td>{{=data.song[i].songname}}</td><td>{{=data.song[i].singer}}</td><td><a href="{{=data.song[i].url}}" _mce_href="{{=data.song[i].url}}">{{=data.song[i].url}}</a></td></tr> {{ } }} </table> <h2>图像解析</h2> {{ for(var i=0,l=data.url.length;i<l;i++){ }} <img src="{{=data.url[i]}}" _mce_src="{{=data.url[i]}}"> {{ } }} </div>

 

模版引擎核心代码

/**
 * @author hust_小C
 * email:hustcoolboy@gmail.com
 */
(function(w){
          var dom = {
                    quote: function (str) {
                        str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
                            var special = metaObject[chr];
                            return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)
                        });
						return str.replace(/"/g, '\\"') ;
                     
                    }
                },
                metaObject = {
                    '\b': '\\b',
                    '\t': '\\t',
                    '\n': '\\n',
                    '\f': '\\f',
                    '\r': '\\r',
                    '\\': '\\\\'
                };
//上边的dom来自司徒正美http://www.cnblogs.com/rubylouvre/


 w.Template=Template||{};
	function Template(options){
	    return this instanceof arguments.callee?this.init(options):new arguments.callee(options);
	}
	Template.parse=function(self){
	       var temp;
		   if(self.right=="}}"){//这里主要是为了解决{{{造成的bug!
		      temp=self.tplcontent.replace(/(}})([^}])/g,function(){
			     return arguments[1]+"   "+arguments[2];
			  }).split(new RegExp('(?='+self.left+')|('+self.right+')(?:[^}])'))
		   }else{
		      temp=self.tplcontent.split(new RegExp('(?='+self.left+')|('+self.right+')'))
		   }
			temp.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 self.body.join("");
		};
	Template.prototype={
		init:function(options){
			this.tpl=options.tpl;//待解析的模版
			this.target=options.target||options.tpl;//解析后渲染的模板dom
		    this.tplcontent=dom.quote(options.tpl.text||options.tpl.value);
		    this.left=options.left||"{{";//左分隔符
			this.right=options.right||"}}";//右分隔符
			this.namespace=options.namespace||"data";//编译生成的函数，里边所用变量的环境,即模版中所用变量的执行环境
			this.body=[];
			this.compiled="";//编译生成的函数
			this.data=options.data;
		},
		compile:function(){
			if(!this.compiled){
				this.compiled=new Function(this.namespace,'var temp=[];\n'+Template.parse(this)+'\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;
}



  
document.getElementById('render').onclick=function(){
 Template({tpl:document.getElementById('tpl'),target:document.getElementById('ok'),data:{a:{
  name:"coolboy",
  age:21,
  test:"good!"
},
b:100,
url:["http://image9.9158.com/39/37/1402184341/971BA9080689FCF08A61948AC224115C.jpg","http://image9.9158.com/43/36/928573648/C6703ED2CCF75829B050D9F0ED8BB274.jpg","http://image9.9158.com/35/43/1792415536/5CB6C5F949CB9DF3E3A30BA871970002.jpg"],
song:[{songname:"千百度 ",singer:"许嵩",url:"http://zhangmenshiting.baidu.com/data/music/4752698/%E5%8D%83%E7%99%BE%E5%BA%A6.mp3?xcode=f08fdfd64a17ddb73c350b4e1ff22833"},{songname:"想象之中",singer:"许嵩",url:"http://zhangmenshiting.baidu.com/data/music/4753398/%E6%83%B3%E8%B1%A1%E4%B9%8B%E4%B8%AD.mp3?xcode=9354de7edd267ba005efbff149ebffea"},
{songname:"半城烟沙",singer:"许嵩",url:"http://zhangmenshiting.baidu.com/data/music/264925/%E5%8D%8A%E5%9F%8E%E7%83%9F%E6%B2%99.mp3?xcode=cf43709031889621fd7bc075c0ef2950"},
{songname:"最熟悉的陌生人",singer:"萧亚轩",url:"http://media.openedu.com.cn/media_file/netcourse/asx/mxyl/public/mxjs/music/4.MP3"}]
}}).render();
}

介绍下处理}}}bug的方法吧，基本思想是这样的

比如一个字符串str="12345}}}'789",我需要把它分割成一个数组[12345},'789],简单的str.split(/}}/)无法达到我要的效果，

这样也不行str.split(/}}(?:[^}])/)

要保留上边的’符号，可以先对字符串进行一下处理str=str.replace(/(}})([^}])/g,function(){
        return arguments[1]+"   "+arguments[2];
     }),处理后再split就ok啦！