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 及其工作原理。

问题一：怎么没有报错？

问题2：也就是说，不管加载顺序如何，如果在页面完全加载之前加载文件不会出错？

感谢您的宝贵时间！

Answer 1

当 requirejs 从网络接收到一个脚本时，它运行就是那个脚本。 require（或define？）函数表示"download these other scripts, then run them, and once you've got all their return values, run this function"。因此它会等待其他脚本加载并 return 它们的值，然后再调用此脚本中的函数。简而言之，它们加载的顺序可能与它们的功能顺序不同运行.

Answer 2

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

术语说明：我说 "fetching (a module)" 用于在网络上发出 HTTP 查询的操作，我将使用 "defining (a module)" 用于运行的工厂函数的操作一个模块。 "loading"这个词太含糊了。

发生的事情是：

您需要 main。所以 RequireJS 获取 main.
RequireJS 在main 中执行define。工厂（回调）不能是运行直到依赖项自己定义。所以它开始获取依赖项。这种获取可以以任何顺序发生。依赖项包括 makePlotlyWindowResponsive 和 renderDataToPlotly.
RequireJS 获取 makePlotlyWindowResponsive 和 renderDataToPlotly。（它们的相对顺序无关紧要。）
RequireJS 执行 makePlotlyWindowResponsive 或 renderDataToPlotly 的 define。 这是它了解到它必须获取解析为 ./libs/plotly/plotly-latest.min.js 的模块 plotly 的地方。 在此之前，RequireJS 不知道 plotly 会被需要。它在 paths 中并不是触发其加载的充分条件。
RequireJS 获取 ./libs/plotly/plotly-latest.min.js.

requirejs 意外行为

requirejs unexpected behaviour

javascript

requirejs

load-order