web-dev-qa-db-fra.com

Comprendre quand et comment utiliser Require.JS

Je viens de commencer à travailler avec Require.JS et je ne suis pas certain des cas appropriés dans lesquels il devrait être utilisé, ainsi que de la manière correcte de l'utiliser dans ces cas.

Voici comment j'ai actuellement configuré les choses avec Require.JS. J'ai deux fonctions, functionA() et functionB(). Ces deux fonctions nécessitent une fonction supplémentaire, functionC() pour fonctionner correctement.

Je veux seulement charger functionC () lorsque cela est nécessaire, c'est-à-dire lorsque functionA () ou functionB () va être appelé. J'ai donc les fichiers suivants:

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
  });
}

Alors, est-ce bien configuré? Et si j'appelle à la fois functionA () et functionB () sur la même page, un travail supplémentaire est-il effectué car ils chargent tous les deux le fichier functionC.js? Si oui, est-ce un problème? Et dans l'affirmative, existe-t-il un moyen de le configurer de sorte qu'ils vérifient d'abord si functionC.js a déjà été chargé, et le chargent uniquement s'il ne l'a pas été? Enfin, s'agit-il d'une utilisation appropriée de Require.JS?

javascriptrequirejs
68
maxedison

define() ne doit être utilisé que pour définir un module. Pour l'exemple ci-dessus, où un morceau de code doit être chargé dynamiquement, utiliser require() est plus approprié:

functionA.js

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

Quelques notes:

  • require([]) est asynchrone, donc si l'appelant de functionA attend une valeur de retour de cette fonction, il y aura probablement des erreurs. Il est préférable que functionA accepte un rappel qui est appelé lorsque functionA a terminé son travail.
  • Le code ci-dessus appellera require() pour chaque appel à functionA; cependant, après le premier appel, aucune pénalité n'est prise pour charger functionC.js, il n'est chargé qu'une seule fois. La première fois que require() est appelée, elle chargera functionC.js, Mais le reste du temps, RequireJS sait qu'elle est déjà chargée, donc elle appellera la fonction function(functionC){} sans demander à nouveau functionC.js.
47
jrburke

Vous pouvez trouver des détails sur RequireJS et la modularité JavaScript ici: Modularité JavaScript avec RequireJS (du code spaghetti au code ravioli)

22
Malkov