Verstehen, wann und wie Require.JS verwendet wird

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?

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 .

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