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 mechanics, я бы заметил ошибку Plotly is not defined на makePlotlyWindowResponsive.js, но я не получаю. Все работает.

Я хочу понять requirejs и как это работает.

Вопрос 1: Как нет ошибки?

Вопрос 2: Это означает, что, несмотря на порядок загрузки, нет ошибок при загрузке файлов до полной загрузки страницы?

Спасибо за ваше время!

Answer 1

Относительный порядок, в котором вы виделись между plotly.min.js, и модули, которые от него зависят,. RequireJS не имеет причин для получения plotly.min.js до тех пор, пока не будут получены makePlotlyWindowResponsive или renderDataToPlotly.

Терминологическое примечание: Я говорю «выборка (модуль)» для действия выдачи HTTP-запроса в сети, и я буду использовать «определение (модуль)» для действия запуска заводской функции модуля , Термин «загрузка» слишком неоднозначен.

Что происходит:

1. Вам требуется main. Поэтому RequireJS выбирает main.

2. RequireJS выполняет define в main. Фабрика (обратный вызов) не может быть запущена до тех пор, пока не будут определены сами зависимости. Таким образом, он инициирует выборку зависимостей. Эта выборка может произойти в любом порядке. Среди зависимостей: makePlotlyWindowResponsive и renderDataToPlotly.

3. RequireJS выборки makePlotlyWindowResponsive и renderDataToPlotly. (Их относительный порядок не имеет значения.)

4. RequireJS исполняет define либо makePlotlyWindowResponsive, либо renderDataToPlotly. Здесь он узнает, что он должен получить модуль plotly, который разрешает ./libs/plotly/plotly-latest.min.js. До этого момента RequireJS не знает, что потребуется plotly. Тот факт, что он входит в число paths, не является достаточным условием для его загрузки.

5. RequireJS выборки ./libs/plotly/plotly-latest.min.js.

Answer 2

Когда requirejs получает скрипт из сети, он запускает этот скрипт. функция require (или define?) говорит: «Загрузите эти другие скрипты, затем запустите их, и как только вы получите все свои возвращаемые значения, запустите эту функцию». Поэтому он ожидает, что другие скрипты будут загружаться и возвращать свои значения перед вызовом функции в этом. Короче говоря, порядок, в котором они загружаются, может не совпадать с порядком их выполнения.