Comprendre quand et comment utiliser Require.JS

Question

Je viens juste de commencer à travailler avec Require.JS et je ne suis pas très clair sur les cas appropriés dans lesquels il devrait être utilisé, ainsi que sur 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() y functionB() . Ces deux fonctions nécessitent une fonction supplémentaire, functionC() pour fonctionner correctement.

Je ne veux charger la fonctionC() que lorsque cela est nécessaire, c'est-à-dire lorsque la fonctionA() ou la fonctionB() va être appelée. J'ai donc les fichiers suivants :

fonctionC.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 que c'est bien configuré ? Et si je finis par appeler à la fois functionA() et functionB() sur la même page, est-ce qu'un travail supplémentaire est effectué puisqu'ils chargent tous deux le fichier functionC.js ? Si oui, cela pose-t-il un problème ? Et si c'est le cas, y a-t-il un moyen de faire en sorte qu'elles vérifient d'abord si functionC.js a déjà été chargé, et qu'elles ne le chargent que si ce n'est pas le cas ? Enfin, est-ce une utilisation appropriée de Require.JS ?

Answer 1

define() ne doit être utilisé que pour définir un module. Dans l'exemple ci-dessus, où un morceau de code doit être chargé dynamiquement, l'utilisation du module 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 callback 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, il n'y a pas de pénalité prise pour charger functionC.js il n'est chargé qu'une seule fois. La première fois require() est appelé, il chargera functionC.js mais le reste du temps, RequireJS sait qu'il est déjà chargé, il appellera donc la fonction function(functionC){} sans demander functionC.js encore.

Answer 2

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