JS模板引擎
2014-04-08 23:43 龙恩0707 阅读(613) 评论(0) 编辑 收藏 举报一:NANO模板引擎:
最简单的jQuery模板引擎,完美实现对JSON的解析。
比如JSON数据如下:
var data = { user: { login: "tomek", first_name: "Thomas", last_name: "Mazur", account: { status: "active", expires_at: "2009-12-31" } } };
HTML空标签:
<p id="testLayout"></p>
模板引擎JS代码如下:
function nano(template, data) { return template.replace(/\{([\w\.]*)\}/g, function(str, key) { var keys = key.split("."), v = data[keys.shift()]; for (var i = 0, l = keys.length; i < l; i++) v = v[keys[i]]; return (typeof v !== "undefined" && v !== null) ? v : ""; }); }
调用代码如下:
var html = "<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>"; window.onload = function () { document.getElementById('testLayout').innerHTML = nano(html, data); }
JSfiddle demo如下: