Question

这是我第一次涉及客户端模板，我想确保我理解它并正确使用它。阅读this LinkedIn engineering blog后，我决定选择dust.js而不是mustache或handlebars。请注意，this stackoverflow post回答了我的许多问题，但我还有一些我想澄清的事情。

在我工作的环境中，我无法访问服务器端的任何内容，因此我创建的所有内容都必须能够完全在客户端的浏览器中运行。对于此示例，我将尝试从this code sample重新创建LinkedIn Dust Tutorial。

我包含 dust-full.js 而不是 dust-core.js 因为我要动态编译模板：

<script src="js/dust-full.js"></script>

这是HTML：

<script id="entry-template">
{title}

<ul>
    {#names}
    <li>{name}</li>{~n}
    {/names}
</ul>
</script>

<div id="output"></div>

JavaScript（使用jQuery）：

$(document).ready(function () {
    var data = {
        "title": "Famous People", 
        "names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
    }

    var source   = $("#entry-template").html();
    var compiled = dust.compile(source, "intro");
    dust.loadSource(compiled);

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

这似乎工作正常，您可以在this jsfiddle中看到。

几个问题：

为什么模板应该包含在脚本标记中？为什么不将它包含在id =＆＃34; entry-template＆＃34;的div中。然后在dust.render（）中替换内部的html，就像在this modified fiddle中一样？
＆＃34; dust.loadSource（已编译）; ＆＃34;做？在the docs中，它说＆＃34;如果您包含“已编译的”＃39;字符串作为您加载的JS脚本块的一部分，然后是＆＃39; intro＆＃39;模板将被定义和注册。如果您想立即执行此操作，请调用它，但我不明白这意味着什么。我注意到，如果我删除该行，那么它不起作用，所以我想理解它。
在我对我的模板感到满意并完成它之后，我应该如何编译它以便我导入较轻的 dust-core.js 而不是由它编译每个页面上的浏览器加载？这样做是否有显着的优势，或者我应该像 dust-full.js 一样离开？
更一般地说，这看起来像是一个适当/有用的方法来实现灰尘（或任何模板框架）或者我离开某个地方？

提前致谢。

Answer 1

如果您将其放在div中，标记将在页面加载后立即呈现，并包含粉尘{placeholder}语法。然后，一旦客户端呈现发生，它将突然被完全呈现的内容替换。在一个简单的例子中，这可能发生得如此之快，你没有注意到它。但是，根据下载模板所需的时间，尘埃JS库，获取JSON（如果它尚未嵌入页面），浏览器的JS性能以及页面上发生的其他事情，此开关可能对用户来说非常明显，这不是一个好的体验。
编译灰尘模板时，输出为包含JavaScript函数的String。它看起来像：

（function（）{dust.register（“intro”，body0）; function body0（chk，ctx）{/ * [...] * /}}）（）;

当你将这个字符串传递给dust.loadSource时，所有它都是eval它，执行这个自调用函数。结果是dust.register调用执行，它将body0函数与intro中的名称dust.cache相关联。之后，每当您致电dust.render("intro"...)时，灰尘会在intro中查找dust.cache模板并执行与之关联的功能。
将dust.compile的输出存储在.js文件中，例如上面示例中的intro.js。然后，您可以在页面上包含dust-core.js和intro.js，就像其他任何JavaScript文件一样（例如在script tags或通过加载程序）。
通常，您将每个灰尘模板存储在单独的文件中，例如intro.tl并使用某种构建系统（例如http://gruntjs.com/）自动将其编译为.js每次更改时都会生成文件。然后，将所有生成的.js文件连接到一个文件中（grunt也可以这样做）并将其加载到script标记的页面上。

Answer 2

您不必在脚本标记中包含模板，第二种方式更好。
loadSource将运行模板的编译输出，其中包括注册它以便其他模板和dust.render可以通过其名称引用编译的输出链（在本例中为“intro”）。
这涉及在打开浏览器之前预先编译模板。因此，您可能有一个文件夹，其中包含所有模板作为.tl文件。在某些构建步骤中，您将编译所有这些模板（使用dust.compile）并将输出保存为.js文件。然后浏览器实际上会加载那些.js文件。这也消除了对dust.loadSource的需求。这里的优点是不必包含编译器和解析器，它们可以添加大约3000行代码。灰尘库大小从4000行代码到800行代码。编辑：另外，正如您所提到的，您不是在浏览器中动态编译模板，因此这也将是一个巨大的性能提升。
我会说除了错过上面提到的构建步骤之外，你走的是正确的道路。

使用Dust.js进行客户端模板化的基本示例

2 个答案: