javascript - 加载完成后单独渲染各个模块

Question

我有一个包含多个模块的应用程序，需要在完成加载后立即渲染。这个想法是每个模块都执行其专用的渲染功能，而不管其他模块的状态如何。

这是主模块的实现:

;(function(doc, win, undefined) {
   'use strict';

   define(['module', 'domReady!'], function(main) {
      var modules = main.config().modules;
      while (modules.length) {
         require([].concat(modules.shift()), function(module) {
            module.init();
         });
      }
   });

}(document, window));

看起来，尽管每个模块应该在加载后立即渲染，但在所有模块完成加载之前，屏幕上不会出现任何内容。这会导致进入应用程序时出现延迟，并且不会指示应用程序已开始执行。什么可能导致这种行为以及如何使应用程序的初始化尽可能顺利？

Answer 1

它不是 AMD 语义的一部分，无法提供您正在寻找的效果。您拥有的唯一保证是，传递给 require 的回调不会运行，直到加载回调附带的依赖项数组中列出的模块及其依赖项。

RequireJS 无法很好地控制浏览器如何向服务器发送请求。例如，如果发生这种情况，当您发出请求时，浏览器已经有太多其他请求待处理(对于样式表、图像或除了您通过 require 请求的模块之外必须加载的其他内容)，浏览器可能会决定推迟 RequireJS 的请求，直到之前的请求得到解决。

服务器端如何解析请求也会影响将发生的顺序。

然后是您的应用程序的结构。假设 main.config().modules 包含 ['A', 'B', 'C'] 。所以你想按顺序加载 A 、 B 、 C 并让它们尽快初始化。然而，事实证明所有这些模块也依赖于 jquery 。当 RequireJS 执行 A 时，它会运行 define(['jquery], function ($) {... 。好的，现在必须获取 jquery。当 jquery 被获取时，B 和 C 可能也在等待它。因此 RequireJS 将执行 A 、 B 、 C 以及以紧密连续的顺序等待它们的回调。如果只有一个依赖项，这可能不是什么大问题，但如果你的模块依赖于一系列其他通用模块，它就会累加起来，最终结果是在加载通用模块时你会得到明显的等待，然后它看起来像 A , B , C 批量执行。

可以通过使用 RequireJS 自己的优化器或另一个理解 AMD 模块的优化器来尝试将您的模块组合到有利于您正在寻找的结果的 bundle 中。进行这种优化需要开发人员仔分割析应用程序的结构。在一般情况下，没有任何一个标志、选项或插件可以让您打开来获得您想要的结果。此外，如上所述，浏览器和服务器的工作方式可能会把一切搞砸。

<小时/>

为了完整起见，我应该提到一件事。您可以强制顺序初始化，但仅在加载前一个模块后才请求一个模块:

;(function(doc, win, undefined) {
   'use strict';

   define(['module', 'domReady!'], function(main) {
      var modules = main.config().modules;
      function next() {
        var name = modules.shift();
        if (name === undefined) {
          return;
        }

        require([name], function (module) {
          // When one module has loaded, we initiate the request for the
          // next one.
          next();

          // And init what we've got now.
          module.init();
        });
      }

      next();
   });
}(document, window));

但是，这里的成本是仅在 B 加载后才请求 A 等。而在原始代码中，所有模块都会立即请求。这可能会导致总初始化时间更长。