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 07 Javascript
jQuery选择器全集详解
Nov 24 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python利用datetime模块计算时间差
2015/08/04 Python
python使用Tesseract库识别验证
2018/03/21 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python SVM 线性分类模型的实现
2019/07/19 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
文明礼貌主题班会
2015/08/14 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android