基于jquery上的轻量级《数据模板解析》插件

1.先上一个栗子。

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script src="js/jquery.js"></script>
 </head>
 <body>
 <div mes --class="zys" --a="测试一" class="a" mesC="****{{[function((data[0].a == 1)?'123123':'sdfsdf';)]}}***{{[function($('body').append('sdf5 646'))]}}*****{{data[0].a}}*****{{data[0].a}}{{[function(if(b == '张云山'){'sdfjkshdj';})]}}*****">54654657</div>
 <div mes>54654657</div>
 <div mes mesC="sdfsd">54654657</div>
 <div mes mesfor="data">
     <div mesdata mesdataC="{{data[i].a}}sdf;lksd{{b}}">豆腐干豆腐</div>
     对勾对勾
 </div>
 <div mesfor="data1">
     <div>123</div>
 </div>
 <script>
     var data = [
         {a:1,b:2},
         {a:11,b:22}
     ];
     var data1 = [
         {a:1,b:2},
         {a:1,b:2},
         {a:1,b:22},
         {a:1,b:2}
     ];
     var a = "测试一";
     var b = "测试二";
     $.extend({
         mesfor:function(mesForName,fn){//模板循环
             fn = fn || new Function();
             $("*["+mesForName+"]").each(function(i,mesfor){
                 var  children = $(mesfor).html();
                 var  mesforData = $(mesfor).attr(mesForName);
                 $(mesfor).html("");
                 $.each(eval(mesforData),function(i,data){
                     var newReplace = eval("/"+mesforData+"\\[i\\]"+"/g");
                     var newChildren = children.replace(newReplace,mesforData+"["+i+"]");
                     $(mesfor).append(newChildren);
                 });
             });
             fn();
         },
         AttrAnalysis:function(StringObj){//内容解析，并返回数据
             var text = StringObj;
             var textAll = StringObj.match(/\{\{+.+?\}\}/g);//查找所有{{...}}
             for(var i in textAll){
                 var replacefnString = textAll[i];
                 var FN = textAll[i].match(/\[function+\(+.+?\)\]/g);
                 for (var j in FN){
                     var replacefn = FN[j].replace(/(^\[function\()|(\)\]$)/g,"");
                     textAll[i] = eval(replacefn);
                 };
                 if(textAll[i].constructor.name == "String"){
                     if(textAll[i].indexOf("{{") != -1){
                         text = text.replace(textAll[i],eval(textAll[i]));
                     }else{
                         text = text.replace(replacefnString,textAll[i]);
                     };
                 }else if(textAll[i].constructor.name == ""){
                     text = text.replace(replacefnString,"");
                 };
             };
             return text;
         },
         mesFun:function(mes){
             mes = mes || "mes";
             var mesForName = mes + "for";
             var mesC = mes + "c";
             $.mesfor(mesForName,function(){
                 $("*["+mesForName+"]").each(function(i,e){
                     var mewMes = mes+$(e).attr(mesForName);
                     $.mesFun(mewMes);
                     $.mesfor(mesForName+"-"+$(e).attr(mesForName),function(){
                         $.mesFun(mewMes);
                     });
                 });
                 $("*["+mes+"]").each(function(i,e){
                     if($(e).attr(mesForName) == undefined){//无循环，可直接解析
                         if($(e).parents("*["+mesForName+"]").length == 0){
                             $.each(e.attributes,function(i,attr){
                                 if(attr.name == mesC && attr.value !=""){//mesc文本源属性
                                     $(e).text($.AttrAnalysis(attr.value));
                                 }else{
                                     if(attr.name.indexOf("--") != -1){//其他源属性
                                         var newAttr = attr.name.replace(/^--/,"");
                                         $(e).attr(newAttr, $.AttrAnalysis(attr.value));
                                     };
                                 };
                             });
                         };
                     };
                 });
             });
         }
     });
     $.mesFun();

 </script>
 </body>
 </html>

2.插件用法

　　2-1》先把插件调进页面。

　　2-2》执行 $.mesFun(); 初始化数据。mesFun(mes)里面的mes参数可选填，默认mes=“mes”。该参数会直接影响解析对象。

　　2-3》数据的绑定

　　　　　　　　例如：

　　　　　　　　　　　　

　　　　　　　　　　　　<script>
    　　　　　　　　　　　　var aa="我是新文本";
    　　　　　　　　　　　　var classB = "newclassA";
    　　　　　　　　　　　　var ulData = [
        　　　　　　　　　　　　　　{class:"classA",name:"mesfor1",id:0,text:"我是第1行数据"},
        　　　　　　　　　　　　　　{class:"classB",name:"mesfor2",id:1,text:"我是第2行数据"},
        　　　　　　　　　　　　　　{class:"classC",name:"mesfor3",id:2,text:"我是第3行数据"},
        　　　　　　　　　　　　　　{class:"classD",name:"mesfor4",id:3,text:"我是第4行数据"},
        　　　　　　　　　　　　　　{class:"classE",name:"mesfor5",id:4,text:"我是第5行数据"}
    　　　　　　　　　　　　];
　　　　　　　　　　　　</script>

　　　　　　　　　　　　<div mes mesC=“{{aa}}”>我是文本</div>
　　　　　　　　　　　　说明：mesC属性值得是文本数据，即解析结果为：<div mes mesC=“{{aa}}”>我是新文本</div>，数据绑定的时候比如写在双中括号里面，如：{{aa}}，以下同上。

　　　　　　　　　　　　<div mes mesC=“{{aa}}” --class="{{classB}}" class="classA">我是文本</div>
　　　　　　　　　　　　说明：--class即--属性，其解析结果<div mes mesC=“{{aa}}”--class="{{classB}}" class="newclassA">我是新文本</div>

　　　　　　　　　　　　<ul mesFor="ulData">
    　　　　　　　　　　　　<li mes --class="{{ulData.class}}" --name="{{ulData.name}}" --id="{{ulData.id}}" mesc="{{ulData.text}}">我是默认数据</li>
　　　　　　　　　　　　</ul>
　　　　　　　　　　　　说明：mesfor="绑定的数据"是数据循环，解析结果为：
　　　　　　　　　　　　<ul mesFor="ulData">
    　　　　　　　　　　　　<li mes --class="{{ulData.class}}" --name="{{ulData.name}}" --id="{{ulData.id}}" mesc="{{ulData.text}}" class="classA" name="mesfor1" id="0">我是第1行数据</li>
    　　　　　　　　　　　　<li mes --class="{{ulData.class}}" --name="{{ulData.name}}" --id="{{ulData.id}}" mesc="{{ulData.text}}" class="classB" name="mesfor2" id="1">我是第2行数据</li>
    　　　　　　　　　　　　<li mes --class="{{ulData.class}}" --name="{{ulData.name}}" --id="{{ulData.id}}" mesc="{{ulData.text}}" class="classC" name="mesfor3" id="2">我是第3行数据</li>
    　　　　　　　　　　　　<li mes --class="{{ulData.class}}" --name="{{ulData.name}}" --id="{{ulData.id}}" mesc="{{ulData.text}}" class="classD" name="mesfor4" id="3">我是第4行数据</li>
    　　　　　　　　　　　　<li mes --class="{{ulData.class}}" --name="{{ulData.name}}" --id="{{ulData.id}}" mesc="{{ulData.text}}" class="classE" name="mesfor5" id="4">我是第5行数据</li>
　　　　　　　　　　　　</ul>
　　2-4》属性源支持js脚本。
　　　　　　例如：
　　　　　　<div mes mesc="{{[function((aa == ‘我是新文本’)?'我是新文本一':'我是新文本二';)]}}">我是文本</div>
　　　　　　解析结果为：<div mes mesc="{{[function((aa == ‘我是新文本’)?'我是新文本一':'我是新文本二';)]}}">我是文本一</div>