前端模板的原理與實現

發表於2016-09-26

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

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

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

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

https://github.com/janl/musta…
基於JavaScript的Logic-less（無邏輯或輕邏輯）模板。

https://github.com/twitter/ho…
上面的優化版，twitter出品

https://github.com/wycats/han…
完全相容mustcache的語法

https://github.com/paularmstr…
擁有更強悍的模板繼承與block 重寫功能

https://github.com/mozilla/nu…
跟django的模板系統相似，可以說swig的升級版，是gitbook的御用前端模板

其它推薦的還有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風格：

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

<% 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}}

<ol>

<li>

</li>

</ol>

屬性繫結風格：

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

</li>

</ol>

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

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

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

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

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

var tpl = '你好,我的名字啊<%name%>, 今年已經 <%info.age%>歲了'

var data = {

name: "司徒正美",

age: 20

}

大抵是這樣

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

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

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

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

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

這就得區分靜態內容與為變數前加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)
        //抽取{{前面的靜態內容
        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))

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))

然後通過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('+'))
 }

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+", 今年已經 "+info.age+"歲了"

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

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

 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)

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)

輸出為

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

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

最後，我們修改一下後面兩行，得到我們夢魅以求的渲染函式，它的實現過程比format方法複雜多了，但卻是所有擴充套件性極強的前端模板的一般實現過程。

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

function render(str){

//略。。。

return new Function("data", "return " + ret.join('+'))

}

var fn = render(tpl)

console.log(fn+"")

console.log(fn(data))

我們再看一下如何引入迴圈語句，比如將上面的模板與資料改成這樣

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

var tpl = '你好,我的名字叫<%name%>, 今年已經 <%info.age%>歲了,喜歡<% for(var i = 0, el; el = list[i++];){%><% el %> <% } %>'

var data = {

name: "司徒正美",

info: {

age: 20

list: ["蘋果","香蕉","雪梨"]

}

這時我們就新增一種新的型別，不輸出到頁面的動態內容。這在token方法中做一些修改

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

value = value.trim()

if (/^(if|for|})/.test(value)) {

ret.push({

expr: value,

type: 'logic'

})

} else {

ret.push({

expr: value,

type: 'js'

})

}

但render方法怎麼修改好呢，顯示這時繼續用＋已經不行了，否則下場是這樣

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

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

這時，我們需要借用陣列，將要輸入的資料（text, js型別）放進去，logic型別不放進去。

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') {
           //邏輯部分都經過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)

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') {

//邏輯部分都經過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)

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

var __data__ = []
__data__.push("你好,我的名字叫")
__data__.push(data.name)
__data__.push(", 今年已經 ")
__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('')

var __data__ = []

__data__.push("你好,我的名字叫")

__data__.push(data.name)

__data__.push(", 今年已經 ")

__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('')

但即使我們處理掉關鍵字與保留字，對於中間生成i, el怎麼區分呢？是區分不了。於是目前有兩種方法，一是使用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))

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減少替換工作。

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

 var tpl = '你好,我的名字叫<%@name%>, 今年已經 <%@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') {
             //邏輯部分都經過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))

var tpl = '你好,我的名字叫<%@name%>, 今年已經 <%@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') {

//邏輯部分都經過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))

第二種比第一種的優勢在於，效能更高，並且避開es5嚴格模式的限制。

我們再認真思考一下，其實迴圈語句與條件語句，不單是for, if兩個，還有while, do while, else什麼。因此這需要優化。這也有兩種方法，新增更多語法符合，比如上面所說的=就是輸出，沒有則不輸出。這是ASP/JSP/PHP等模板採用的手段：

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

//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{
   //...
}

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{

//...

}

對應的模板改成

var tpl = '你好,我的名字叫<%@name%>, 今年已經 <%@info.age%>歲了,喜歡<%#each el in <a href="http://www.jobbole.com/members/wx1825862276">@list</a> %><% el %> <% #eachEnd %>'
var fn = render(tpl)
console.log(fn + "")
console.log(fn(data))

var tpl = '你好,我的名字叫<%@name%>, 今年已經 <%@info.age%>歲了,喜歡<%#each el in <a href="http://www.jobbole.com/members/wx1825862276">@list</a> %><% el %> <% #eachEnd %>'

var fn = render(tpl)

console.log(fn + "")

console.log(fn(data))

可能有人覺#for, #forEnd這樣的語法糖比較醜，無問題，這個可以改，主要我們的tokenize方法足夠強大，就能實現mustache這樣的模板引擎。但所有模板引擎也基本上是這麼實現的，有的還支援過濾器，也就是在js 型別的語句再進行處理，將｜後面的字元器再切割出來。

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

前端模板引擎的實現總結
2018-07-05
前端
前端路由的實現原理
2019-07-26
前端路由
C++標準模板庫(STL)迭代器的原理與實現
2020-12-09
C++
ES6模板字串的實現原理
2018-05-20
字串
前端路由實現原理
2018-03-02
前端路由
前端路由的原理和實現
2019-04-28
前端路由
前端路由實現原理（history）
2018-07-08
前端路由
堆的原理與實現
2021-09-21
【效能優化】quicklink：實現原理與給前端的啟發
2018-12-25
優化UI前端
JavaScript模板引擎的應用場景及實現原理
2014-10-30
JavaScript
富集分析的原理與實現
2021-10-29
jsonp的原理與實現
2016-12-01
JSON
Projective Texture的原理與實現
2013-10-24
Project
Lombok 原理與實現
2021-12-29
Lombok
LRU原理與實現
2017-08-31
前端效能優化原理與實踐
2018-10-24
前端優化
前端路由原理解析和實現
2019-05-13
前端路由
前端動畫實現以及原理淺析
2022-05-19
前端動畫
前端資料渲染及mustache模板引擎的簡單實現
2021-04-30
前端
【煉丹Trick】EMA的原理與實現
2022-07-10
熔斷原理與實現
2020-10-26
@weakify 與 @strongify 實現原理
2022-03-20
前端 JS 安全對抗原理與實踐
2023-12-26
前端JS
康擴充開的原理與實現
2021-04-30
AQS與JUC中的鎖實現原理
2018-08-31
AQS
直播特效的實現原理與難點
2018-04-02
特效
Kalman濾波器的原理與實現
2024-04-13
Redis核心原理與實踐--列表實現原理之ziplist
2021-09-16
Redis
memcached分散式原理與實現
2019-02-28
分散式
vysor原理與程式碼實現
2018-12-25
React基礎與原理實現
2020-11-22
React
Flink原理與實現：SessionWindow
2016-11-24
Session
解析 iOS 動畫原理與實現
2016-03-15
iOS動畫
前端響應式佈局原理與實踐
2020-03-06
前端
前端模板引擎Handlebars理解與舉例
2018-07-29
前端
服務註冊與發現的原理和實現
2021-09-12
Spring方法注入的使用與實現原理
2020-05-13
Spring
Redis分散式鎖的使用與實現原理
2020-11-21
Redis分散式

前端模板的原理與實現

相關文章