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!"

看看这些文章：

Answer 2

它们可能因实施而异，但您正在谈论的那个看起来像是通过执行以下操作：

解析页面，查找<%= %>标记
将密钥与JSON
将值/键替换为值。

Answer 3

与其他模板解决方案（概念层面）没有太大区别。

{ "color" : "red"}

指定值为color的{{1}}属性。

red

表示“使用<strong><%=color%></strong>的值color。基于您所拥有的，模板引擎可能会遍历DOM并查找值与<%=color%>匹配的节点然后，它检查是否存在与<%=somestring%>值匹配的属性。如果有，则将somestring的值替换为JSON中定义的值（在本例中为是<%=somestring%>）。

这最终会给你：

red

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

3 个答案: