JSON JQUERY模板实现说明

 更新时间:2010年07月03日 00:07:13   作者:  
用JSON从服务器端返回数据已是大家公认的标准,因为它短小精悍,使用方便.
可是在客户端再现数据也是一个不小的问题,用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 &rsquo; 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 );
})

很简单很精巧吧?

相关文章

  • jQuery中元素选择器(element)简单用法示例

    jQuery中元素选择器(element)简单用法示例

    这篇文章主要介绍了jQuery中元素选择器(element)用法,简单通俗的说明了jQuery元素选择器的功能、用法并结合实例形式分析了jQuery元素选择器的相关使用技巧与注意事项,需要的朋友可以参考下
    2018-05-05
  • jquery模拟LCD 时钟的html文件源代码

    jquery模拟LCD 时钟的html文件源代码

    LCD想必大家都有见到过吧,本文为大家介绍的就是使用jquery模拟LCD时钟,以下是HTML文件源代码
    2014-06-06
  • 使用jQuery实现星级评分代码分享

    使用jQuery实现星级评分代码分享

    本文给大家分享的是一段使用jQuery制作的星级评分的代码,非常大气漂亮,功能也很实用,这里推荐个大家。
    2014-12-12
  • jQuery中的each()详细介绍(推荐)

    jQuery中的each()详细介绍(推荐)

    jquery中的each()非常好用,用起来非常的爽,下面小编给大家介绍jquery中each()的用法详细介绍,感兴趣的朋友一起看看吧
    2016-05-05
  • jQuery中bind()方法用法实例

    jQuery中bind()方法用法实例

    这篇文章主要介绍了jQuery中bind()方法用法,实例分析了bind()方法的功能、定义及为匹配元素的特定事件绑定事件处理方法的技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery操作表单常用控件方法小结

    jQuery操作表单常用控件方法小结

    这篇文章主要介绍了jQuery操作表单常用控件方法,实例总结了jQuery针对常用表单控件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • Jquery异步上传文件代码实例

    Jquery异步上传文件代码实例

    这篇文章主要介绍了Jquery异步上传文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • jQuery模拟淘宝购物车功能

    jQuery模拟淘宝购物车功能

    本文主要介绍了用jQuery模拟淘宝购物车功能的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • web开发人员学习jQuery的6大理由及jQuery的优势介绍

    web开发人员学习jQuery的6大理由及jQuery的优势介绍

    jQuery是一个用来简化HTML客户端开发的JS(JavaScrip)库,它支持HTML DOM处理,同时还融合了部分HTML和CSS
    2013-01-01
  • jQuery为DOM动态追加事件的方法

    jQuery为DOM动态追加事件的方法

    下面小编就为大家带来一篇jQuery为DOM动态追加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02

最新评论