Comprendre quand et comment utiliser Require.JS

Question

Je viens de commencer à travailler avec Require.JS et je suis un peu clair sur les cas appropriés, dans lequel il doit être utilisé, ainsi que la bonne façon de l'utiliser dans ces cas.

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

Je veux seulement charger functionC () si nécessaire, à savoir quand fonctionn () 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 configuré correctement? Et si je finis par appeler les deux fonctionn () et functionB () sur la même page, est un travail supplémentaire accompli depuis les deux charger le fichier de functionC.js? Si oui, est-ce un problème? Et si oui, est-il un moyen de le configurer afin qu'ils vérifient d'abord pour voir si functionC.js a été encore chargé et la charge que si elle n'a pas été? Enfin, est-ce une utilisation appropriée de Require.JS?

Answer 1

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

functionA.js

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

Quelques notes:

• require([]) est asynchrone, 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ée lorsque functionA est fait avec 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é pris à la charge functionC.js, il est chargé une seule fois. La première fois que require() est appelé, il se chargera functionC.js, mais le reste du temps, RequireJS le sait est déjà chargé, il appellera la fonction de function(functionC){} sans demander functionC.js à nouveau.

Answer 2

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