Meilleure façon d'organiser le code Javascript

Question

Comment les gars organisent-ils votre code javascript? Je sais que c'est une bonne pratique de stocker le code dans un fichier .js externe et c'est bien pour le code qui est exécuté sur plusieurs pages, mais comment organisez-vous si vous avez, disons 20 pages, et seulement 1 d'entre elles utilise un fonction. Créez-vous un nouveau fichier externe pour cette page ou créez-vous le code en ligne?

Answer 1

je fais deux choses:

1. je mets Javascript de tout mon site dans un ou plusieurs fichiers;
2. J'inclus ce fichier ou les fichiers sur chaque page qui utilise n'importe quel Javascript;
3. Ces fichiers sont mis en cache efficacement de sorte qu'ils ne sont jamais téléchargés qu'une seule fois (jusqu'à ce qu'ils changent); et
4. Les pages appellent les fonctions dont elles ont besoin à partir de ces fichiers externes.

Si votre site est une page alors mettez-le en ligne.

Si votre site est de 20 pages et qu'ils utilisent tous un peu de Javascript, mettez tout dans un fichier, incluez-le sur chaque page et appelez les fonctions avec Javascript inlien comme nécessaire dans chaque fichier. J'ai écrit à ce sujet et plus encore dans Supercharging Javascript in PHP. Bien sûr, c'est spécifique à PHP, mais les principes sont universels.

Fondamentalement, chaque requête HTTP supplémentaire est un problème. Donc, si vous avez 20 pages chacune avec un fichier Javascript différent, c'est un problème, même si ces fichiers sont petits. Il est préférable de combiner tout ce Javascript en un seul fichier, de le télécharger une seule fois (avec une mise en cache efficace) et d'utiliser ce dont vous avez besoin.

Pour vous donner un exemple.Fichier externe JS contient:

function delete_user(evt) { ...} 
function suspend_user(evt) { ... } 
function unsuspend_user(evt) { ... } 

une de vos pages Web contient:

$(function() { 
    $("#delete").click(delete_user); 
    $("#suspend").click(suspend_user); 
    $("#unsuspend").click(unsuspend_user); 
}); 

De cette façon, vous obtenez un JS externe qui contient tous Javascript de votre site, mais rien de tout cela est effectivement utilisé. L'utilisation provient du code en ligne dans les pages. De cette façon, il n'y a pas de surcharge d'avoir le plus grand fichier JS. Quoi que vous fassiez, ne mettez pas toute l'initialisation dans votre fichier Javascript. Une fois, j'ai fait cette erreur et j'ai placé une énorme fonction $ (function() {...} dans le fichier externe parce que si les identifiants correspondants n'étaient pas dans la page, il ne se passerait rien. code pour ajouter près d'une demi-seconde à l'heure de chargement de la page (et le site n'a pas big)

Answer 2

Pour une seule fonction, il serait préférable de coder en ligne. Je n'inclurai pas un fichier de script 100KB Util pour appeler simplement une fonction Trim à l'intérieur.

Si le fichier est déjà mis en cache, cela ne posera aucun problème si vous le faites dans une page qui n'appelle qu'une seule fonction à l'intérieur du fichier.

Answer 3

Le navigateur ne devrait pas télécharger à nouveau le fichier javascript une fois qu'il l'a, donc je le mettrais dans le fichier Javascript unique. Cela enregistre une autre connexion/requête sur le serveur Web, et il conserve le code au même endroit plutôt que d'avoir des balises script et du code dans vos fichiers HTML/JSP/PHP/etc. C'est à dire, c'est plus maintenable, et c'est très peu de frais généraux pour obtenir le code (sauf si c'est un monstre de 1000 lignes, mais c'est un autre problème entièrement) même s'il n'est pas utilisé.

Non pas que je n'ai pas de blocs script dans certains fichiers, pour des cas très très spécialisés. En fin de compte, cela revient à ce que vous êtes content - mais la cohérence à travers le projet est ce qui est le plus important, donc ne pas avoir un script unique dans un endroit, et ensuite faire quelque chose de différent ailleurs.

Answer 4

Je dirais le mettre dans un fichier externe. Les chances sont que vous aurez besoin d'ajouter de nouvelles fonctions de toute façon, mais aussi, d'un point de vue SEO, le conserver dans un fichier externe est préférable.

Answer 5

Cela dépend. Vous pourriez avoir un tas de pages Web.Une de ces pages pourrait utiliser seulement une fonction et les autres pages pourraient utiliser d'autres fonctions différentes.J'aurais d'abord classer les fonctions dites fonctions utilitaires, puis écrire un Utility.js.Il en va de même pour les autres fonctions et les mettre dans leurs fichiers respectifs js.

Answer 6

TOUJOURS mettre JavaScript dans un fichier externe au HTML Le problème avec JavaScript À existe dans la page est qu'il existe généralement dans l'espace de noms global, ce qui pourrait facilement provoquer des collisions d'espaces de noms qui font planter le code.

Alors, toujours mettre JavaScript dans un fichier externe. Cela dit, vous devez organiser votre code de manière orientée objet. Essayez de capturer une application entière représentant un seul point d'exécution à une seule fonction nommée. Toujours écrire votre code en utilisant une seule commande var par fonction, qui devrait aller en haut de la fonction, afin que votre code soit plus facile à lire. Assurez-vous que toutes les variables et fonctions sont déclarées avec une commande var ou qu'elles seront dans l'espace de noms global, ce qui est un échec potentiel. Placez des sections d'exécution d'une fonction géante dans des fonctions enfants plus petites, car cela facilite le maintien du code lorsque vous pouvez pointer vers un bloc nommé particulier lors du débogage ou de l'écriture d'améliorations. En outre, exécutez toujours votre code via JSLint pour vérifier la précision de la syntaxe.

Answer 7

Si j'ai le choix, je mets les fonctions JS dans des fichiers externes, mais pas tous dans un seul fichier. Cache ou pas de cache, je groupe les fichiers par leur fonctionnalité et les organise de la même façon que les paquets Java. Si j'ai une fonction utilitaire, dites quelque chose de générique comme trim(), qui va au plus haut fichier JS et toutes les pages peuvent l'utiliser. Si j'ai quelque chose de spécifique à une partie du site (inutilisé dans d'autres parties) qui va dans quelque chose comme un sous-paquet, juste pour cette partie spécifique ... et ainsi de suite.

Bien sûr, vous devez utiliser le bon sens pour ne pas en faire trop, et disons une fonction par fichier JS. Si vous avez des fichiers JS affinés, cela vous affectera lorsque votre site évoluera et vous vous retrouverez à déplacer des fonctions de sous-packages vers un package supérieur ou inversement. Je pense que la fonctionnalité d'un parent JS et une fonctionnalité JS par site devraient, la plupart du temps, suffire.

Answer 8

Si vous ne disposez que d'une petite quantité de code, je ne crois pas que cela en vaille la peine. En fonction de la quantité de JS dont vous disposez, considérez un processus de génération qui peut concaténer vos fichiers JavaScript séparés en un seul téléchargement minidé.

YUI est incroyablement modulaire.Ils ont un ensemble d'inclusions «de base» et vous pouvez ensuite les compléter avec les widgets que vous utilisez réellement. Par exemple, je n'ai aucun intérêt à utiliser leur widget de téléchargement de fichier donc n'incluez jamais le JS pour cela.

Cache le JS pour une date éloignée dans le futur. Si vous devez apporter une modification, ajoutez un tampon de version à la fin de l'attribut SRC, c'est-à-dire my-code.js? V = 91

Utilisez les espaces de noms pour éviter de polluer l'étendue globale. Encore une fois, YUI est très organisé à cet égard - voir la fonction YAHOO.namespace().