Verstehen, wann und wie Require.JS verwendet wird

68

Ich habe gerade angefangen, mit Require.JS zu arbeiten, und bin mir ein wenig unklar, in welchen Fällen es verwendet werden sollte und wie es in diesen Fällen richtig verwendet werden soll.

Hier ist, wie ich derzeit Dinge mit Require.JS eingerichtet habe. Ich habe zwei Funktionen functionA()und functionB(). Beide Funktionen erfordern eine zusätzliche Funktion, functionC()um ordnungsgemäß zu funktionieren.

Ich möchte functionC () nur bei Bedarf laden, dh wenn functionA () oder functionB () aufgerufen werden soll. Ich habe also folgende Dateien:

functionC.js

functionC(){
  //do stuff
}

functionA.js

functionA(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionA() stuff
  });
}

functionB.js

functionB(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionB() stuff
  });
}

Ist das also richtig eingerichtet? Und wenn ich am Ende sowohl functionA () als auch functionB () auf derselben Seite aufrufe, wird dann zusätzliche Arbeit geleistet, da beide die Datei functionC.js laden? Wenn ja, ist das ein Problem? Und wenn ja, gibt es eine Möglichkeit, es so einzurichten, dass sie zuerst prüfen, ob functionC.js bereits geladen wurde, und es nur laden, wenn es nicht geladen wurde? Ist dies eine angemessene Verwendung von Require.JS?

Maxedison
quelle

Antworten:

47

define()sollte nur zum Definieren eines Moduls verwendet werden. Für das obige Beispiel, in dem ein Code dynamisch geladen werden soll, ist die Verwendung von require()besser geeignet:

functionA.js

functionA(){
  require(['functionC'],function(functionC){
    //use funcC in here to call functionC
  });
}

Einige Notizen:

  • require([])ist asynchron. Wenn der Aufrufer von functionAeinen Rückgabewert von dieser Funktion erwartet, treten wahrscheinlich Fehler auf. Es ist am besten, wenn Sie functionAeinen Rückruf akzeptieren, der aufgerufen wird, wenn functionAdie Arbeit erledigt ist.
  • Der obige Code ruft require()bei jedem Anruf an functionA; Nach dem ersten Anruf wird jedoch keine Strafe für das Laden erhoben functionC.js, sondern nur einmal. Wenn das erste Mal require()aufgerufen wird, wird es geladen functionC.js, aber in der restlichen Zeit weiß RequireJS, dass es bereits geladen ist, und ruft die function(functionC){}Funktion auf, ohne sie functionC.jserneut anzufordern .
jrburke
quelle
1
Vielen Dank für Ihre Antwort - es hilft sehr. define () vs. require () war etwas, worüber ich geklärt werden musste, und Ihre anderen beiden Aufzählungspunkte helfen wirklich sehr. Ich denke, der erste der Aufzählungspunkte ist etwas, das ich noch besser verstehen muss - wie man die asynchrone Natur von RequireJS richtig handhabt.
Maxedison
22

Details zur RequireJS- und JavaScript-Modularität finden Sie hier: JavaScript-Modularität mit RequireJS (vom Spaghetti-Code bis zum Ravioli-Code)

Malkov
quelle
4
Top Link - nachdem ich zahlreiche Tutorials gelesen habe, ist das bei weitem das Beste. klar und prägnant. +1
Gwyn Howell
11
Der Link kann theoretisch die Frage beantworten, es wäre jedoch vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
JJJ