JSON JQUERY模板实现说明_jquery-js教程-PHP中文网

JSON JQUERY模板实现说明_jquery

php中文网

发布： 2016-05-16 18:23:57

原创

1322人浏览过

可是在客户端再现数据也是一个不小的问题,用javascript处理经常会遇到很繁琐的事.尤其大批量具有相同结构的数据,例如表格,处理方式不尽如意.如果能有一个模板控件，就像服务器端asp.net Gridview或者repeater一样的东西就好很多.最近看到一个非常优秀的解决方案，让我在使用方便的同时不得不为作者的精巧设计而作一番感叹.该解决方案用了区区二十几行代码,实现了别人要用几十甚至上百K的js库所做的工作.它就是John Resig 的 Microtemplating engine.大师Rick Strahl有一篇文章专门对此作了详细讲述(Client Templating with Jquery).我在这里把最核心部分提取出来以方便国人学习。

下面一段程序就是microtemplating engine.

冰兔(Btoo)网店系统

系统简介：冰兔BToo网店系统采用高端技术架构，具备超强负载能力，极速数据处理能力、高效灵活、安全稳定；模板设计制作简单、灵活、多元；系统功能十分全面，商品、会员、订单管理功能异常丰富。秒杀、团购、优惠、现金、卡券、打折等促销模式十分全面；更为人性化的商品订单管理，融合了多种控制和独特地管理机制；两大模块无限级别的会员管理系统结合积分机制、实现有效的推广获得更多的盈利！本次更新说明：1. 增加了新

查看详情

复制代码代码如下:

 
var _tmplCache = {} 
this.parseTemplate = function(str, data) { 
/// 
/// Client side template parser that uses  and  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. 
/// 
/// The text of the template to expand 
/// 

/// Any data that is to be merged. Pass an object and 
/// that object's properties are visible as variables. 
///  
/// 
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(/[
	
]/g, " ") 
.replace(/'(?=[^#]*#>)/g, "	") 
.split("'").join("\'") 
.split("	").join("'") 
.replace(//g, "',$1,'") 
.split(".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 ""; 
} 

如何使用:

复制代码代码如下:

parseTemplate($("#ItemTemplate").html(),{ name: "rick", address: { street: "32 kaiea", city: "paia"} } ); 

上面程序所用的模板:

复制代码代码如下:

如果想用循环:

复制代码代码如下:

$.each(dataarray,function(index,dataItem){ 
parseTemplate($("#ItemTemplate").html(), dataItem ); 
}) 

很简单很精巧吧?

大家都在看：

JavaScript如何防止代码注入攻击？什么是JavaScript的Source Map_它如何映射压缩后的代码呢 javascript如何与后端通信_fetch和axios有哪些主要区别 javascript如何发送HTTP请求_fetch和axios哪个更好用？ JavaScript JSON如何解析_如何序列化对象？