0

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

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

如果你举这个简单的例子。

//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 中使用带有模板语法的脚本标签是不可能的，我并不特别希望模板作为外部文件，我需要执行额外的请求读。

请教育我！

4

3 回答 3

6

好吧，只是比较：

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>

哪个看起来更易于维护？

演示

于 2012-12-18T00:20:20.503 回答
1

通过使用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);
});

另一个有用且相关的问题：如何使用dustjs-linkedin 作为客户端模板？

于 2012-12-18T08:58:34.210 回答
0

在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>"s 的情况下更容易阅读

您可以使用以下方法渲染它：

var output = Mustache.render($("sb").html(), data);
$("#destination").html(output);
于 2012-12-18T00:23:36.637 回答