L'ORDRE des fichiers javascript est-il important lorsqu'ils sont tous combinés dans un seul fichier?

La commande est importante dans une ou plusieurs des situations suivantes:

• Lorsque l'un de vos scripts contient des dépendances sur un autre script.
• Si le script se trouve dans le CORPS et non sur la TÊTE. . MISE À JOUR: HEAD vs BODY ne semble pas faire la différence. La commande est importante. Période.
• Lorsque vous utilisez un code dans l'espace de noms global qui nécessite une dépendance sur un autre script.

La meilleure façon d'éviter ces problèmes est de s'assurer que le code dans l'espace de noms global soit à l'intérieur d'un wrapper $(document).ready() . Le code dans l'espace de noms global doit être chargé dans l'ordre tel que le code exécuté doit d'abord être défini.

La vérification de la console d'erreur JavaScript dans Firebug ou le débogueur Chrome peut éventuellement vous indiquer ce qui brise le script et vous faire savoir ce qu'il faut modifier pour votre nouvelle configuration.

En règle générale, les commandes ne sont pas importantes si les fonctions sont invoquées en fonction d'événements tels que la pagéead, les clics, les nœuds insérés ou supprimés, etc. Mais si les appels de fonction sont effectués en dehors des événements dans l'espace de noms global, c'est à ce moment-là que des problèmes surgiront. Considérez ce code:

Fichier JS: mySourceContainingEvilFunctionDef.js

 function evilGlobalFunctionCall() { alert("I will cause problems because the HTML page is trying to call " + "me before it knows I exist... It doesn't know I exist, sniff :( "); } 

HTML:

  <script> evilGlobalFunctionCall(); // JS Error - syntax error </script> <!-- Takes time to load --> <script type="text/javascript" src="mySourceContainingEvilFunctionDef.js"></script> ... 

Dans tous les cas, les conseils ci-dessus aideront à prévenir ces types de problèmes.

En guise de note, vous voudrez peut-être considérer qu'il existe certains avantages de vitesse pour utiliser la nature asynchrone du navigateur pour abaisser les ressources. Les navigateurs Web peuvent avoir jusqu'à 4 connexions asynchrones ouvertes à la fois, ce qui signifie qu'il est tout à fait possible que votre script unique puisse prendre plus de temps que le même script divisé en morceaux ! Il existe également Yahoo Research qui montre que la combinaison de scripts produit le résultat plus rapide, de sorte que les résultats varient d'une situation à l'autre.

Étant donné qu'il s'agit d'un équilibre entre le temps nécessaire pour ouvrir et fermer plusieurs connexions HTTP par rapport au temps perdu en vous limitant à une seule connexion au lieu de plusieurs connexions asynchrones, vous devrez peut-être effectuer des tests à la fin pour vérifier ce qui fonctionne le mieux dans votre situation . Il se peut que le temps nécessaire pour ouvrir toutes les connexions soit compensé par le fait que le navigateur peut télécharger tous les scripts de manière asynchrone et dépasser les retards dans les connexions d'ouverture / fermeture.

Cela dit, dans la plupart des cas, la combinaison du script entraînera probablement les gains de vitesse les plus rapides et sera considérée comme une meilleure pratique.

Oui, dépend beaucoup de ce que vous faites.

Par exemple, si a.js avait …

 var a = function() { alert('a'); } 

… et b.js avait …

 a() 

… alors vous ne voudriez pas inclure b.js avant a.js , ou a() ne sera pas disponible.

Cela s'applique uniquement aux expressions de la fonction; Les déclarations sont hiérisées au sommet de leur portée.

Quant à savoir si vous devez combiner jQuery, je pense qu'il serait préférable d'utiliser la copie hébergée de Google – l'ajouter à votre fichier combiné le rendra plus grand lorsqu'il y a une grande chance que le fichier soit mis en cache pour le client.

Lisez cette publication à partir de l'équipe Webkit pour obtenir des informations précieuses sur la façon dont les navigateurs chargent et exécutent des fichiers de script.

Normalement, lorsque l'analyseur rencontre un script externe, l'analyse est en pause, une requête est émise pour télécharger le script et l'analyse est reprise uniquement après que le script a été complètement téléchargé et exécuté .

Donc, normalement (sans ces attributs asynchrones ou différés ), les scripts sont supprimés dans l'ordre dans lequel ils sont spécifiés dans le code source. Mais si les balises de script sont dans <head> , le navigateur attendra d'abord que tous les scripts soient chargés avant de commencer à exécuter quoi que ce soit.

Cela signifie qu'il ne fait aucune différence si le script est divisé en plusieurs fichiers ou non.

Si je comprends votre question, je pense que vous demandez si cela importe où, dans un fichier, une fonction / méthode est définie, et la réponse est non, vous pouvez les définir n'importe où dans un seul fichier source. L'analyseur JavaScript sera lu dans tous les symboles avant d'essayer d'exécuter le code.

Si vous avez deux fichiers qui définissent des variables ou des fonctions portant le même nom, la commande qu'ils incluent changera la définition définie