requirejs unerwartetes Verhalten

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() { 

}); 

Wenn ich laden Sie die Seite, die ich diese Last Bestellung erhalten: Wie Sie sehen können, makePlotlyWindowResponsive.js (1, auf das Bild) lädt vor plotly-latest.min.js (2, auf das Bild). Wie ich verstehe, erfordert die Mechanik, ich spect Plotly is not defined Fehler auf makePlotlyWindowResponsive.js, aber ich bekomme keine. Funktioniert alles.

Ich möchte Requirejs verstehen und wie es funktioniert.

Frage 1: Wie gibt es keinen Fehler?

Frage 2: Das bedeutet, dass es trotz der Ladereihenfolge keinen Fehler gibt, wenn Dateien geladen werden, bevor die Seite vollständig geladen ist?

Danke für Ihre Zeit!

Answer 1

Die relative Reihenfolge, die Sie zwischen plotly.min.js und den davon abhängigen Modulen beobachtet haben, ist erforderlich. RequireJS hat keinen Grund, plotly.min.js abzurufen, bis makePlotlyWindowResponsive oder renderDataToPlotly abgerufen wurden.

Terminologische Anmerkung: Ich sage "Holen (ein Modul)" für die Aktion der Ausgabe einer HTTP-Abfrage im Netzwerk und ich werde "definieren (ein Modul)" für die Aktion der Factory-Funktion eines Moduls ausführen . Der Begriff "Laden" ist zu zweideutig.

Was passiert ist:

1. Sie main benötigen. Also RequireJS holt main.

2. RequireJS führt die in main aus. Die Factory (der Callback) kann erst ausgeführt werden, wenn die Abhängigkeiten selbst definiert sind. Also beginnt es, die Abhängigkeiten abzurufen. Dieser Abruf kann in beliebiger Reihenfolge erfolgen. Zu den Abhängigkeiten gehören makePlotlyWindowResponsive und renderDataToPlotly.

3. RequireJS ruft makePlotlyWindowResponsive und renderDataToPlotly ab. (Ihre relative Reihenfolge ist nicht wichtig.)

4. RequireJS führt die entweder makePlotlyWindowResponsive oder renderDataToPlotly. Hier erfährt es, dass es das Modul plotly abrufen muss, das in ./libs/plotly/plotly-latest.min.js aufgelöst wird. Vor diesem Punkt hat RequireJS keine Ahnung, dass plotly benötigt wird. Die Tatsache, dass es zu den paths gehört, ist keine ausreichende Bedingung, um das Laden auszulösen.

5. RequireJS ruft ./libs/plotly/plotly-latest.min.js ab.

Answer 2

Wenn requirejs ein Skript vom Netzwerk empfängt, wird dieses Skript ausgeführt. die require (oder ?) Funktion sagt "Laden Sie diese anderen Skripte, dann führen Sie sie aus, und sobald Sie alle ihre Rückgabewerte haben, führen Sie diese Funktion". Daher wartet es darauf, dass die anderen Skripts ihre Werte laden und zurückgeben, bevor sie die Funktion in diesem Skript aufrufen. Kurz gesagt, die Reihenfolge, in der sie geladen werden, stimmt möglicherweise nicht mit der Reihenfolge überein, in der ihre Funktionen ausgeführt werden.