JavaScript中的模板引擎如何工作? [英] How do templating engines in JavaScript work?

问题描述

请您解释一下，JavaScript中的模板引擎如何工作?谢谢.

Could you please explain me, how do templating engines in JavaScript work? Thank you.

JSON

{ "color" : "red"}

模板

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

结果

<strong>Red</strong>

推荐答案

作为起点，我建议您看一下 String.prototype.replace 方法，特别是使用其回调函数:

As a starting point I would recommend you to give a look to the String.prototype.replace method and specially using its callback function:

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模板提案

• Search and Don't Replace
• John Resig's Micro-Templating Engine
• Better JavaScript Templates (JSP-like syntax)
• jQuery Templates Proposal

这篇关于JavaScript中的模板引擎如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！