séquence correcte des fonctions lors du codage en js

Question

J'utilise jquery et je suis vraiment frustré par la façon dont j'écris mon code. J'ai commencé à coder en JS et Jquery il y a quelques mois et mon code ressemblait à ceci :

$(document).ready(function(){

$(function(){// a function that applies a plugin to an element});

$(function(){// another function that applies a plugin to an element});

$(function(){// and another function that applies a plugin to an element});

$(function(){// yet another function that applies a plugin to an element});
});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

En fait, ce que je faisais avant, c'était de tout mettre dans le fichier $(document).ready.

et voici comment je code maintenant

function a(){//a function that applies plugin to an element}

function b() {// another function}

$(document.ready(function(){a(); b();});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

une petite amélioration, mais je ne suis pas encore satisfait. Que se passe-t-il si je veux appeler certaines fonctions pour une certaine page seulement ? Y a-t-il des moyens d'accomplir cela ? Et je suis vraiment dégoûté de voir comment mon $(document) devient vraiment énorme quand j'utilise beaucoup de plugins.

Comment faites-vous pour écrire vos fonctions en jquery ?

Answer 1

Je suggérerais au moins d'utiliser des espaces de noms pour s'assurer de ne pas polluer l'espace de noms global. Par exemple :

var myNameSpace = {
a: function(){//a function that applies plugin to an element},
b: function() {// another function}
};

$(document).ready(function() {

myNameSpace.a();

});

Le principal avantage est que vous êtes en mesure de compartimenter votre code en unités de travail logiques qui se concentrent sur des tâches spécifiques. L'organisation du code s'en trouve considérablement facilitée.

Rebecca Murphey a rédigé un excellent article sur ce sujet que vous pouvez lire ici : http://bit.ly/6og36U

Vous pouvez également séparer vos JS dans leurs propres fichiers uniques et écrire une routine pour exploiter la méthode getScript() de jQuery afin de charger les fichiers nécessaires à la demande ( http://docs.jquery.com/Ajax/jQuery.getScript ). La clé serait de déterminer les dépendances dans votre script et de charger le fichier .js au moment approprié.

Answer 2

Je recommande d'avoir un seul fichier Javascript pour l'ensemble du site. Ce fichier ne doit contenir que des fonctions :

function a() { ... }
function b() { ... }

La raison en est qu'avec un seul fichier, il est mis en cache une fois (s'il est bien fait) et c'est tout. Et ensuite, j'utilise le JS en ligne sur chaque page que je mets :

$(function() {
  a();
  b();
});

Je n'ai pas vraiment trouvé le besoin d'avoir de multiples ready() appels.

La raison en est l'efficacité. Vous ne voulez pas exécuter du Javascript inutile et c'est pourquoi le fichier JS externe ne fait rien d'autre que d'inclure des fonctions que vous pouvez appeler. Ainsi, chaque page n'appelle que ce dont elle a besoin. De plus, vous pouvez facilement les trouver en regardant à un seul endroit (la page).

Answer 3

Vous pouvez essayer de diviser vos fonctions en plusieurs fichiers et de n'inclure que celles qui sont nécessaires pour chaque page. Dans chaque fichier, il y aurait des fonctions $(document).ready(function(){ ... });

Answer 4

Je pense qu'il y a deux façons d'y parvenir :

A : diviser JavaScript en plusieurs fichiers. (Un fichier de bibliothèque et chacun avec le code spécifique au côté qui appelle également la fonction ready).

B : faire un fichier avec tout le JavaScript et ensuite un fichier JavaScript en ligne comme ceci :

var tasksToRun = [ function_a, function_b,...]

Dans votre bibliothèque JavaScript, vous vérifiez la var globale et exécutez chaque fonction référencée dans le tableau.

Answer 5

Dans mes applications, j'ai tendance à écrire toutes les fonctions d'une section donnée de l'application dans une fermeture pour éviter les problèmes d'espace de noms.

Quelque chose comme ça :

(function($) {
    function a() {
       // stuff
    }
    function b() {
       // stuff
    }
    // ...
    $(function() {
        // invoke dom ready setup methods here
    });
})(jQuery);

Cela a pour avantage de permettre à mon code d'être utilisable dans d'autres pages qui peuvent utiliser le prototype ou d'autres bibliothèques js (dans les grandes applications web avec de nombreux développeurs comme celle sur laquelle je travaille, il est important de garder l'espace de noms propre).

Je n'ai généralement que un ready appel par fichier. Cet appel est responsable de la mise en place de toutes les choses liées à ce fichier. Cela permet à chaque fichier d'agir en quelque sorte comme une "bibliothèque" : les développeurs qui veulent utiliser la fonctionnalité n'ont qu'à l'inclure dans la page et à ajouter le balisage approprié, et la fonctionnalité se met en place toute seule.

J'admets avoir copié cette mise en page sur la façon dont plusieurs plugins jQuery sont construits.

J'aime la suggestion de cletus d'un seul fichier, mais seulement si l'application n'est pas trop grande. Il commence à être difficile à maintenir si vous avez trop de choses dans un seul fichier.