2

我最近一直在使用require，对此我很满意。但是为什么我需要这个 400 多行的插件来加载我的车把模板呢？Handlebars 模板可以存储在 html 文件中，无需涉及插件/转换过程。如果我愿意...我也可以使用 jQuery/Ajax 像这样加载它们：

$.ajax({
    url: '../templates/description.hbs',
    dataType: 'html',
    cache: false,
    success: function(data, status, response) {
        var template = Handlebars.compile(response.responseText);
        $('#content').prepend(template(tmplData.description));
    }
});

我正在寻找一种方法来加载我的 templates.hbs 文件，需要（或者可能不是），而不使用插件。我不喜欢上面的 ajax 方法，因为它会减慢页面加载速度。

我的 templates.hbs 文件看起来像这样：

<div class="description">
    <h1>{{h1}}</h1>
    <p>{{p}}</p>
</div>

只是一个字符串，对吧？

4

1 回答 1

1

回答您帖子标题中的问题（“为什么我需要插件...”），而不是正文中的问题（“我正在寻找一种加载模板的方法...”）。也许其他人会出现并为那部分提供答案。

正如您所说，您不需要插件来加载模板，即使您使用 RequireJS 进行其余的依赖项管理。但是，使用内置文本插件或专用 Handlebars 插件（如您链接的那个）可能会有所帮助有几个原因：

1 - 处理与其他依赖项相同的文本依赖项

有一个插件可以让你说一段给定的代码依赖于模块 A、模块 B 和模板 X：

require(["moduleA", "moduleB", "text!templateX.html"],
    function(moduleA, moduleB, html) {
        // start working with all of it together
    }
);

但是如果你不使用插件，你可能会有另一层回调：

require(["moduleA", "moduleB"],
    function(moduleA, moduleB) {
        $.ajax({
            url: '../templates/templateX.html',
            dataType: 'html',
            cache: false,
            success: function(data, status, response) {
                // now do something
            }
        });
    }
);

2 - 允许捆绑/优化阶段

RequireJS 附带了r.js 优化器，它可以将所有依赖项捆绑在一起并缩小它们以减少请求的数量和它们的整体下载大小。

如果您使用插件和 require/define 语法来定义所有依赖项，r.js 可以跟踪模块所需的内容并将其捆绑在一起。所以在我上面使用的例子中：

require(["moduleA", "moduleB", "text!templateX.html"],

moduleA、moduleB 和 templateX 可以捆绑在一个文件中，而不是三个单独的运行时请求。

在您链接的 Handlebars 插件中，我看到 400 多行代码中的一些正在处理捆绑/优化阶段。正如@Esailija 在评论中指出的那样，其他许多都与边缘情况和错误条件有关。

于 2013-07-30T13:32:42.557 回答