Code de lancement pour les modules Javascript

Question

La plupart du javascript avec lequel je travaille est un code UI - un code qui associe des fonctionnalités supplémentaires au cadre HTML de mes pages et interagit avec divers éléments HTML. Dans l'ensemble, je suis en faveur de la rupture du code de l'interface utilisateur en modules. Par exemple, si j'ai du code qui associe des gestionnaires à des boutons Précédent/Suivant qui implémentent un comportement de carrousel, il est logique de placer ce code dans un module 'carrousel'.

La question est, où dois-je mettre le code de la bande de démarrage qui s'exécute sur le chargement de la page, et décide réellement quels modules seront chargés et pour quels éléments?

Devrait-il être dans le fichier JS et s'exécuter dès que le fichier JS est inclus?

Ou devrait-il être dans une étiquette de script en haut (ou en bas) du fichier HTML?

Ou ne devrait-il pas y avoir de code particulier, mais le fichier JS devrait déterminer les éléments auxquels attacher les gestionnaires, etc., en fonction de l'ID/classe d'un élément parent?

Quelle méthode a le mieux fonctionné pour vous?

Answer 1

Je sépare habituellement chaque module dans différents fichiers .js. Chaque fichier/module a son propre $(document).ready() (une fonction bootstrap jQuery) pour charger correctement. Ensuite, chargez ce fichier/module particulier en ajoutant simplement le <script> de manière appropriée.

Cela ressemble au fonctionnement des plugins pour les bibliothèques/frameworks JavaScript populaires, il suffit de les inclure et d'appliquer un comportement.

EDIT

Par exemple, le modèle carrousel (carousel.js) ressemblerait à quelque chose comme ceci:

(function(){ 

    function bindNext(){...} 
    function bindPrev(){...} 

    // jQuery bootstrap 
    $(document).ready(function(){ 
     bindNext(); 
     bindPrev(); 
    }); 

})(); 

Et peut-être un autre module (foo.js):

(function(){ 

    function foo(){...} 
    function bar(){...} 

    // jQuery bootstrap 
    $(document).ready(function(){ 
     foo(); 
     bar(); 
    }); 

})(); 

De cette façon, tout ce que j'ai à faire est d'ajouter ces fichiers et les modules vont juste fonctionner. Il n'y a pas besoin d'un emplacement central pour rassembler tous les comportements des différents modules, puisque chaque module définit son comportement.

Answer 2

J'aime donner à mes modules js une fonction Init() ou Start(). Alors quel code génère le balisage qui interagit avec le JS peut également écrire le script de ligne pour appeler la fonction Init/Start. De cette façon, je peux aussi passer des paramètres aux modules au démarrage spécifiques à cette instance, même avoir plusieurs instances.

Answer 3

Je pense à l'ajout de fichiers js en tant que bibliothèques d'importation, et à mon fichier html en tant qu'application principale. J'aime faire n'importe quelle initialisation dans une balise de script, après que les fichiers aient été chargés. Je serais méfiant de mettre des choses à l'intérieur d'un fichier js qui se réfère à des éléments spécifiques sur la page (dos/boutons suivants) par ID ou autre. Il est préférable de le configurer pour pouvoir configurer votre script comme vous le souhaitez avant de l'initialiser.