javascript - requirejs 意外行为

Question

// conifg.js
require.config({
  paths: {
    'main': 'main',
    'socketio': './libs/socket.io/socket.io',
    'plotly': './libs/plotly/plotly-latest.min',
    'renderDataToPlotly': './scripts/renderDataToPlotly',
    'jquery': './libs/jquery/jquery-2.1.4.min',
    'jqueryUI': './libs/jquery/jquery-ui-1.11.4.custom/jquery-ui.min',
    'sliders': './scripts/sliders',
    'makePlotlyWindowResponsive': './scripts/makePlotlyWindowResponsive'
  },
  shim: {                  
    'jqueryUI': ['jquery'] 
  }
});

require(['main']);

// main.js
define([
  'jquery',
  'jqueryUI',
  'socketio',
  'sliders',
  'makePlotlyWindowResponsive',
  'renderDataToPlotly'
  ],
  function($, ui, io, sliders, makePlotlyWindowResponsive, renderDataToPlotly) {
    //
  }
);

// renderDataToPlotly.js and makePlotlyWindowResponsive.js
define(['plotly'], function() {

});

当我加载页面时，我得到以下加载顺序: 如您所见，makePlotlyWindowResponsive.js(1，在图像上)先于 plotly-latest.min.js(2，在图像上)加载。据我了解 requirejs 机制，我会在 makePlotlyWindowResponsive.js 上发现 Plotly is not Defined 错误，但我没有收到任何错误。一切正常。

我想了解 requirejs 及其工作原理。

问题1:如何不出现错误？

问题 2:这意味着，无论加载顺序如何，如果在页面完全加载之前加载文件就不会出现错误？

感谢您的宝贵时间!

Answer 1

您在 plotly.min.js 和依赖它的模块之间看到的相对顺序是必要的。在获取 makePlotlyWindowResponsive 或 renderDataToPlotly 之前，RequireJS 没有理由获取 plotly.min.js。

术语说明:我将“获取(模块)”用于在网络上发出 HTTP 查询的操作，并将使用“定义(模块)”来表示运行模块的工厂函数的操作。 “加载”这个词太含糊了。

发生的情况是:

1. 您需要main。因此 RequireJS 获取 main。

2. RequireJS 执行 main 中的 define。在定义依赖项之前，工厂(回调)无法运行。因此它开始获取依赖项。这种获取可以按任何顺序发生。依赖项包括 makePlotlyWindowResponsive 和 renderDataToPlotly。

3. RequireJS 获取 makePlotlyWindowResponsive 和 renderDataToPlotly。 (它们的相对顺序并不重要。)

4. RequireJS 执行 makePlotlyWindowResponsive 或 renderDataToPlotly 的 define。 这是它了解到必须获取模块 plotly 的地方，该模块解析为 ./libs/plotly/plotly-latest.min.js。在此之前，RequireJS 并不知道需要 plotly。它位于路径中这一事实并不足以触发其加载。

5. RequireJS 获取 ./libs/plotly/plotly-latest.min.js。