Bonnes habitudes JS

Ceci n'est pas un article de programmation ! Il ne s'agit que de quelques recettes d'organisation que je trouve utiles, validées par l'expérience.

Regrouper les fichiers JS

Évitez de multiplier les fichiers JS. Si votre pied de blog ressemble à ça…

<script src="gnagnagna/programme1.js"></script>
<script src="gnagnagna/programme2.js"></script>
<script src="gnagnagna/autre_programme.js"></script>
<script src="gnagnagna/encore_un_programme.js"></script>
<script src="gnagnagna/toujours_un_programme.js"></script>
<script src="gnagnagna/ciel_un_programme.js"></script>
<script src="gnagnagna/tiens_un_gadget.js"></script>

… collection de petits programmes glanés un peu partout, posez-vous des questions.

Explication. Quelles que soient la taille ou la nature (programme JS, image, autre…) d'un fichier placé sur le Web, accéder à ce fichier prend du temps. Vérifier qu'il est bien là, vérifier qu'il est ou non dans le cache du navigateur, finalement dire au serveur qu'on l'a bien reçu : il y a tout un dialogue entre le client et le serveur, en plus du transfert proprement dit. Pour un fichier JS, généralement léger (quelques Koctets), ce temps peut facilement dépasser celui du chargement – et même si le fichier est déjà en cache, le dialogue a bien lieu.

Circonstance aggravante : le navigateur ne peut pas demander le transfert en parallèle de plusieurs fichiers JS, alors qu'il peut le faire pour des images ou des vidéos.

Dans notre exemple il sera donc utile de copier/coller ces sept petits fichiers les uns à la suite des autres dans un seul gros fichier, pour arriver à

<script src="gnagnagna/ma_boite_a_trucs.js"></script>

qui sera notablement plus rapide.

Savoir emballer un programme

Si vous récupérez un programme JavaScript quelque part sur le Web pour l'installer chez vous, et même si vous n'êtes pas programmeur, regardez un peu par quoi il commence. Si, en négligeant les commentaires, ça ressemble à ça :

var i, j, menu /* tous noms de variables */

… prudence. Ce programme ne va pas vous piquer votre code de carte bleue mais il se peut qu'il perturbe le fonctionnement d'autres programmes que vous auriez déjà installés.

Je vous suggère d'ajouter une ligne au début de ce programme et une autre à la fin, comme ceci :

(function () {
.... ici le programme qui vous intéresse...
})();

Cette manip' est inoffensive et peut vous épargner bien des arrachages de cheveux. Dans le doute, appliquez-la.

Sa justification se trouve dans l'article Démontage : détecter en CSS la présence de JavaScript