加载完成后分别渲染每个模块

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 模块的优化器来尝试将您的模块组合成有利于您正在寻找的结果的包。进行这种优化需要开发人员仔细分析应用程序的结构。在一般情况下，没有任何一个标志、选项或插件可以让您打开以获得您想要的结果。此外，如上所述，浏览器和服务器的工作方式可能会搞砸。

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

;(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 加载后才被请求，等等。而在您的原始代码中，所有模块都是立即请求的。这可能会导致总初始化时间更长。

加载完成后分别渲染每个模块

Render each module separately after finished loading

javascript

requirejs

amd