<%for ( var i = 0; i < users.length; i++ ) { %>
    

        
            <%=users[i].name%>
        
    
<% } %>

按照這個替換規(guī)則會被替換為：

");for ( var i = 0; i < users.length; i++ ) { p.push("
    

        
            ");p.push(users[i].name);p.push("
        
    
"); } p.push("

這樣肯定會報錯，畢竟代碼都沒有寫全，我們在首和尾加上部分代碼，變成：

// 添加的首部代碼
var p = []; p.push("

");for ( var i = 0; i < users.length; i++ ) { p.push("
    

        
            ");p.push(users[i].name);p.push("
        
    
"); } p.push("

// 添加的尾部代碼
");

我們整理下這段代碼：

var p = []; p.push("");
for ( var i = 0; i < users.length; i++ ) { 
    p.push("
");
    p.push(users[i].name);
    p.push("
"); 
}
    p.push("");

恰好可以實現(xiàn)這個功能，不過還要注意一點，要將換行符替換成空格，防止解析成代碼的時候報錯，不過在這里為了方便理解原理，就只在代碼里實現(xiàn)。

我們來嘗試實現(xiàn)第一版：

// 第一版
function tmpl(str, data) {
    var str = document.getElementById(str).innerHTML;

    var string = "var p = []; p.push("" +
    str
    .replace(/[
	
]/g, "")
    .replace(/<%=(.*?)%>/g, "");p.push($1);p.push("")
    .replace(/<%/g, "");")
    .replace(/%>/g,"p.push("")
    + "");"

    eval(string)

    return p.join("");
};

為了驗證是否有用：

HTML 文件：

JavaScript 文件：

var users = [
    { "name": "Byron", "url": "http://localhost" },
    { "name": "Casper", "url": "http://localhost" },
    { "name": "Frank", "url": "http://localhost" }
]
tmpl("user_tmpl", users)

完整的 Demo 可以查看 template 示例一

在這里我們使用了 eval ，實際上 John Resig 在文章中使用的是 Function 構造函數(shù)。

Function 構造函數(shù)創(chuàng)建一個新的 Function 對象。 在 JavaScript 中, 每個函數(shù)實際上都是一個 Function 對象。

使用方法為：

new Function ([arg1[, arg2[, ...argN]],] functionBody)

arg1, arg2, ... argN 表示函數(shù)用到的參數(shù)，functionBody 表示一個含有包括函數(shù)定義的 JavaScript 語句的字符串。

舉個例子：

var adder = new Function("a", "b", "return a + b");

adder(2, 6); // 8

那么 John Resig 到底是如何實現(xiàn)的呢？

使用 Function 構造函數(shù)：

// 第二版
function tmpl(str, data) {
    var str = document.getElementById(str).innerHTML;

    var fn = new Function("obj",

    "var p = []; p.push("" +

    str
    .replace(/[
	
]/g, "")
    .replace(/<%=(.*?)%>/g, "");p.push($1);p.push("")
    .replace(/<%/g, "");")
    .replace(/%>/g,"p.push("")
    + "");return p.join("");");

    return fn(data);
};

使用方法依然跟第一版相同，具體 Demo 可以查看 template 示例二

不過值得注意的是：其實 tmpl 函數(shù)沒有必要傳入 data 參數(shù)，也沒有必要在最后 return 的時候，傳入 data 參數(shù)，即使你把這兩個參數(shù)都去掉，代碼還是可以正常執(zhí)行的。

這是因為:

使用Function構造器生成的函數(shù)，并不會在創(chuàng)建它們的上下文中創(chuàng)建閉包；它們一般在全局作用域中被創(chuàng)建。當運行這些函數(shù)的時候，它們只能訪問自己的本地變量和全局變量，不能訪問Function構造器被調(diào)用生成的上下文的作用域。這和使用帶有函數(shù)表達式代碼的 eval 不同。

這里之所以依然傳入了 data 參數(shù)，是為了下一版做準備。

現(xiàn)在有一個小問題，就是實際上我們傳入的數(shù)據(jù)結構可能比較復雜，比如：

var data = {
    status: 200,
    name: "kevin",
    friends: [...]
}

如果我們將這個數(shù)據(jù)結構傳入 tmpl 函數(shù)中，在模板字符串中，如果要用到某個數(shù)據(jù)，總是需要使用 data.name、data.friends 的形式來獲取，麻煩就麻煩在我想直接使用 name、friends 等變量，而不是繁瑣的使用 data. 來獲取。

這又該如何實現(xiàn)的呢？答案是 with。

with 語句可以擴展一個語句的作用域鏈(scope chain)。當需要多次訪問一個對象的時候，可以使用 with 做簡化。比如：

var hostName = location.hostname;
var url = location.href;

// 使用 with
with(location){
    var hostname = hostname;
    var url = href;
}

function Person(){
    this.name = "Kevin";
    this.age = "18";
}

var person = new Person();

with(person) {
    console.log("my name is " + name + ", age is " + age + ".")
}
// my name is Kevin, age is 18.

最后：不建議使用 with 語句，因為它可能是混淆錯誤和兼容性問題的根源，除此之外，也會造成性能低下

使用 with ，我們再寫一版代碼：

// 第三版
function tmpl(str, data) {
    var str = document.getElementById(str).innerHTML;

    var fn = new Function("obj",

    // 其實就是這里多添加了一句 with(obj){...}
    "var p = []; with(obj){p.push("" +

    str
    .replace(/[
	
]/g, "")
    .replace(/<%=(.*?)%>/g, "");p.push($1);p.push("")
    .replace(/<%/g, "");")
    .replace(/%>/g,"p.push("")
    + "");}return p.join("");");

    return fn(data);
};

具體 Demo 可以查看 template 示例三

如果我們的模板不變，數(shù)據(jù)卻發(fā)生了變化，如果使用我們的之前寫的 tmpl 函數(shù)，每次都會 new Function，這其實是沒有必要的，如果我們能在使用 tmpl 的時候，返回一個函數(shù)，然后使用該函數(shù)，傳入不同的數(shù)據(jù)，只根據(jù)數(shù)據(jù)不同渲染不同的 html 字符串，就可以避免這種無謂的損失。

// 第四版
function tmpl(str, data) {
    var str = document.getElementById(str).innerHTML;

    var fn = new Function("obj",

    "var p = []; with(obj){p.push("" +

    str
    .replace(/[
	
]/g, "")
    .replace(/<%=(.*?)%>/g, "");p.push($1);p.push("")
    .replace(/<%/g, "");")
    .replace(/%>/g,"p.push("")
    + "");}return p.join("");");

    var template = function(data) {
        return fn.call(this, data)
    }
    return template;
};

// 使用時
var compiled = tmpl("user_tmpl");
results.innerHTML = compiled(data);

具體 Demo 可以查看 template 示例四

至此，我們已經(jīng)跟著 jQuery 的作者 John Resig 實現(xiàn)了一個簡單的模板引擎，雖然 underscore 基于這個思路實現(xiàn)，但是功能強大，相對的，代碼也更加復雜一下，下一篇，我們一起去分析 underscore 的 template 函數(shù)實現(xiàn)。

underscore 系列目錄地址：https://github.com/mqyqingfeng/Blog。

underscore 系列預計寫八篇左右，重點介紹 underscore 中的代碼架構、鏈式調(diào)用、內(nèi)部函數(shù)、模板引擎等內(nèi)容，旨在幫助大家閱讀源碼，以及寫出自己的 undercore。

如果有錯誤或者不嚴謹?shù)牡胤剑垊毡亟o予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對作者也是一種鼓勵。