当我使用requireJS时,为什么我需要插件?

时间:2013-07-29 23:40:14

标签: javascript requirejs handlebars.js

我最近一直在接受要求,并对此感到满意。但为什么我需要this 400+ line plulgin来加载我的车把模板? 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文件with require(或许不是),而不使用插件。我不喜欢上面的ajax方法,因为它会降低页面加载速度。

我的templates.hbs文件如下所示:

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

只是一个字符串,对吧?

1 个答案:

答案 0 :(得分:1)

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

正如您所说,即使您在其余的依赖关系管理中使用RequireJS,也不会需要插件来加载模板。但是,有几个原因可以解释为什么使用built-in text plugin或专用的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 optimizer,它可以将所有依赖项捆绑在一起并缩小它们以减少请求数量及其整体下载大小。

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

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

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

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