0

我使用 require.js 有以下代码。

实用程序.js：

define(["thirdparty-script-A.js"], function(){ ... });

应用程序.js：

define(["utilities", "order!thirdparty-script-A.js", "order!thirdparty-script-B.js"], function(){ ... });

thirdparty-script-B.js如果尚未完成加载（执行） ，则依赖于thirdparty-script-A.js并且将无法正确加载。thirdparty-script-A.js

总而言之，依赖结构看起来像这样：

  utilities +---> thirdparty-script-A.js <---+ thirdparty-script-B.js

        ^                   ^                          ^
        |                   |                          |
        |                   +                          |
        |                                              |
        +------------+ application.js +----------------+

看着萤火虫，我看到获取顺序是：

  1. 公用事业
  2. 第三方脚本-A.js
  3. 应用
  4. 第三方脚本-B.js

通过使用 console.log() 进行调试（从理论上讲），加载（执行）顺序为：

  1. 第三方脚本-A.js
  2. 公用事业
  3. 第三方脚本-B.js
  4. 应用

现在问题来了。 在大多数情况下，上述方法在 firefox、chrome 和 IE9 中运行良好。但是，存在由于 thirdparty-script-A.js 尚未完成加载而导致第三方脚本 B.js 无法加载的情况。事实上，console.logs 显示thirdparty-script-B.js 执行了FIRST，然后是thirdparty-A.js，实用程序，最后是应用程序。到底是怎么回事？到目前为止，我只能在IE9中重现这个问题。

这很奇怪，因为在 application.js 中，我使用 order 插件来保证两个第三方脚本加载的顺序。然而脚本执行乱序。

经过进一步调查，我注意到只有在thirdparty-script-A.js 的获取时间比thirdparty-script-B.js 长时才会出现问题。这让我猜测顺序！插件不适用于define()。理论上，thirdparty-script-B.js 应该等待执行，即使 thirdparty-script-A.js 需要 20 秒来获取和加载。就是这样安排的！行为，不是吗？

另一种理论是，如果任何文件按顺序排列，它将不起作用！在链上的另一个模块中是必需的（utilities.js 中的thirdparty-script-A.js）。

我确实有一个解决方法。那就是将 application.js 包装在 require() 中并让它首先加载所有传统脚本。

require(["order!thirdparty-script-A.js", "order!thirdparty-script-B.js", "application"], function(app){ //app.init }

然而，对于 60 多个脚本应用程序，需求列表可能会变得又长又乱……

谁能启发我为什么要定义（）和订购！表现得像他们一样吗？

非常感谢！

是的，第三方脚本-A 和 B 被缓存。=)

4

1 回答 1

0

诀窍是将所有内容包装在模块中。我通常对依赖 jQuery 的第三方插件进行这种“重新打包”。这样，您可以确定 jQuery$在插件加载时已加载（并且存在）。在这种方法中，不需要订单插件。

通过“重新打包”，您只需将插件代码define()及其依赖项包装在一个调用中，然后正常加载它。

在应用中：

define(['utilities','scriptA','scriptB'],function(){
    //application code
});

在实用程序中：

define(['scriptA'],function(){
    //utilities code
});

在脚本B中

define(['scriptA'],function(){
    //scriptB code
});

在脚本A中

define(function(){
    //scriptA code
});

所以顺序是：

Loading |      Application       A
        |   Utilities, Script B  |
        V       Script A         | Execution
         \----->----->----->----/

ScriptA本来可以更早地加载和执行，因为 Application 依赖于它。但为了安全起见，你应该这样做。这样，您可以确定依赖项已正确加载。

于 2012-05-11T03:54:22.520 回答