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

1.先上一个栗子。

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <script src="js/jquery.js"></script>
  7 </head>
  8 <body>
  9 <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>
 10 <div mes>54654657</div>
 11 <div mes mesC="sdfsd">54654657</div>
 12 <div mes mesfor="data">
 13     <div mesdata mesdataC="{{data[i].a}}sdf;lksd{{b}}">豆腐干豆腐</div>
 14     对勾对勾
 15 </div>
 16 <div mesfor="data1">
 17     <div>123</div>
 18 </div>
 19 <script>
 20     var data = [
 21         {a:1,b:2},
 22         {a:11,b:22}
 23     ];
 24     var data1 = [
 25         {a:1,b:2},
 26         {a:1,b:2},
 27         {a:1,b:22},
 28         {a:1,b:2}
 29     ];
 30     var a = "测试一";
 31     var b = "测试二";
 32     $.extend({
 33         mesfor:function(mesForName,fn){//模板循环
 34             fn = fn || new Function();
 35             $("*["+mesForName+"]").each(function(i,mesfor){
 36                 var  children = $(mesfor).html();
 37                 var  mesforData = $(mesfor).attr(mesForName);
 38                 $(mesfor).html("");
 39                 $.each(eval(mesforData),function(i,data){
 40                     var newReplace = eval("/"+mesforData+"\\[i\\]"+"/g");
 41                     var newChildren = children.replace(newReplace,mesforData+"["+i+"]");
 42                     $(mesfor).append(newChildren);
 43                 });
 44             });
 45             fn();
 46         },
 47         AttrAnalysis:function(StringObj){//内容解析，并返回数据
 48             var text = StringObj;
 49             var textAll = StringObj.match(/\{\{+.+?\}\}/g);//查找所有{{...}}
 50             for(var i in textAll){
 51                 var replacefnString = textAll[i];
 52                 var FN = textAll[i].match(/\[function+\(+.+?\)\]/g);
 53                 for (var j in FN){
 54                     var replacefn = FN[j].replace(/(^\[function\()|(\)\]$)/g,"");
 55                     textAll[i] = eval(replacefn);
 56                 };
 57                 if(textAll[i].constructor.name == "String"){
 58                     if(textAll[i].indexOf("{{") != -1){
 59                         text = text.replace(textAll[i],eval(textAll[i]));
 60                     }else{
 61                         text = text.replace(replacefnString,textAll[i]);
 62                     };
 63                 }else if(textAll[i].constructor.name == ""){
 64                     text = text.replace(replacefnString,"");
 65                 };
 66             };
 67             return text;
 68         },
 69         mesFun:function(mes){
 70             mes = mes || "mes";
 71             var mesForName = mes + "for";
 72             var mesC = mes + "c";
 73             $.mesfor(mesForName,function(){
 74                 $("*["+mesForName+"]").each(function(i,e){
 75                     var mewMes = mes+$(e).attr(mesForName);
 76                     $.mesFun(mewMes);
 77                     $.mesfor(mesForName+"-"+$(e).attr(mesForName),function(){
 78                         $.mesFun(mewMes);
 79                     });
 80                 });
 81                 $("*["+mes+"]").each(function(i,e){
 82                     if($(e).attr(mesForName) == undefined){//无循环，可直接解析
 83                         if($(e).parents("*["+mesForName+"]").length == 0){
 84                             $.each(e.attributes,function(i,attr){
 85                                 if(attr.name == mesC && attr.value !=""){//mesc文本源属性
 86                                     $(e).text($.AttrAnalysis(attr.value));
 87                                 }else{
 88                                     if(attr.name.indexOf("--") != -1){//其他源属性
 89                                         var newAttr = attr.name.replace(/^--/,"");
 90                                         $(e).attr(newAttr, $.AttrAnalysis(attr.value));
 91                                     };
 92                                 };
 93                             });
 94                         };
 95                     };
 96                 });
 97             });
 98         }
 99     });
100     $.mesFun();
101
102 </script>
103 </body>
104 </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>

转载于:https://www.cnblogs.com/zys8119/p/5614505.html

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

c语言json映射,GitHub - xujun621/cson: 基于C语言的json数据映射解析库
CSON 基于cJSON,运行于C语言平台的json-struct模型解析工具简介 CSON是一个简单的cJSON的二次封装,相比于使用原生cJSON一层一层解析的方式,CSON采用模型映射的方式, ...
基于jquery实现table内部数据排序
刚写的,资源连接http://d.download.csdn.net/down/1012531/lihan6415151528 关键意义在于这种排序方式比服务器代码排序要效率高的多,比同种客户端fle ...
YbSoftwareFactory 代码生成插件【九】：基于JQuery、WebApi的ASP.NET MVC插件的代码生成项目主要技术解析...
YbSoftwareFactory目前已可快速生成ASP.NET WebForm.MVC.WinForm和WPF的解决方案源代码,所生成的源代码可直接在VS中打开并运行.终端用户还可自行二次开发自己 ...
基于jQuery上传文件插件
由于最近项目的需求,需要做一个上传文件的插件,支持上传,下载,删除等功能,该插件主要运用了jQuery与jqgrid以及easyui,先贴出主要代码 /*** 上传附件插件--uploadFile* ...
给PUBG Mobile打上几十个数据标签解析霸榜原因
自发行以来,<PUBG MOBILE>便成为了中国出海游戏收入榜冠军宝座的常客,但在 9 月 2 日,印度电子和信息技术部(MEIT)发布公告,宣布封禁了<PUBG MOBILE&g ...
基于 jQuery支持移动触摸设备的Lightbox插件
Swipebox是一款支持桌面.移动触摸手机和平板电脑的jquery Lightbox插件.该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放. 在线预览源码下 ...
html input dropdown,jQuery轻量级下拉框插件Dropdown
插件描述:Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持keyvalue搜索,有token和两种模式. 更新时间:2017/7/7 上午11:45:40 更新说明:修复热 ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
《基于JQuery和CSS的特效整理》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅 https://www.web ...

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

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

最新文章

热门文章