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 prototype 原型链
Mar 12 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
php join函数应用
2011/05/04 PHP
用js遍历 table的脚本
2008/07/23 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
Vue的生命周期操作示例
2019/09/17 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
护士自荐信范文
2013/12/15 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
安全施工责任书
2014/08/25 职场文书
校园广播稿精选
2014/10/01 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Python实现视频自动打码的示例代码
2022/04/08 Python
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript