要求.js传统文件的订单插件问题

require.js order plugin issue with traditional files

本文关键字：插件 问题 单插件 js 传统 文件 要求      更新时间：2023-09-26

我有以下代码使用 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 +----------------+

查看Firebug，我看到获取顺序是：

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

从使用 console.log(( 进行调试(以及从理论角度来看(，加载(执行(顺序为：

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

现在问题来了。在大多数情况下，上述内容在Firefox，chrome和IE9中工作正常。 但是，在某些情况下，第三方脚本 B.js 无法加载，因为第三方脚本 A.js 尚未完成加载。 事实上，console.logs 显示第三方脚本 B.js首先执行 U，然后是第三方 A.js、实用程序，最后是应用程序。 这是怎么回事？ 到目前为止，我只能在IE9中重现此问题。

这很奇怪，因为在应用程序.js中，我使用订单插件来保证两个第三方脚本加载的顺序。 然而，脚本执行顺序不正常。

经过进一步调查，我注意到只有当第三方脚本 A.js 比第三方脚本 B.js 需要更长的时间来获取时，才会出现问题。 这让我猜测订单！插件不适用于 define((。 从理论上讲，第三方脚本 B.js 应该等待执行，即使第三方脚本 A.js 需要 20 秒来获取和加载。 这就是秩序！乖乖，不是吗？

另一种理论是，如果链上的另一个模块(实用程序中的第三方脚本-A.js.js(需要任何按顺序排列的文件！，它将不起作用。

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

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

但是，对于 60+ 脚本应用程序，需求列表可能会变得又长又乱......

谁能启发我为什么要定义((和排序！ 按照他们的方式行事？

谢谢一堆！

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

诀窍是将所有内容包装在模块中。我通常在依赖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
         '----->----->----->----/

脚本 A 本可以更早地加载和执行，因为应用程序依赖于它。但为了安全起见，你应该这样做。这样，您就可以确保正确加载依赖项。

相关文章：