19

这是我第一次涉足客户端模板，我想确保我理解并正确使用它。在阅读了这个 LinkedIn 工程博客之后，我决定使用dust.js而不是mustache或handlebars。请注意，这篇 stackoverflow 帖子回答了我的许多问题，但我仍然有一些事情要澄清。

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

我包含了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);
    });
});

正如您在这个 jsfiddle中看到的那样，这似乎工作正常。

几个问题：

  1. 为什么模板应该包含在脚本标签中？为什么不将其包含在 id="entry-template" 的 div 中，然后在dust.render() 期间替换其中的html，就像在这个修改过的小提琴中一样？

  2. “ dust.loadSource(compiled); ”有什么作用？在文档中它说“如果您将 'compiled' 字符串作为加载的 JS 脚本块的一部分包含在内，则将定义并注册 'intro' 模板。如果您想立即执行此操作”，请调用它，但是我不明白那是什么意思。我注意到，如果我删除该行，那么它就不起作用，所以我想了解它。

  3. 在我对我的模板感到满意并完成它之后，我应该如何编译它以便我导入更轻的dust-core.js，而不是让浏览器在每次加载页面时对其进行编译？这样做是否有显着优势，或者我应该像这样使用dust-full.js吗？

  4. 更一般地说，这看起来像是实现灰尘（或任何模板框架）的合适/有用的方式，还是我只是在某个地方？

提前致谢。

4

2 回答 2

11

  1. 如果将它放在 a 中div，则标记将在页面加载后立即呈现，并且包含灰尘{placeholder}语法。然后，一旦客户端渲染发生，它会突然被完全渲染的内容所取代。在一个简单的示例中，这可能发生得如此之快，以至于您不会注意到它。但是，根据下载模板、灰尘 JS 库、获取 JSON（如果它尚未嵌入页面中）、浏览器的 JS 性能以及页面上发生的其他事情需要多长时间，此开关可能对用户来说非常明显，这不是一个好的体验。

  2. 编译灰尘模板时，输出是包含 JavaScript 函数的字符串。它看起来像：

    (function() {dust.register("intro", body0); function body0(chk, ctx) { /* [...] */ } })();

    当您将此字符串传递给dust.loadSource 时，它​​所做的就是eval执行此自调用函数。结果是dust.register调用执行，它将body0函数与 中的名称intro相关联dust.cache。之后，每次调用dust.render("intro"...)，dust 都会在其中查找intro模板dust.cache并执行与其关联的函数。

  3. 将 的输出存储dust.compile在.js文件中，intro.js例如上面的示例。然后，您可以像任何其他 JavaScript 文件一样在页面上包含dust-core.js和（例如，在加载器中或通过加载器）。intro.jsscript tags

  4. 通常，您将每个灰尘模板存储在单独的文件中，例如intro.tl并使用某种构建系统（例如http://gruntjs.com/.js ）在每次更改时自动将其编译为文件。然后将所有生成的.js文件连接到一个文件中（grunt 也可以这样做）并将其加载到页面上的script标签中。

于 2014-01-28T05:44:05.973 回答
1

  1. 您不必在脚本标签中包含模板，第二种方式更好。

  2. loadSource 将运行模板的编译输出，其中包括注册它，以便其他模板和dust.render 可以通过其名称（在本例中为“intro”）引用已编译的输出链。

  3. 这包括在您打开浏览器之前预编译您的模板。因此，您可能有一个文件夹，其中包含所有模板为 .tl 文件。在某些构建步骤中，您将编译所有这些模板（使用dust.compile）并将输出保存为.js 文件。然后浏览器实际上会加载那些 .js 文件。这也消除了对dust.loadSource 的需要。这里的优点是不必包含编译器和解析器，它们加起来大约 3000 行代码。灰尘库的大小从 4000 行代码到只有 800 行代码。编辑：另外，正如你所提到的，你不是在浏览器中动态编译模板，所以这也将是一个很大的性能提升。

  4. 我想说除了错过我上面提到的构建步骤之外，你走在正确的道路上。

于 2014-01-27T08:31:09.417 回答