温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery插件:$.nano

发布时间:2020-06-25 21:55:48 来源:网络 阅读:905 作者:lingbi05 栏目:web开发

最简单的jQuery模板引擎,仅九行代码,完美实现对JSON的解析。

 

  1. /* Nano Templates (Tomasz Mazur, Jacek Becela) */ 
  2. (function($){  
  3.   $.nano = function(template, data) {  
  4.     return template.replace(/\{([\w\.]*)\}/g, function (str, key) {  
  5.       var keys = key.split("."), value = data[keys.shift()];  
  6.       $.each(keys, function () { value = value[this]; });  
  7.       return (value === null || value === undefined) ? "" : value;  
  8.     });  
  9.   };  
  10. })(jQuery);  
  11.  
  12.  

源码地址:https://github.com/trix/nano

假如你有如下JSON数据:

 

  1. data= {  
  2.   user: {  
  3.     login: "tomek",  
  4.     first_name: "Thomas",  
  5.     last_name: "Mazur",  
  6.     account: {  
  7.       status: "active",  
  8.       expires_at: "2009-12-31" 
  9.     }  
  10.   }  

你有如下的模板:

 

  1. $.nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data) 

你将得到如下字符串:

 

  1. <p>Hello Thomas! Your account is <strong>active</strong></p> 

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI