使用 RequireJS（text.js 插件）和 Underscore 进行模板化答案

【问题标题】：Templating using RequireJS (text.js plugin) and Underscore使用 RequireJS（text.js 插件）和 Underscore 进行模板化
【发布时间】：2014-03-18 18:23:33
【问题描述】：

需要一些关于在 Underscore 中管理模板的最佳方法的意见。我正在构建一个 Backbone 应用程序并使用 Underscore 来管理模板。我开始在“template.js”文件中做这样的事情。

templates = {
    template1: '<h1>Some HTML</h1>',
    template2: '<h1>Some more HTML and a <%= variable %></h1>
    ...
}

这变得一团糟。快速地。所以，我查看了 RequireJS 的text plugin，这让它变得更干净了。现在，我有一堆 HTML 文件，我基本上将它们存储到我的“模板”对象中。像这样的：

define(['text!/templates/template1.html',
    'text!/templates/template2.html',
    ...], 
    function(template1, template2, ...) {
        return {
            template1: template1,
            template2: template2,
            ....
        }
});

所以现在的问题是 HTTP 请求。仅对于模板，我有 5 个请求 - 1 个用于 template.js 文件，然后是 4 个单独的 HTML 模板文件。而且该列表将继续增长。我在想的一件事是将所有 HTML 放在一个文件中，但这似乎与 AMD 方法不符。随着应用程序的进展，我可以在这方面变得更聪明，并且只在必要时加载 HTML 模板 - 如果它们都是独立的。

有没有办法绕过所有的 HTML 请求？我认为这在生产环境中不是很好的做法。

任何人对如何完成我正在尝试做的事情有任何其他想法？

【问题讨论】：

标签： javascript templates backbone.js underscore.js-templating

【解决方案1】：

这就是RequireJS Optimizer 的用途。作为预部署构建过程的一部分，它将所有模块组合到一个文件中。根据README for the text plugin：

文本文件是通过异步 XMLHttpRequest (XHR) 调用加载的，因此您只能从与网页相同的域中获取文件（请参阅下面的 XHR 限制）。

但是，RequireJS 优化器会内联任何文本！将实际文本文件内容引用到模块中，因此在构建之后，具有文本的模块！可以从其他域使用依赖项。

【讨论】：

谢谢。这正是我想要的。