JavaScript模板，为什么这么好？

我一直在研究JavaScript模板库，比如dust.js和其他更广泛的库，比如canJS

在我工作的地方，几乎99%的应用程序/站点都是在客户端完成的。目前，我只是构建html字符串，注入dom，监听点击/操作，执行ajax，从结果构建更多html字符串，然后注入dom，等等

如果你这么简单

通过模板化可以以什么方式改进这一点？从我所看到的情况来看，我必须适应一种特定的模板语法，这种语法并不比上面提到的更容易阅读或维护。对于复杂的布局，或者在列表中有递归列表而不知道它可能会达到多少级别的场景，该怎么办。我觉得模板语法/引擎在某些情况下可能是一个限制因素

我认为完全从JS中提取html很好，但是假设在html中使用带有模板语法的脚本标记是不可能的，我并不特别希望模板作为外部文件，我需要执行额外的读取请求

请教育我

好吧，比较一下：

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>");
sb.append("<p>Occupation: " + data.occupation + "</p>");
sb.append("<h3>A list of things</h3>");
sb.append("<ul>");
for (var i = 0; i < data.things.length; i++) {
    sb.append("<li>" + data.things[i] + "</li>");
}
sb.append("</ul>");

到

你觉得哪个更容易维护

在此模板中：

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>");
sb.append("<p>Occupation: " + data.occupation + "</p>");
sb.append("<h3>A list of things</h3>");
sb.append("<ul>");
for (var i = 0; i < data.things.length; i++) {
    sb.append("<li>" + data.things[i] + "</li>");
}
sb.append("</ul>");

---

通过使用dust.js，您可以创建如下所示的模板文件：

<h1>{fname} {lname}</h1>
<p>Occupation: {occupation}</p>
<h3>Friends list:</h3>
<ul>
  {#friends}
  <li>{name} {age}</li>
  {/friends}
</ul>

要呈现模板，只需调用dust.render并传递模板名称以及JSON对象和回调函数：

dust.render('template_name', data, function(err, out){
  $("#output").html(out);
});

---

另一个有用且相关的问题：

我认为EJS或Jade是您最好的选择。他们有客户端和服务器支持。你所做的已经是一种模板形式。我认为这个问题是厌恶新事物的一个主要例子。我认为OP并不是那么容易被说服：@fencliff是的，我想你必须非常固执才能不被说服。。此语法支持随时插入任意javascript，助手函数、导入/导出，以及javascript中的所有控制结构，其中@foreach是必需的附加项。谢谢，在我的搜索中没有遇到attemplate。一下子，它看起来就像是可以战胜我的固执的东西。template.fromString非常适合我，正如我所说，在DOM本身中可能并不总是可以有模板。此外，模板语法比我见过的任何其他语法都要干净得多。@Fergal我可能应该提到它是我的库，我有一段时间没有接触过它，我的意思是我确实在生产中使用过它，但也有一些问题，比如必须手动使用html转义表达式，即@htmlEncodesomething，但无法使用；在一段时间内。不过，文档中提到了这两个方面。

<script id="sb">
    <h1>{{fname}} {{lname}}</h1>
    <p>Occupation: {{occupation}}</p>
    <h3>A list of things</h3>
    <ul>
    {{#things}}
        <li>{{.}}</li>
    {{/things}}
    </ul>

</script>

var output = Mustache.render($("sb").html(), data);
$("#destination").html(output);

<h1>{fname} {lname}</h1>
<p>Occupation: {occupation}</p>
<h3>Friends list:</h3>
<ul>
  {#friends}
  <li>{name} {age}</li>
  {/friends}
</ul>

var data = {
  fname: "Joe",
  lname: "Doe",
  occupation: "Developer",
  friends: [
    {
      name: "Moe",
      age: 37 
    },
    { 
      name: "Larry",
      age: 39
    },
    {
      name: "Curly",
      age: 35
    }
  ]
}

dust.render('template_name', data, function(err, out){
  $("#output").html(out);
});