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！