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 。