JSON JQUERY模板实现说明


Posted in Javascript onJuly 03, 2010

可是在客户端再现数据也是一个不小的问题,用javascript处理经常会遇到很繁琐的事.尤其大批量具有相同结构的数据,例如表格,处理方式不尽如意.如果能有一个模板控件,就像服务器端asp.net Gridview或者repeater一样的东西就好很多.最近看到一个非常优秀的解决方案,让我在使用方便的同时不得不为作者的精巧设计而作一番感叹.该解决方案用了区区二十几行代码,实现了别人要用几十甚至上百K的js库所做的工作.它就是John Resig 的 Microtemplating engine.大师Rick Strahl有一篇文章专门对此作了详细讲述(Client Templating with Jquery).我在这里把最核心部分提取出来以方便国人学习。

下面一段程序就是microtemplating engine.

var _tmplCache = {} 
this.parseTemplate = function(str, data) { 
/// <summary> 
/// Client side template parser that uses <#= #> and <# code #> expressions. 
/// and # # code blocks for template expansion. 
/// NOTE: chokes on single quotes in the document in some situations 
/// use ’ for literals in text and avoid any single quote 
/// attribute delimiters. 
/// </summary> 
/// <param name="str" type="string">The text of the template to expand</param> 
/// <param name="data" type="var"> 
/// Any data that is to be merged. Pass an object and 
/// that object's properties are visible as variables. 
/// </param> 
/// <returns type="string" /> 
var err = ""; 
try { 
var func = _tmplCache[str]; 
if (!func) { 
var strFunc = 
"var p=[],print=function(){p.push.apply(p,arguments);};" + 
"with(obj){p.push('" + str.replace(/[\r\t\n]/g, " ") 
.replace(/'(?=[^#]*#>)/g, "\t") 
.split("'").join("\\'") 
.split("\t").join("'") 
.replace(/<#=(.+?)#>/g, "',$1,'") 
.split("<#").join("');") 
.split("#>").join("p.push('") 
+ "');}return p.join('');"; 
//alert(strFunc); 
func = new Function("obj", strFunc); 
_tmplCache[str] = func; 
} 
return func(data); 
} catch (e) { err = e.message; } 
return "< # ERROR: " + err.htmlEncode() + " # >"; 
}

如何使用:
parseTemplate($("#ItemTemplate").html(),{ name: "rick", address: { street: "32 kaiea", city: "paia"} } );

上面程序所用的模板:

<script id="ItemTemplate" type="text/html"><div><div><#= name #></div><div><#= address.street #></div> </div></script>

如果想用循环:

$.each(dataarray,function(index,dataItem){ 
parseTemplate($("#ItemTemplate").html(), dataItem ); 
})

很简单很精巧吧?
Javascript 相关文章推荐
Javascript学习笔记二 之 变量
Dec 15 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
prototype.js常用函数详解
Jun 18 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 #Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 #Javascript
IE本地存储userdata的一个bug说明
Jul 01 #Javascript
UserData用法总结 lanyu出品
Jul 01 #Javascript
javascript 函数调用的对象和方法
Jul 01 #Javascript
this和执行上下文实现代码
Jul 01 #Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php include类文件超时问题处理
2015/02/06 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vue cli 全面解析
2018/02/28 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python简单实现安全开关文件的两种方式
2016/09/19 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python版名片管理系统
2018/11/30 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python 函数中的参数类型
2020/02/11 Python
python让函数不返回结果的方法
2020/06/22 Python
python爬虫---requests库的用法详解
2020/09/28 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
起诉意见书范文
2015/05/19 职场文书
党纪处分决定书
2015/06/24 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Python如何让字典保持有序排列
2022/04/29 Python