骨干（木偶）异步模块化模板加载

Question

目前在我正在处理的 Backbone 项目中，我已按模块组合了所有模板。类似的东西：

• users.html
  • #profileTemplate
  • #changePasswordTemplate
  • ...
• something.html
  • #someTemplate
  • #anotherTemplate

然后我根据需要使用$.get 按模块加载模板。我打算使用 Backbone Marionette 来加载这些模板，建议的方法是：link

Backbone.Marionette.TemplateCache.loadTemplate = function(templateId, callback){
  var that = this;
  var url = templateId + ".html";

  $.get(url, function(templateHtml){
    var template = $(templateHtml).find(templateId);
    callback(template);
  });
}

这意味着我必须将我的模板分解成更多的文件，这意味着更多的网络请求。我想知道这样做的推荐方法是什么？将所有内容组合成一个大文件或许多小文件或模块之间的某个地方？如果按模块，那么我需要向loadTemplate(moduleUrl, templateSelector, callback) 添加一个参数，还没有尝试过，明天会这样做，但是即使它没有破坏任何东西，是否也推荐这样做？我正在覆盖第 3 方框架方法，更糟糕的是，更改其方法签名？那么推荐的解决方案是什么？

也许因为我使用的是 RequireJS，所以我的模板可以通过 Require 加载？

Answer 1

我想知道这样做的推荐方法是什么？

推荐的方法是不要异步加载文件。尽可能立即加载您需要的所有内容。

“异步不会让事情进展得很快。当你不能让事情进展得足够快时，你会做异步。” - https://twitter.com/izs/status/216954021926285313

也许因为我使用的是 RequireJS，所以我的模板可以通过 Require 加载？

是的。

让 RequireJS 通过预编译它们来优化您的模板，并使用 r.js 插件将它们连接到您的应用程序文件中。这将显着提高您应用的性能。

...

如果您确实需要异步加载模板和模块，请按照您的想法将内容分组到尽可能少的文件中。您需要修改您引用的代码来处理此问题。