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机制，我会在Plotly is not defined上makePlotlyWindowResponsive.js一个Plotly is not defined错误，但我什么也没得到。 一切正常。

我想了解requirejs及其工作方式。

问题1 ：怎么没有错误？

问题2 ：这意味着，尽管加载顺序不同，但在页面完全加载之前加载文件是否没有错误？

谢谢你的时间！

Answer 1

当requirejs从网络接收脚本时，它将运行该脚本。 require （或define ？）函数说：“下载其他脚本，然后运行它们，获得所有返回值后，运行此函数”。 因此，它等待其他脚本加载并返回它们的值，然后再在此脚本中调用函数。 简而言之，它们加载的顺序可能与它们的功能运行的顺序不同。

Answer 2

您在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 。 它位于paths之间的事实不足以触发其加载。

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