JS模板引擎

龍恩0707發表於2014-04-08
原文網址 : https://www.cnblogs.com/tugenhua0707/p/3653239.html
JS

一：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如下：

 點選我！ok！

相關文章