javascript - AMD:模块加载中的并发资源

Question

假设我有一个加载模块myModule的应用程序。所述模块需要一些其他资源才能工作(例如模板)，因此 myModule 关心加载它所需的资源，这很巧妙。实际上，这很简单:

// main.js
require(["myModule"], function(myModule) {
    // ...
});

// myModule.js
define(["mustache", "text!myTemplate.mt"], function(mt, template) {
    // ...
});

但是，这里发生的情况是，首先加载模块的脚本，然后脚本加载它需要的资源。我想要实现的是同时开始加载 myModule 和 myTemplate 以节省时间。我设法通过在 main.js 中预加载资源来做到这一点:

// main.js
require(["myModule", "text!myTemplate.mt"], function(myModule) {
    // ...
});

有更优雅的方法吗？当然，我认为没有办法避免 main.js 必须“知道”myModule 的依赖项。

另一个问题

如果 myModule 不需要其资源，而是将它们授予给模块怎么办？就像，“我需要 myModule，它可以使用 template1 和 template3”。

我认为使用一些 config 配置 require 可以解决问题:

// main.js
var templatesForMyModule = [...]
require.config({
    config: {
        myModule: templatesForMyModule
    }
});

// myModule.js
define(["module", "mustache"], function(module, mt) {
    var templates = module.config();
    // ...
});

这里的问题是我要么传递模板的路径 - 它将在 myModule 加载之后加载，从而导致初始问题 - 或者模板的路径内容，但这意味着我必须在 myModule 之前加载模板，这是我想避免的另一件事。可惜我做不到

require.config({
    config: {
        myModule: require(templatesForMyModule)
    }
});

然后，神奇地检索 myModule.js 中的模板内容。

解决方案是:myModule 返回一个回调函数，main 在资源加载后调用该函数，将资源传递给回调。但这会改变一些代码的工作流程。

我仍然有机会使用另一个模块加载器，因此如果另一个模块加载器更适合该任务，欢迎提出建议。

Answer 1

这很有趣。让我尝试解决第一个问题:

假设您的 myModule.js 是:

define(["mustache", "text!myTemplate.mt"], function(mt, template) {
    // ... A LOT OF CODE
    // ... THAT WILL TAKE
    // ... SOME TIME TO LOAD
});

因此，mustache 和 myTemplate.mt 将必须等待 myModule.js 加载和解析。这是你的问题。

为什么不将代码重新排列为:

// myModule.js
define(["myModuleMain", "mustache", "text!myTemplate.mt"], function(myModuleMain, mt, template) {
    return myModuleMain;
});

// myModuleMain.js
define(["mustache", "text!myTemplate.mt"], function(mt, template) {
    // ... A LOT OF CODE
    // ... THAT WILL TAKE
    // ... SOME TIME TO LOAD
});

现在 myModule.js 很小并且加载速度很快。此外，它将开始并行加载其依赖项，即 Mustache、模板和大部分代码，这就是您需要的效果。

看起来似乎很黑客；新的 myModule.js 需要知道 myModuleMain.js 的依赖项，依赖项必须保持同步，并且返回相同的对象。与需要 main.js 中的所有内容相比，这种方式至少依赖关系更加本地化。

如果您想要更奇特，您可以在构建或服务器中添加自动生成步骤，以生成"new"myModule.js 和 myModuleMain.js 来自原始的 myModule.js。

<小时/>

另一个选择是使用 bundles 配置选项 ( ref ) 来进行项目构建的一些工作。该解决方案的概要是:

1. 调整构建脚本以生成一个由 myModule.js、mustache、模板组成的包；将生成的 JS 命名为 myModuleBundle.js。

2. 配置 bundle :

   bundles: {
       "myModuleBundle": ["myModule", "mustache", "text!myTemplate.mt"],
       ...
   }
   

3. 现在需要 myModule 将并行加载整个包。

如果其他模块也需要 Mustache，这显然是有缺陷的，因为它会多次加载它。但是，如果在全局级别需要 Mustache，那么从 main 中要求它甚至使用 deps 配置选项 ( ref ) 也没什么坏处。