Comment organiser le chargement de JS?

Question

J'ai un projet sérieux avec un gros fichier JS avec beaucoup de fonctions, et maintenant j'ai quelques questions à ce sujet.

32. Bien sûr, je vais coller tous mes fichiers js et gzip, mais j'ai une question sur les initialisations des fonctions. Maintenant j'ai beaucoup, beaucoup de fonctions simples, sans aucune classe. J'ai entendu dire qu'il est préférable de séparer mon code en plusieurs classes, et je veux le faire, et sur la génération de la page, marquer dans mon script les classes dont j'ai besoin sur une page spécifique. Par exemple, je n'ai pas besoin d'un éditeur WYSIWYG sur la page principale, et ainsi de suite, donc je vais créer un var spécial avec un tableau de classes js dont j'ai besoin. Est-ce la meilleure pratique? Les clients obtiendront-ils des économies de performance et de mémoire? Supposons que j'ai plusieurs liens avec des actions onclick. Quoi de mieux: les laisser comme <a href="#" onclick="return smth();"> ou réécrire comme <a href="javascript:void(0);"> et créer jquery .bind dans la section document.ready? Mais que se passe-t-il si le client veut cliquer sur quelque chose avant que le document ne soit prêt? Après un clic sur quelque chose, je dois créer un div avec un code HTML statique spécifique. Où est-il préférable de stocker ce contenu? Dans certains var dans ma classe? Ou peut-être dans un modèle?

Answer 1

Je l'habitude d'organiser mon JavaScript en utilisant l'espace de nommage pour empêcher le nom de la fonction heurtant et encore ajouter chaque objet dans son propre fichier .js à des fins d'organisation

var MyObject = function() { 
     return { 
      method_1 : function() { 
       // do stuff here 
      }, 
      method_2 : function() { 
       // do stuff here 
      } 
     }; 
    }(); 

    MyObject.method_1(); 
    MyObject.method_2(); 

j'importer alors tout ce qui est nécessaire sur mes pages. Avoir quelques fonctions globales supplémentaires qui ne sont pas utilisées sur une page ne fera pas de changement notable dans les performances.

Certaines personnes transforment l'ensemble du HTML en un grand débat philosophique ... pour moi, c'est sale, mais facile à lire et à mettre en œuvre rapidement. événements de liaison fonctionne très bien et sépare complètement JavaScript de HTML, mais peut parfois être difficile à maintenir si votre code HTML maintenu par de nombreux développeurs devient très bâclée

Garder les bits HTML en JavaScript a bien fonctionné pour moi

Answer 2

Vous pourriez aussi être intéressé par le compilateur JavaScript Google Closure.

Aussi: Si votre JS est assez grand pour affecter les performances, vous pouvez réellement finir par obtenir meilleures performances de fichiers séparés et de la charge en fonction de ce que votre page doit d'abord ou la charge à la demande (via jQuery getScript) .

Vous pouvez également examiner les types d'actions que les utilisateurs doivent utiliser avant que le DOM soit prêt.

Comme pour HTML dans JS (ou vice-versa). Ça dépend. Combien de HTML construisez-vous? En général, je ne mets pas plus d'une ligne de HTML dans une instruction .html(). Si c'est vraiment plus que cela, je regarde une solution différente (comme le retirer d'une autre source à la demande ou le mettre quelque part, caché, dans la page et l'arracher).