JavaScript模板,为什么这么棒？

Question

我一直在研究像temp.js这样的JavaScript模板库以及像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中的模板语法的脚本标签不在桌面上,我不特别希望模板作为外部文件我需要执行额外的请求读.

请教育我!

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>

哪个看起来更易于维护？

演示