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定时机制
Oct 29 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js控制table合并具体实现
2014/02/20 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
python数据结构之列表和元组的详解
2017/09/23 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python如何对XML 解析
2020/06/28 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
社区清明节活动总结
2014/07/04 职场文书
迎七一演讲稿
2014/09/12 职场文书
金秋助学感谢信
2015/01/21 职场文书
质量保证书格式模板
2015/02/27 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
公司员工手册范本
2015/05/14 职场文书
网吧管理制度范本
2015/08/05 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript