可是在客户端再现数据也是一个不小的问题,用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(/[rtn]/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的重载函数，一般是靠对arguments判断来操作的。 比如： 复制代码 代码如下: var afunc = function() { args = arguments; if(args.length == 1) { console.log(1); }else if(args.length == 2) { conso>>>详细阅读

本文标题：JSON JQUERY模板实现说明

地址：http://www.17bianji.com/kaifa2/JS/26089.html

 1/2    1