Question

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

在我工作的地方，我们在客户端做了近99％的任何应用程序/站点。目前我只是构建html字符串，注入dom，监听点击/操作，执行ajax，从结果中构建更多html字符串并注入dom等等。

如果你采用这个简单的example。

//stringbuilder
function StringBuilder(e){this.strings=new Array("");this.append(e)}StringBuilder.prototype.append=function(e){if(e){this.strings.push(e)}};StringBuilder.prototype.clear=function(){this.strings.length=1};StringBuilder.prototype.toString=function(){return this.strings.join("")}

var data = {
    fname: "Joe",
    lname: "Doe",
    occupation: "Developer",
    things: ["some", "list", "of", "things"]
}

var sb = new StringBuilder();

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>");

$("#output").html(sb.toString());

以什么方式可以通过模板改进？从我所看到的，我将不得不适应一种特定的模板语法，这种语法与上述相比不易于阅读或维护。那么复杂的布局，或者你有递归的场景（列表中的列表，而不知道它可能有多少级别）。在某些情况下，我觉得模板语法/引擎是一个限制因素。

我认为将这个html完全从JS中删除是很好的，但是让我们说使用HTML中的模板语法的脚本标签不在桌面上，我不特别希望模板作为我需要执行的外部文件额外的阅读请求。

请教育我！

Answer 1

好吧，只需比较一下：

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>");

要

<h1>@fname @lname</h1>
<p>Occupation: @occupation</p>
<h3>A list of things</h3>
<ul>
    @foreach( thing in things ) {
        <li>@thing</li>
    }
</ul>

哪种看起来更易于维护？

demo

Answer 2

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

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

您的JSON数据：

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以及JSON对象和回调函数：

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

另一个有用且相关的问题：how to use dustjs-linkedin as client side templating?

Answer 3

在Mustache.js此模板中：

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>");

移动到DOM，在IDE中看起来像这样：

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

</script>

它将在IDE中保持代码突出显示，并且在没有"<div>"的情况下更容易阅读

使用以下方式渲染：

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

JavaScript模板，为什么这么棒？

3 个答案: