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 相关文章推荐
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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把小数转成整数3种方法
2014/06/30 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
python烟花效果的代码实例
2020/02/25 Python
python之生成多层json结构的实现
2020/02/27 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
村庄环境整治方案
2014/05/15 职场文书
保险公司开门红口号
2014/06/21 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015年工商所工作总结
2015/05/21 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP