前端模板的原理與實現

時下流行什麼react, avalon, angular, vue什麼，其核心都離不開前端模板。理解前端模板，是我們瞭解MV* 的關鍵。

前端框架最重要的目的是將頁面渲染出來。“渲染”（render）這個詞最初不是前端的東西的。前端之前叫做切圖，將設計師做的PSD變成一個靜態頁面，然後加上動態互動。但是我們有許多資料是來自後端，如何將資料加入靜態頁面呢？於是又多了一套工序叫“套頁面”。套頁面的過程實際就是將靜態頁面變成切割成一塊塊，每一塊都是一個php，jsp或vm檔案，它們是後端模板引擎的處理物件！

其實模板是不侷限於後端還是前端的，模板的本質是用於從資料（變數）到實際的視覺表現（HTML程式碼）

這項工作的一種實現手段。由於後端近水樓臺先得月（取資料比較方便），因此先在後端發展出這種技術。這些後端模板檔案是活動於伺服器的，然後經過複雜的處理，最後由瀏覽器渲染出來。這時的渲染是將伺服器拼接好的靜態文字變成一個DOM樹的過程。

如果要實現前端實現MVC或MVP，那些工序必須發生改變。靜態檔案產出是不變，尤其是大公司，分工夠細，有專門的切圖組（大多數是妹子）將它們做出來。接著是套頁面，這時就不能使用後端模板引擎，需要引入前端模板引擎。由於實現一個前端模板引擎太簡單了，經過多年的發展，已經有眾多好用的輪子：

其它推薦的還有ejs，易學易用，對有過ASP/PHP/JSP程式設計經驗的人來說，非常親切自然，缺點就是功能有點簡單。

其他doT, xtempalate， Underscore Templates。

最不推薦是jade，有點華而不實，過度設計，導致套頁面工作量大，效能其差。

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

現在三種模板風格：

PHP/ASP/JSP風格：

PHP

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

123456789

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

mustcache風格，高階語法有限，通常難自定義拓展：

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

123456789

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

屬性繫結風格：

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

12345

前兩者只能出現於script, textarea等容器元素內部。因此<分隔符與標籤的<容器造成衝突，並且也不利於IDE的格式化處理。屬性繫結風格則是MVVM時期最流行的模板定義風格，某頁面某個區域就是一個模板，不需要進行入append等操作。

我們再來看如何實現前端模板。前端模板的本質就是一個可以轉換函式（渲染函式）的字串。渲染函式放進一個充滿資料的物件後，還原為一個全新的字串。因此重點是如何構建一個渲染函式。最簡單的方式是正則，還記得第二章的format方法嗎，這就是一個輕型的填充資料的方法。

JavaScript

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  '';
    });
}

12345678910111213

functionformat(str,object){vararray=Array.prototype.slice.call(arguments,1);returnstr.replace(/\\?\#{([^{}]+)\}/gm,function(match,name){if(match.charAt(0)=='\\')returnmatch.slice(1);varindex=Number(name)if(index>=0)returnarray[index];if(object&&object[name]!==void0)returnobject[name];return'';});}

format方法是通過#{ }來劃分靜態內容與動態內容的，一般來說它們稱之為定界符（delimiter）。#{為前定界符，}為後界符，這個#{}其實是ruby風格的定界符。通常的定界符是<%與%>，{{與}} 。通常在前定界符中還有一些修飾符號，比如=號，表示這個會輸出到頁面，-號，表示會去掉兩旁的空白。
將下例，要編譯成一個渲染函式

JavaScript

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

12345

vartpl='你好,我的名字啊<%name%>, 今年已經 <%info.age%>歲了'vardata={name:"司徒正美",age:20}

大抵是這樣

JavaScript

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

12	varbody='你好,我的名字叫'+data.name+', 今年已經 '+data.info.age+'歲了'varrender=newFunction('data','return '+body)

或者聰明一點，使用陣列來join:

JavaScript

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

1234567

vararray=['return ']array.push('你好,我的名字叫'）array.push(data.name)array.push(', 今年已經')array.push(data.info.age)array.push('歲了')varrender=newFunction('data',array.join('+'))

這就得區分靜態內容與為變數前加data.字首。這一步可以用正則來做，也可以用純字串。我們試一下純字串方式。假令前定界符為openTag，後定界符為closeTag，通過indexOf 與slice方法，就可以將它切成一塊塊。

JavaScript

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)
        //抽取{{前面的靜態內容
        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)
            //抽取{{與}}的動態內容
            ret.push({
                expr: value.trim(),//JS邏輯兩旁的空白可以省去
                type: 'js'
            })
            //改變str字串自身
            str = str.slice(index + closeTag.length)
        }
    } while (str.length)
    return ret
}
console.log(tokenize(tpl))

123456789101112131415161718192021222324252627282930

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

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

JavaScript

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('+'))
 }

123456789101112

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

打印出來如下

JavaScript

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

1	return"你好,我的名字叫"+name+", 今年已經 "+info.age+"歲了"

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

JavaScript

 var quote = JSON.stringify//自己到第二章找完整函式
 var rident = /[$a-zA-Z_][$a-zA-Z0-9_]*/g
 var rproperty = /\.\s*[\w\.\$]+/g
 var number = 1
 var rfill = /\?\?\d+/g
 var stringPool = {}
 function dig(a) {
     var key = '??' + number++
     stringPool[key] = a
     return key
 }
 function fill(a) {
     return stringPool[a]
 }
 function render(str) {
     stringPool = {}
     var tokens = tokenize(str)
     var ret = []
     for (var i = 0, token; token = tokens[i++]; ) {
         if (token.type === 'text') {
             ret.push(quote(token.expr))
         } else {
             // 先去掉物件的子級屬性,減少干擾因素
             var js = token.expr.replace(rproperty, dig)
             js = js.replace(rident, function (a) {
                 return 'data.' + a
             })
             js = js.replace(rfill, fill)
             ret.push(js)
         }
     }
     console.log("return " + ret.join('+'))
 }
render(tpl)

12345678910111213141516171819202122232425262728293031323334

varquote=JSON.stringify//自己到第二章找完整函式varrident=/[$a-zA-Z_][$a-zA-Z0-9_]*/gvarrproperty=/\.\s*[\w\.\$]+/gvarnumber=1varrfill=/\?\?\d+/gvarstringPool={}functiondig(a){varkey='??'+number++stringPool[key]=areturnkey}function

前端模板的原理與實現

前端模板的原理與實現

C++標準模板庫(STL)迭代器的原理與實現

Java 線程池的原理與實現

防盜鏈的基本原理與實現

最小二乘法多項式曲線擬合原理與實現 zz

無限極分類原理與實現（轉）

java監聽器的原理與實現

Redis實現分布式鎖原理與實現分析

優先隊列原理與實現

LVM原理與實現過程

MapReduce原理與實現

單點登錄原理與實現

數據加密--詳解 RSA加密算法原理與實現

線上防雪崩利器——熔斷器設計原理與實現

分頁技術原理與實現之分頁的意義及方法（一）

Android系統硬體抽象層原理與實現之WIFI

推薦系統-協同過濾原理與實現

離散傅立葉變換（DFT）和快速傅立葉變換（FFT）原理與實現

DeepLearning（深度學習）原理與實現

什麼是單點登入（原理與實現簡介）

前端模板的原理與實現

相關推薦