[[172549]]

時下流行什么react, avalon, angular, vue什么，其核心都離不開前端模板。理解前端模板，是我們了解MV* 的關(guān)鍵。

前端框架最重要的目的是將頁面渲染出來。“渲染”(render)這個詞最初不是前端的東西的。前端之前叫做切圖，將設(shè)計(jì)師做的PSD變成一個靜態(tài)頁面，然后加上動態(tài)交互。但是我們有許多數(shù)據(jù)是來自后端，如何將數(shù)據(jù)加入靜態(tài)頁面呢?于是又多了一套工序叫“套頁面”。套頁面的過程實(shí)際就是將靜態(tài)頁面變成切割成一塊塊，每一塊都是一個php，jsp或vm文件，它們是后端模板引擎的處理對象!

其實(shí)模板是不局限于后端還是前端的， 模板的本質(zhì)是用于從數(shù)據(jù)(變量)到實(shí)際的視覺表現(xiàn)(HTML代碼)這項(xiàng)工作的一種實(shí)現(xiàn)手段。由于后端近水樓臺先得月(取數(shù)據(jù)比較方便)，因此先在后端發(fā)展出這種技術(shù)。這些后端模板文件是活動于服務(wù)器的，然后經(jīng)過復(fù)雜的處理，***由瀏覽器渲染出來。這時的渲染是將服務(wù)器拼接好的靜態(tài)文本變成一個DOM樹的過程。

如果要實(shí)現(xiàn)前端實(shí)現(xiàn)MVC或MVP，那些工序必須發(fā)生改變。靜態(tài)文件產(chǎn)出是不變，尤其是大公司，分工夠細(xì)，有專門的切圖組(大多數(shù)是妹子)將它們做出來。接著是套頁面，這時就不能使用后端模板引擎，需要引入前端模板引擎。由于實(shí)現(xiàn)一個前端模板引擎太簡單了，經(jīng)過多年的發(fā)展，已經(jīng)有眾多好用的輪子：

https://github.com/janl/musta...

基于JavaScript的Logic-less(無邏輯或輕邏輯)模板。

https://github.com/twitter/ho...

上面的優(yōu)化版，twitter出品

https://github.com/wycats/han...

完全兼容mustcache的語法

https://github.com/paularmstr...

擁有更強(qiáng)悍的模板繼承與block 重寫功能

https://github.com/mozilla/nu...

跟django的模板系統(tǒng)相似，可以說swig的升級版，是gitbook的御用前端模板

其它推薦的還有ejs， 易學(xué)易用，對有過ASP/PHP/JSP編程經(jīng)驗(yàn)的人來說，非常親切自然，缺點(diǎn)就是功能有點(diǎn)簡單。

其他doT, xtempalate， Underscore Templates。

最不推薦是jade， 有點(diǎn)華而不實(shí)，過度設(shè)計(jì)，導(dǎo)致套頁面工作量大，性能其差。

虛擬DOM時代流行的jsx就是無邏輯模板。之所以流行無邏輯或輕邏輯模板，其主要原因是改動成本比較少，像jade這樣自造語法糖太多，從美工手中拿來的html需要大動干戈，進(jìn)行摧心折骨般的改造才能套數(shù)據(jù)。對于模板來說，最簡單而言，就是將某個可變數(shù)據(jù)放到適當(dāng)?shù)牡胤?填空)，而其次，可以控制這個區(qū)域輸出不輸入(if指令)，或讓其個區(qū)域循環(huán)輸入多次(for指令)，更強(qiáng)制，實(shí)現(xiàn)模板互相套嵌(layout與block)。為了實(shí)現(xiàn)if與for有兩種方法，一種是單純的區(qū)域，插入一個js 語句，里面有if語句與for語句，另一種是使用語法糖，比如說 ms-for, ms-repeat, ng-if, ng-repeat。語法糖的用法比直接使用JS語句簡單，但是帶來學(xué)習(xí)成本與拓展功能。每一個模板 if, for指令的語法都不一樣的，并且你想在循環(huán)做一些處理，比如過濾一些數(shù)據(jù)，或突然在某處中斷，這又得引用一些新的語句。隨著模板要求前后共用，就有了傳輸成本，直接寫JS語句在模板里面肯定比不過語法糖。因此基于這種種原因，mustache風(fēng)格的模板就成為主流。

現(xiàn)在三種模板風(fēng)格：

PHP/ASP/JSP風(fēng)格：

<% if ( list.length ) { %> 
  <ol> 
    <% for ( n=0; n<list.length; ++n ) { %> 
      <li> 
        <%= list[n] %> 
      </li> 
    <% } %> 
  </ol> 
<% } %>  

mustcache風(fēng)格，高級語法有限，通常難自定義拓展： 

{{#if list.length}} 
  <ol> 
    {{#each list item}} 
      <li> 
        {{ item }} 
      </li> 
    {{/each}} 
  </ol> 
{{/if}}  

屬性綁定風(fēng)格：

<ol ms-if="list.length"> 
  <li ms-for="item in list"> 
      {{item}} 
  </li> 
</ol>  

前兩者只能出現(xiàn)于script, textarea等容器元素內(nèi)部。因此<分隔符與標(biāo)簽的<容器造成沖突，并且也不利于IDE的格式化處理。屬性綁定風(fēng)格則是MVVM時期***的模板定義風(fēng)格，某頁面某個區(qū)域就是一個模板，不需要進(jìn)行入append等操作。

我們再來看如何實(shí)現(xiàn)前端模板。前端模板的本質(zhì)就是一個可以轉(zhuǎn)換函數(shù)(渲染函數(shù))的字符串。渲染函數(shù)放進(jìn)一個充滿數(shù)據(jù)的對象后，還原為一個全新的字符串。因此重點(diǎn)是如何構(gòu)建一個渲染函數(shù)。最簡單的方式是正則，還記得第二章的format方法嗎，這就是一個輕型的填充數(shù)據(jù)的方法。 

function format(str, object) { 
    var array = Array.prototype.slice.call(arguments, 1); 
    return str.replace(/\\?\#{([^{}]+)\}/gm, function(match, name) { 
        if (match.charAt(0) == '\\') 
            return match.slice(1); 
        var index = Number(name) 
        if (index >= 0) 
            return array[index]; 
        if (object && object[name] !== void 0) 
            return  object[name]; 
        return  ''; 
    }); 
}  

format方法是通過#{ }來劃分靜態(tài)內(nèi)容與動態(tài)內(nèi)容的，一般來說它們稱之為定界符(delimiter)。#{為前定界符，}為后界符，這個#{}其實(shí)是ruby風(fēng)格的定界符。通常的定界符是<%與%>，{{與}} 。通常在前定界符中還有一些修飾符號，比如=號，表示這個會輸出到頁面，-號，表示會去掉兩旁的空白。

將下例，要編譯成一個渲染函數(shù) 

var tpl = '你好,我的名字啊<%name%>, 今年已經(jīng) <%info.age%>歲了' 
 var data = { 
     name: "司徒正美", 
     age: 20 
 }  

大抵是這樣 

var body = '你好,我的名字叫'+ data.name+ ', 今年已經(jīng) '+data.info.age+ '歲了' 
var render = new Function('data', 'return '+ body)  

或者聰明一點(diǎn)，使用數(shù)組來join:

var array = ['return '] 
array.push('你好,我的名字叫'） 
array.push(data.name) 
array.push(', 今年已經(jīng)') 
array.push(data.info.age) 
array.push( '歲了') 
var render = new Function('data', array.join('+'))  

這就得區(qū)分靜態(tài)內(nèi)容與為變量前加data.前綴。這一步可以用正則來做，也可以用純字符串。我們試一下純字符串方式。假令前定界符為openTag，后定界符為closeTag，通過indexOf 與slice方法，就可以將它切成一塊塊。 

function tokenize(str) { 
    var openTag = '<%' 
    var closeTag = '%>' 
    var ret = [] 
    do { 
        var index = str.indexOf(openTag) 
        index = index === -1 ? str.length : index 
        var value = str.slice(0, index) 
        //抽取{{前面的靜態(tài)內(nèi)容 
        ret.push({ 
            expr: value, 
            type: 'text' 
        }) 
        //改變str字符串自身 
        str = str.slice(index + openTag.length) 
        if (str) { 
            index = str.indexOf(closeTag) 
            var value = str.slice(0, index) 
            //抽取{{與}}的動態(tài)內(nèi)容 
            ret.push({ 
                expr: value.trim(),//JS邏輯兩旁的空白可以省去 
                type: 'js' 
            }) 
            //改變str字符串自身 
            str = str.slice(index + closeTag.length) 
        } 
    } while (str.length) 
    return ret 
} 
console.log(tokenize(tpl)) 

 然后通過render方法將它們拼接起來。

function render(str) { 
     var tokens = tokenize(str) 
     var ret = [] 
     for (var i = 0, token; token = tokens[i++]; ) { 
         if (token.type === 'text') { 
             ret.push('"' + token.expr + '"') 
         } else { 
             ret.push(token.expr) 
         } 
     } 
     console.log("return "+ ret.join('+')) 
 } 

打印出來如下 

return "你好,我的名字叫"+name+", 今年已經(jīng) "+info.age+"歲了" 

這個方法還不完整。首先光是在兩旁加上雙引號是不可靠的，萬一里面還有雙引號怎么辦。因此我們需要引入第二章介紹的quote方法，當(dāng)類型為文本時，ret.push(+quote(token.expr)+)。其次需要對動態(tài)部分的變量加上.data。怎么知道它是一個變量呢。我們回想一下變量的定義，就是以_,$或字母開頭的字符組合。為了簡潔起見，我們暫時不用里會中文的情況。不過，info.age這個字符串里面，其實(shí)有兩個符合變量的子串，而我只需要在info前面加data.。這時，我們需要設(shè)法在匹配變量前，將對象的子級屬性替換掉，替換成不符合變量的字符，然后再替換為去。為此，我搞了一個dig與fill方法，將子級屬性變成??12這樣的字符串: 

return "你好,我的名字叫"+name+", 今年已經(jīng) "+info.age+"歲了"  

輸出為 

return "你好,我的名字叫"+data.name+", 今年已經(jīng) "+data.info.age+"歲了" 

***，我們修改一下后面兩行，得到我們夢魅以求的渲染函數(shù)，它的實(shí)現(xiàn)過程比format方法復(fù)雜多了，但卻是所有擴(kuò)展性極強(qiáng)的前端模板的一般實(shí)現(xiàn)過程。 

function render(str){ 
  //略。。。 
     return new Function("data", "return " + ret.join('+')) 
  } 
  var fn = render(tpl) 
  console.log(fn+"") 
  console.log(fn(data)) 

 我們再看一下如何引入循環(huán)語句，比如將上面的模板與數(shù)據(jù)改成這樣 

var tpl = '你好,我的名字叫<%name%>, 今年已經(jīng) <%info.age%>歲了,喜歡<% for(var i = 0, el; el = list[i++];){%><% el %> <% } %>' 
 var data = { 
     name: "司徒正美", 
     info: { 
         age: 20 
     }, 
     list: ["蘋果","香蕉","雪梨"] 
 }  

這時我們就添加一種新的類型，不輸出到頁面的動態(tài)內(nèi)容。這在token方法中做一些修改 

value = value.trim() 
if (/^(if|for|})/.test(value)) { 
    ret.push({ 
        expr: value, 
        type: 'logic' 
    }) 
} else { 
    ret.push({ 
        expr: value, 
        type: 'js' 
    }) 
}  

但render方法怎么修改好呢，顯示這時繼續(xù)用+已經(jīng)不行了，否則下場是這樣 

return "你好,我的名字叫"+data.name+", 今年已經(jīng) "+data.info.age+"歲了,喜歡"+for(var i = 0, el; el = list[i++];){+""+data.el+" "+} 

這時， 我們需要借用數(shù)組，將要輸入的數(shù)據(jù)(text, js類型 )放進(jìn)去，logic類型不放進(jìn)去。 

function addPrefix(str) { 
   // 先去掉對象的子級屬性,減少干擾因素 
   var js = str.replace(rproperty, dig) 
   js = js.replace(rident, function (a) { 
       return 'data.' + a 
   }) 
   return js.replace(rfill, fill) 
} 
function addView(s) { 
   return '__data__.push(' + s + ')' 
} 
function render(str) { 
    stringPool = {} 
    var tokens = tokenize(str) 
    var ret = ['var __data__ = []'] 
    tokens.forEach(function(token){ 
       if (token.type === 'text') { 
           ret.push(addView(quote(token.expr))) 
       } else if (token.type === 'logic') { 
           //邏輯部分都經(jīng)過addPrefix方法處理 
           ret.push(addPrefix(token.expr)) 
       } else { 
           ret.push(addView(addPrefix(token.expr))) 
       } 
    }) 
    ret.push("return __data__.join('')") 
    console.log( ret.join('\n')) 
  } 
var fn = render(tpl)  

得到的內(nèi)部結(jié)構(gòu)是這樣的，顯然addPrefix方法出問題，我們應(yīng)該過濾掉if, for等關(guān)鍵字與保留字。 

var __data__ = [] 
__data__.push("你好,我的名字叫") 
__data__.push(data.name) 
__data__.push(", 今年已經(jīng) ") 
__data__.push(data.info.age) 
__data__.push("歲了,喜歡") 
data.for(data.var data.i = 0, data.el; data.el = data.list[data.i++]){ 
__data__.push("") 
__data__.push(data.el) 
__data__.push(" ") 
} 
return __data__.join('')  

但即使我們處理掉關(guān)鍵字與保留字，對于中間生成i, el怎么區(qū)分呢?是區(qū)分不了。于是目前有兩種方法，一是使用with， 這時我們就不需要加data.前綴。第二種引入新的語法。比如，前面是@就替換為data.。

先看***種： 

function render(str) { 
     stringPool = {} 
     var tokens = tokenize(str) 
     var ret = ['var __data__ = [];', 'with(data){'] 
     for (var i = 0, token; token = tokens[i++]; ) { 
         if (token.type === 'text') { 
             ret.push(addView(quote(token.expr))) 
         } else if (token.type === 'logic') { 
             ret.push(token.expr) 
         } else { 
             ret.push(addView(token.expr)) 
         } 
     } 
     ret.push('}') 
     ret.push('return __data__.join("")') 
     return new Function("data", ret.join('\n')) 
 } 
 var fn = render(tpl) 
 console.log(fn + "") 
 console.log(fn(data)) 

 許多迷你模板都是用with減少替換工作。

第二種方法，使用引導(dǎo)符@, avalon2就是這么玩。這樣addPrefix方法可以減少許多代碼。相對應(yīng)，模板也要改動一下 

var tpl = '你好,我的名字叫<%@name%>, 今年已經(jīng) <%@info.age%>歲了,喜歡<% for(var i = 0, el; el = @list[i++];){%><% el %> <% } %>' 
var rguide = /(^|[^\w\u00c0-\uFFFF_])(@|##)(?=[$\w])/g 
function addPrefix(str) { 
    return str.replace(rguide, '$1data.') 
} 
function render(str) { 
    stringPool = {} 
    var tokens = tokenize(str) 
    var ret = ['var __data__ = [];'] 
    for (var i = 0, token; token = tokens[i++]; ) { 
        if (token.type === 'text') { 
            ret.push(addView(quote(token.expr))) 
        } else if (token.type === 'logic') { 
            //邏輯部分都經(jīng)過addPrefix方法處理 
            ret.push(addPrefix(token.expr)) 
        } else { 
            ret.push(addView(addPrefix(token.expr))) 
        } 
    } 
    
    ret.push('return __data__.join("")') 
    return new Function("data", ret.join('\n')) 
} 
var fn = render(tpl) 
console.log(fn + "") 
console.log(fn(data)) 

 第二種比***種的優(yōu)勢在于，性能更高，并且避開es5嚴(yán)格模式的限制。

我們再認(rèn)真思考一下，其實(shí)循環(huán)語句與條件語句，不單是for, if兩個，還有while, do while, else什么。因此這需要優(yōu)化。這也有兩種方法，添加更多語法符合，比如上面所說的=就是輸出，沒有則不輸出。這是ASP/JSP/PHP等模板采用的手段： 

//tokenize方法 
if (value.charAt(0) === '=') { 
     ret.push({ 
         expr: value,  
         type: 'js' 
     }) 
 } else { 
     ret.push({ 
         expr: value,  
         type: 'logic' 
     }) 
 }  

另一種，使用語法糖，如#each (el, index) in @list , '#eachEnd', '#if ','#ifEnd'。還是改動tokenize方法 

if (value.charAt(0) === '#') { 
    if (value === '#eachEnd' || value === '#ifEnd') { 
        ret.push({ 
            expr: '}', 
            type: 'logic' 
        }) 
    } else if (value.slice(0, 4) === '#if ') { 
        ret.push({ 
            expr: 'if(' + value.slice(4) + '){', 
            type: 'logic' 
        }) 
    } else if (value.slice(0, 6) === '#each ') { 
        var arr = value.slice(6).split(' in ') 
        var arrayName = arr[1] 
        var args = arr[0].match(/[$\w_]+/g) 
        var itemName = args.pop() 
        var indexName = args.pop() || '$index' 
        value = ['for(var ', ' = 0;', '<' + arrayName + '.length;', '++){'].join(indexName) + 
                '\nvar ' + itemName + ' = ' + arrayName + '[' + indexName + '];' 
        ret.push({ 
            expr: value, 
            type: 'logic' 
        }) 
     
    } 
     
} else{ 
   //... 
}  

對應(yīng)的模板改成 

var tpl = '你好,我的名字叫<%@name%>, 今年已經(jīng) <%@info.age%>歲了,喜歡<%#each el in @list %><% el %> <% #eachEnd %>' 
var fn = render(tpl) 
console.log(fn + "") 
console.log(fn(data)) 

可能有人覺#for, #forEnd這樣的語法糖比較丑，無問題，這個可以改，主要我們的tokenize方法足夠強(qiáng)大，就能實(shí)現(xiàn)mustache這樣的模板引擎。但所有模板引擎也基本上是這么實(shí)現(xiàn)的，有的還支持過濾器，也就是在js 類型的語句再進(jìn)行處理，將|后面的字符器再切割出來。

如果虛擬DOM呢?那就需要一個html parser，這個工程巨大，比如reactive這個庫，早期不使用html parser與虛擬DOM，只有3，4千行，加入這些炫酷功能后就達(dá)到1W6K行。返回一個字符串與返回一個類似DOM樹的對象樹結(jié)構(gòu)是不一樣。