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>