日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端模板的原理與實現(xiàn)

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

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

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

如果要實現(xiàn)前端實現(xiàn)MVC或MVP，那些工序必須發(fā)生改變。靜態(tài)文件產(chǎn)出是不變，尤其是大公司，分工夠細，有專門的切圖組(大多數(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…

擁有更強悍的模板繼承與block 重寫功能

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

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

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

其他doT, xtempalate， Underscore Templates。

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

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

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

PHP/ASP/JSP風格：

 
 
 
 
    
  
  
  
  
  1. <% if ( list.length ) { %>
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.   
      
  
  
  
  
    1. 
  
  
  
  
    2.     <% for ( n=0; n
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.       
    5. 
  
  
  
  
    6. 
  
  
  
  
    7.         <%= list[n] %>
      8. 
  
  
  
  
    8. 
  
  
  
  
    9.       
      10. 
  
  
  
  
    10. 
  
  
  
  
    11.     <% } %>
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.   
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. <% } %> 
    6.

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

 
 
 
 
    
  
  
  
  
  1. {{#if list.length}}
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.   
      
  
  
  
  
    1. 
  
  
  
  
    2.     {{#each list item}}
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.       
    5. 
  
  
  
  
    6. 
  
  
  
  
    7.         {{ item }}
      8. 
  
  
  
  
    8. 
  
  
  
  
    9.       
      10. 
  
  
  
  
    10. 
  
  
  
  
    11.     {{/each}}
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.   
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. {{/if}} 
    6.

屬性綁定風格：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.       {{item}}
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.   
    8. 
  
  
  
  
  8. 
  
  
  
  
 

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

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

 
 
 
 
    
  
  
  
  
  1. function format(str, object) {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     var array = Array.prototype.slice.call(arguments, 1);
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     return str.replace(/\\?\#{([^{}]+)\}/gm, function(match, name) {
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.         if (match.charAt(0) == '\\')
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.             return match.slice(1);
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.         var index = Number(name)
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.         if (index >= 0)
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.             return array[index];
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.         if (object && object[name] !== void 0)
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.             return  object[name];
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.         return  '';
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.     });
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. } 
    26.

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

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

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

大抵是這樣

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

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

 
 
 
 
    
  
  
  
  
  1. var array = ['return ']
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. array.push('你好,我的名字叫'）
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. array.push(data.name)
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. array.push(', 今年已經(jīng)')
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. array.push(data.info.age)
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. array.push( '歲了')
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. var render = new Function('data', array.join('+')) 
    14.

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

 
 
 
 
    
  
  
  
  
  1. function tokenize(str) {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     var openTag = '<%'
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     var closeTag = '%>'
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     var ret = []
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.     do {
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.         var index = str.indexOf(openTag)
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.         index = index === -1 ? str.length : index
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.         var value = str.slice(0, index)
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.         //抽取{{前面的靜態(tài)內(nèi)容
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.         ret.push({
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.             expr: value,
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.             type: 'text'
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.         })
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.         //改變str字符串自身
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.         str = str.slice(index + openTag.length)
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.         if (str) {
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.             index = str.indexOf(closeTag)
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.             var value = str.slice(0, index)
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.             //抽取{{與}}的動態(tài)內(nèi)容
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.             ret.push({
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.                 expr: value.trim(),//JS邏輯兩旁的空白可以省去
    42. 
  
  
  
  
  42. 
  
  
  
  
  43.                 type: 'js'
    44. 
  
  
  
  
  44. 
  
  
  
  
  45.             })
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.             //改變str字符串自身
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.             str = str.slice(index + closeTag.length)
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.         }
    52. 
  
  
  
  
  52. 
  
  
  
  
  53.     } while (str.length)
    54. 
  
  
  
  
  54. 
  
  
  
  
  55.     return ret
    56. 
  
  
  
  
  56. 
  
  
  
  
  57. }
    58. 
  
  
  
  
  58. 
  
  
  
  
  59. console.log(tokenize(tpl)) 
    60.

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

 
 
 
 
    
  
  
  
  
  1. function render(str) {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.      var tokens = tokenize(str)
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.      var ret = []
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.      for (var i = 0, token; token = tokens[i++]; ) {
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.          if (token.type === 'text') {
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.              ret.push('"' + token.expr + '"')
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.          } else {
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.              ret.push(token.expr)
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.          }
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.      }
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.      console.log("return "+ ret.join('+'))
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. } 
    24.

打印出來如下

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

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

 
 
 
 
    
  
  
  
  
  1. var quote = JSON.stringify//自己到第二章找完整函數(shù)
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. var rident = /[$a-zA-Z_][$a-zA-Z0-9_]*/g
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. var rproperty = /\.\s*[\w\.\$]+/g
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. var number = 1
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. var rfill = /\?\?\d+/g
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. var stringPool = {}
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. function dig(a) {
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.      var key = '??' + number++
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.      stringPool[key] = a
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.      return key
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. }
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. function fill(a) {
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.      return stringPool[a]
    26. 
  
  
  
  
  26. 
  
  
  
  
  27. }
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. function render(str) {
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.      stringPool = {}
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.      var tokens = tokenize(str)
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.      var ret = []
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.      for (var i = 0, token; token = tokens[i++]; ) {
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.          if (token.type === 'text') {
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.              ret.push(quote(token.expr))
    42. 
  
  
  
  
  42. 
  
  
  
  
  43.          } else {
    44. 
  
  
  
  
  44. 
  
  
  
  
  45.              // 先去掉對象的子級屬性,減少干擾因素
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.              var js = token.expr.replace(rproperty, dig)
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.              js = js.replace(rident, function (a) {
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.                  return 'data.' + a
    52. 
  
  
  
  
  52. 
  
  
  
  
  53.              })
    54. 
  
  
  
  
  54. 
  
  
  
  
  55.              js = js.replace(rfill, fill)
    56. 
  
  
  
  
  56. 
  
  
  
  
  57.              ret.push(js)
    58. 
  
  
  
  
  58. 
  
  
  
  
  59.          }
    60. 
  
  
  
  
  60. 
  
  
  
  
  61.      }
    62. 
  
  
  
  
  62. 
  
  
  
  
  63.      console.log("return " + ret.join('+'))
    64. 
  
  
  
  
  64. 
  
  
  
  
  65. }
    66. 
  
  
  
  
  66. 
  
  
  
  
  67. render(tpl) 
    68.

輸出為

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

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

 
 
 
 
    
  
  
  
  
  1. function render(str){
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.  //略。。。
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     return new Function("data", "return " + ret.join('+'))
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.  }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.  var fn = render(tpl)
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.  console.log(fn+"")
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.  console.log(fn(data)) 
    14.

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

 
 
 
 
    
  
  
  
  
  1. var tpl = '你好,我的名字叫<%name%>, 今年已經(jīng) <%info.age%>歲了,喜歡<% for(var i = 0, el; el = list[i++];){%><% el %><% } %>'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. var data = {
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.      name: "司徒正美",
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.      info: {
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.          age: 20
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.      },
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.      list: ["蘋果","香蕉","雪梨"]
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. } 
    16.

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

 
 
 
 
    
  
  
  
  
  1. value = value.trim()
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. if (/^(if|for|})/.test(value)) {
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     ret.push({
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.         expr: value,
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.         type: 'logic'
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     })
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. } else {
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.     ret.push({
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.         expr: value,
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.         type: 'js'
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.     })
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. } 
    24.

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

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

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

 
 
 
 
    
  
  
  
  
  1. function addPrefix(str) {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.    // 先去掉對象的子級屬性,減少干擾因素
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.    var js = str.replace(rproperty, dig)
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.    js = js.replace(rident, function (a) {
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.        return 'data.' + a
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.    })
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.    return js.replace(rfill, fill)
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. }
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. function addView(s) {
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.    return '__data__.push(' + s + ')'
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. }
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. function render(str) {
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.     stringPool = {}
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     var tokens = tokenize(str)
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.     var ret = ['var __data__ = []']
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.     tokens.forEach(function(token){
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.        if (token.type === 'text') {
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.            ret.push(addView(quote(token.expr)))
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.        } else if (token.type === 'logic') {
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.            //邏輯部分都經(jīng)過addPrefix方法處理
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.            ret.push(addPrefix(token.expr))
    42. 
  
  
  
  
  42. 
  
  
  
  
  43.        } else {
    44. 
  
  
  
  
  44. 
  
  
  
  
  45.            ret.push(addView(addPrefix(token.expr)))
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.        }
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.     })
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.     ret.push("return __data__.join('')")
    52. 
  
  
  
  
  52. 
  
  
  
  
  53.     console.log( ret.join('\n'))
    54. 
  
  
  
  
  54. 
  
  
  
  
  55.   }
    56. 
  
  
  
  
  56. 
  
  
  
  
  57. var fn = render(tpl) 
    58.

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

 
 
 
 
    
  
  
  
  
  1. var __data__ = []
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. __data__.push("你好,我的名字叫")
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. __data__.push(data.name)
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. __data__.push(", 今年已經(jīng) ")
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. __data__.push(data.info.age)
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. __data__.push("歲了,喜歡")
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. data.for(data.var data.i = 0, data.el; data.el = data.list[data.i++]){
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. __data__.push("")
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. __data__.push(data.el)
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. __data__.push(" ")
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. }
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. return __data__.join('') 
    24.

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

先看***種：

 
 
 
 
    
  
  
  
  
  1. function render(str) {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.      stringPool = {}
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.      var tokens = tokenize(str)
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.      var ret = ['var __data__ = [];', 'with(data){']
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.      for (var i = 0, token; token = tokens[i++]; ) {
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.          if (token.type === 'text') {
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.              ret.push(addView(quote(token.expr)))
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.          } else if (token.type === 'logic') {
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.              ret.push(token.expr)
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.          } else {
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.              ret.push(addView(token.expr))
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.          }
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.      }
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.      ret.push('}')
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.      ret.push('return __data__.join("")')
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.      return new Function("data", ret.join('\n'))
    32. 
  
  
  
  
  32. 
  
  
  
  
  33. }
    34. 
  
  
  
  
  34. 
  
  
  
  
  35. var fn = render(tpl)
    36. 
  
  
  
  
  36. 
  
  
  
  
  37. console.log(fn + "")
    38. 
  
  
  
  
  38. 
  
  
  
  
  39. console.log(fn(data)) 
    40.

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

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

 
 
 
 
    
  
  
  
  
  1. var tpl = '你好,我的名字叫<%@name%>, 今年已經(jīng) <%@info.age%>歲了,喜歡<% for(var i = 0, el; el = @list[i++];){%><% el%> <% } %>'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. var rguide = /(^|[^\w\u00c0-\uFFFF_])(@|##)(?=[$\w])/g
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. function addPrefix(str) {
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.      return str.replace(rguide, '$1data.')
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. }
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. function render(str) {
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.      stringPool = {}
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.      var tokens = tokenize(str)
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.      var ret = ['var __data__ = [];']
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.      for (var i = 0, token; token = tokens[i++]; ) {
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.          if (token.type === 'text') {
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.              ret.push(addView(quote(token.expr)))
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.          } else if (token.type === 'logic') {
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.              //邏輯部分都經(jīng)過addPrefix方法處理
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.              ret.push(addPrefix(token.expr))
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.          } else {
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.              ret.push(addView(addPrefix(token.expr)))
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.          }
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.      }
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.     
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.      ret.push('return __data__.join("")')
    42. 
  
  
  
  
  42. 
  
  
  
  
  43.      return new Function("data", ret.join('\n'))
    44. 
  
  
  
  
  44. 
  
  
  
  
  45. }
    46. 
  
  
  
  
  46. 
  
  
  
  
  47. var fn = render(tpl)
    48. 
  
  
  
  
  48. 
  
  
  
  
  49. console.log(fn + "")
    50. 
  
  
  
  
  50. 
  
  
  
  
  51. console.log(fn(data)) 
    52.

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

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

 
 
 
 
    
  
  
  
  
  1. //tokenize方法
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. if (value.charAt(0) === '=') {
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.      ret.push({
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.          expr: value,
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.          type: 'js'
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.      })
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. } else {
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.      ret.push({
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.          expr: value,
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.          type: 'logic'
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.      })
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. } 
    24.

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

 
 
 
 
    
  
  
  
  
  1. if (value.charAt(0) === '#') {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     if (value === '#eachEnd' || value === '#ifEnd') {
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.         ret.push({
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.             expr: '}',
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.             type: 'logic'
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.         })
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     } else if (value.slice(0, 4) === '#if ') {
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.         ret.push({
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.             expr: 'if(' + value.slice(4) + '){',
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.             type: 'logic'
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.         })
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.     } else if (value.slice(0, 6) === '#each ') {
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.         var arr = value.slice(6).split(' in ')
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.         var arrayName = arr[1]
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.         var args = arr[0].match(/[$\w_]+/g)
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.         var itemName = args.pop()
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.         var indexName = args.pop() || '$index'
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.         value = ['for(var ', ' = 0;', '<' + arrayName + '.length;', '++){'].join(indexName) +
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.                 '\nvar ' + itemName + ' = ' + arrayName + '[' + indexName + '];'
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.         ret.push({
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.             expr: value,
    42. 
  
  
  
  
  42. 
  
  
  
  
  43.             type: 'logic'
    44. 
  
  
  
  
  44. 
  
  
  
  
  45.         })
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.     
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.     }
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.     
    52. 
  
  
  
  
  52. 
  
  
  
  
  53. } else{
    54. 
  
  
  
  
  54. 
  
  
  
  
  55.    //...
    56. 
  
  
  
  
  56. 
  
  
  
  
  57. }
    58.

 對應的模板改成

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

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

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


名稱欄目：前端模板的原理與實現(xiàn)
地址分享：http://www.5511xx.com/article/cdcsogp.html