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动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
javascript无刷新评论实现方法
May 13 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
angular实现form验证实例代码
Jan 17 Javascript
js实现随机点名小功能
Aug 17 Javascript
webpack打包js的方法
Mar 12 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
vue实现节点增删改功能
Sep 26 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
input框中的name和id的区别
2016/11/16 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python 内置模块详解
2019/01/01 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python调用支付宝支付接口流程
2019/08/15 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
golang/python实现归并排序实例代码
2020/08/30 Python
浅析Python的命名空间与作用域
2020/11/25 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
入股协议书范本
2014/04/14 职场文书
论文评语大全
2014/04/29 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python