JavaScript中的模板引擎如何工作？

Question

請你解釋一下，JavaScript中的模板引擎如何工作？謝謝。

JSON

{ "color" : "red"} 

模板

<strong><%=color%></strong> 

結果

<strong>Red</strong> 

Answer 1

它們可以通過執行有所不同，但一個你在談論看起來像它的工作原理通過執行以下操作：

1. 解析尋找關鍵的頁面中<%= %>標籤

2. 匹配的JSON的關鍵鍵/值對

3. 用值替換標籤/鍵。

Answer 2

作爲一個起點，我會建議你給看看到String.prototype.replace方法和專門使用它的回調函數：

function replaceTokens(str, replacement) { 
    return str.replace(/<\%=([^%>]+)\%>/g, function (str, match) { 
    return replacement[match]; 
    }); 
} 

var input = "<strong><%=color%></strong>"; 
replaceTokens(input, { "color" : "Red"}); 
// returns <strong>Red</strong> 

replaceTokens("<%=var1%> <%=var2%>", { "var1" : "Hello", "var2": "world!"}); 
// returns "Hello world!" 

給看看這些文章：

• Search and Don't Replace
• John Resig's Micro-Templating Engine
• Better JavaScript Templates（JSP語法類似）
• jQuery Templates Proposal

Answer 3

這不是從其他模板解決方案非常不同的（在概念層面）。

{ "color" : "red"} 

指定color屬性與價值red。

<strong><%=color%></strong> 

意思是「只要我有<%=color%>使用的color價值。基於綠洲省你擁有的模板引擎可能走DOM，並發現有匹配<%=somestring%>該值的節點，然後，它會檢查是否還有就是somestring值相匹配的屬性，如果有一個，它在JSON（在這種情況下是red）中定義的值替換的<%=somestring%>值

這次終於給你：。

<strong>Red</strong>