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

Question

能否请您解释一下,JavaScript中的模板引擎如何工作？谢谢.

JSON

{ "color" : "red"}

模板

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

结果

<strong>Red</strong>

Answer 1

作为一个起点,我建议你看一下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!"

看看这些文章:

• 搜索并不要替换
• John Resig的微型模板引擎
• 更好的JavaScript模板(类似JSP的语法)
• jQuery模板提案

Answer 2

它们可能因实现而异，但您所讨论的看起来可以通过执行以下操作来实现：

1. 解析页面寻找<%= %>标签中的键

2. 将键与 JSON 中的键/值对进行匹配

3. 将标签/键替换为值。