基于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>
基于jquery上的轻量级《数据模板解析》插件的更多相关文章
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- 利用HttpWebRequest模拟表单提交 JQuery 的一个轻量级 Guid 字符串拓展插件. 轻量级Config文件AppSettings节点编辑帮助类
利用HttpWebRequest模拟表单提交 1 using System; 2 using System.Collections.Specialized; 3 using System.IO; ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- 基于jQuery的图片相册滑出放大插件
今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...
- 基于jQuery功能非常强大的图片裁剪插件
今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...
- Html在线编辑器--基于Jquery的xhEditor轻量级编辑器
xhEditor V1.2.2 下载地址 开源中国社区: http://www.oschina.net/p/xheditor xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHT ...
- 一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...
- [smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件
正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词.子句.段落的时候可以进行扩展操作. 右键菜单栏有很多基于jQuery的插件,其中灵活性比较强 ...
- 一款基于jQuery的图片下滑切换焦点图插件
之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的 ...
随机推荐
- [Search Engine] 搜索引擎分类和基础架构概述
大家一定不会多搜索引擎感到陌生,搜索引擎是互联网发展的最直接的产物,它可以帮助我们从海量的互联网资料中找到我们查询的内容,也是我们日常学习.工作和娱乐不可或缺的查询工具.之前本人也是经常使用Googl ...
- PHP中的魔术方法：__construct, __destruct , __call, __callStatic,__get, __set, __isset, __unset , __sleep, __wakeup, __toString, __set_state, __clone and __autoload
1.__get.__set 这两个方法是为在类和他们的父类中没有声明的属性而设计的: __get( $property ) 当调用一个未定义的属性时访问此方法: __set( $property, $ ...
- samtools常用命令详解
samtools的说明文档:http://samtools.sourceforge.net/samtools.shtmlsamtools是一个用于操作sam和bam文件的工具合集.包含有许多命令.以下 ...
- 家庭路由器设置以及win10链接无线不显示登录密码 直接提示链接出错问题解决
家庭路由器设置 网线插入WAN口,用网客户端接在LAN口,就是路由器模式 LAN→WAN设置:电脑→第二个路由器LAN→进入设置界面: 网络参数→WAN口设置→WAN口连接类型→动态IP→保存. 网络 ...
- MariaDB 多主一从 搭建测试
背景: 目前MySQL依然只支持一个Slave从一个Master复制数据,虽然也可以做到一主多备(M->S),双主复制(M<->M)等架构,但是局限性依然很大.由于项目的要求,需要各 ...
- spring加载多个配置文件
首先我们都知道要使用spring,则需要在web.xml中增加如下代码: web.xml: 1:<listener><listener-class>org.springfram ...
- Ehlib安装方法有窍门
Ehlib安装方法有窍门,如果不知道该安装方法,很难成功安装,Delphi 7(D5.D6也如此)中的安装方法 1.把EhLib中的common和DataService文件拷贝到Delph ...
- Linux C编程学习之C语言简介---预处理、宏、文件包含……
C的简介 C语言的结构极其紧凑,C语言是一种模块化的编程语言,整个程序可以分割为几个相对独立的功能模块,模块之间的相互调用和数据传递是非常方便的 C语言的表达能力十分强大.C语言兼顾了高级语言和汇编语 ...
- python学习笔记(1)
python简介 python是Guido van Rossum在圣诞节打发无聊的时间时候写出来的语言. python是解释性的语言. python是动态类型的语言. python是强类型定义语言(高 ...
- [MongoDB]Mongo基本使用：
汇总: 1. [MongoDB]安装MongoDB2. [MongoDB]Mongo基本使用:3. [MongoDB]MongoDB的优缺点及与关系型数据库的比较4. [MongoDB]MongoDB ...