這篇文章主要講解了“web前端模板的原理與實(shí)現(xiàn)方法是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“web前端模板的原理與實(shí)現(xiàn)方法是什么”吧！

阜寧ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！

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

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

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

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

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

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

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

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

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

完全兼容mustcache的語(yǔ)法

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

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

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

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

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

其他doT, xtempalate， Underscore Templates。

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

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

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

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

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

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

{{#if list.length}}   
     {{#each list item}}       
         {{ item }}       
     {{/each}}   
 {{/if}}

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

          {{item}}    

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

我們?cè)賮?lái)看如何實(shí)現(xiàn)前端模板。前端模板的本質(zhì)就是一個(gè)可以轉(zhuǎn)換函數(shù)(渲染函數(shù))的字符串。渲染函數(shù)放進(jìn)一個(gè)充滿(mǎn)數(shù)據(jù)的對(duì)象后，還原為一個(gè)全新的字符串。因此重點(diǎn)是如何構(gòu)建一個(gè)渲染函數(shù)。最簡(jiǎn)單的方式是正則，還記得第二章的format方法嗎，這就是一個(gè)輕型的填充數(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方法是通過(guò)#{  }來(lái)劃分靜態(tài)內(nèi)容與動(dòng)態(tài)內(nèi)容的，一般來(lái)說(shuō)它們稱(chēng)之為定界符(delimiter)。#{為前定界符，}為后界符，這個(gè)#{}其實(shí)是ruby風(fēng)格的定界符。通常的定界符是<%與%>，{{與}}  。通常在前定界符中還有一些修飾符號(hào)，比如=號(hào)，表示這個(gè)會(huì)輸出到頁(yè)面，-號(hào)，表示會(huì)去掉兩旁的空白。

將下例，要編譯成一個(gè)渲染函數(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ù)組來(lái)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.前綴。這一步可以用正則來(lái)做，也可以用純字符串。我們?cè)囈幌录冏址绞?。假令前定界符為openTag，后定界符為closeTag，通過(guò)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)             //抽取{{與}}的動(dòng)態(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))

然后通過(guò)render方法將它們拼接起來(lái)。

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

打印出來(lái)如下

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

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

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

輸出為

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

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

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

我們?cè)倏匆幌氯绾我胙h(huán)語(yǔ)句，比如將上面的模板與數(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: ["蘋(píng)果","香蕉","雪梨"]  }

這時(shí)我們就添加一種新的類(lèi)型，不輸出到頁(yè)面的動(dòng)態(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方法怎么修改好呢，顯示這時(shí)繼續(xù)用+已經(jīng)不行了，否則下場(chǎng)是這樣

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

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

function addPrefix(str) {    // 先去掉對(duì)象的子級(jí)屬性,減少干擾因素    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)過(guò)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方法出問(wèn)題，我們應(yīng)該過(guò)濾掉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)鍵字與保留字，對(duì)于中間生成i, el怎么區(qū)分呢?是區(qū)分不了。于是目前有兩種方法，一是使用with，  這時(shí)我們就不需要加data.前綴。第二種引入新的語(yǔ)法。比如，前面是@就替換為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方法可以減少許多代碼。相對(duì)應(yīng)，模板也要改動(dò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)過(guò)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)勢(shì)在于，性能更高，并且避開(kāi)es5嚴(yán)格模式的限制。

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

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

另一種，使用語(yǔ)法糖，如#each (el, index) in @list , '#eachEnd', '#if  ','#ifEnd'。還是改動(dòng)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{    //... }

對(duì)應(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))

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

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

感謝各位的閱讀，以上就是“web前端模板的原理與實(shí)現(xiàn)方法是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)web前端模板的原理與實(shí)現(xiàn)方法是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！