Publié dans : JavaScript Mania

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 

Vendredi 25 mai 2012 5 25 /05 /Mai /2012 10:34
- Par Aïe mes doigts ! - Communauté : Aide
Mazette ! Déjà 7 mots ! - Et si vous écriviez quelque chose ?
Retour à l'accueil

Commentaires

Coucou Bren,
Bon samedi, et merci pour ton article.
Tu vois comme je suis nulle, rien que ceci :

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 à



comment les coller à la suite des autres. Pour n'avoir qu'une seule ligne. Dois-je les mettre à la suite les uns des autres comme ceci :



Est-ce que la ligne serait bonne ? certaine que non mais bon, c'est le départ alors c'est compliqué... désolée pour ces questions,

Bien amicalement Bren.
Commentaire n°1 posté par Sagan33 le 26/05/2012 à 12h53

Il manque quelques informations dans ta question mais je crois pouvoir répondre :-)

Oublions un instant les histoires de lignes <script> et autres. Le noeud de l'histoire est simplement de créer un seul gros fichier par copier/coller des sept (dans mon exemple) petits fichiers. Le bloc-notes windows devrait suffire pour faire ça. Ensuite on remonte ce gros fichier dans l'admin, exactement comme on l'avait fait pour les sept petits.

Pour finir, on met dans le HTML une seule ligne <script src="le_gros_fichier.js"></script> au lieu des sept lignes correspondant aux sept fichiers.

Est-ce plus clair ainsi ?

Réponse de AïmD ! le 26/05/2012 à 15h34
Merci Bren pour ces précieuses précisions.
C'est très clair, j'ai compris ! c'est exactement le même procédé que pour le js.
Je vais alléger mon blog, surtout ce MiroirAuxEssences qui est très long à charger.
Je te souhaite un bon long week end.
A bientôt !
Commentaire n°2 posté par Sagan33 le 26/05/2012 à 18h37
STP, j'aurais une autre question : quand on regroupe ces fichiers js, peut-on y rajouter, à la suite le script linkwithin par exemple, + celui d'un compteur néo-wortex + un autre script, ou le regroupement ne doit-il se faire qu'avec des fichiers js ?
Merci d'avance Bren.
Commentaire n°3 posté par Sagan33 le 26/05/2012 à 20h14

Tous les scripts que tu mentionnes sont aussi des fichiers js, écrits en JavaScript. On peut donc, théoriquement, les copier bout à bout après les autres.

Je crois cependant que ce n'est pas prudent : ils travaillent avec des données issues du serveur de linkwithin, de néoWortex, de etc. . Ils sont tenus à jour par ces sociétés. Les recopier dans ton admin reviendrait à les figer dans leur version du moment et à te couper des évolutions futures (améliorations, corrections de bugs et autres). Donc non, laisse-les tranquilles.

Réponse de AïmD ! le 27/05/2012 à 10h47
Encore merci pour ta réponse Bren. Je l'attendais pour les regrouper.
Si j'ai un autre problème, je sais qu'ici j'ai de l'aide. C'est extrêmement motivant !
Belle journée à toi.
Commentaire n°4 posté par Sagan33 le 27/05/2012 à 12h41
C'est encore moi ! ai-je du mal faire quelque chose mais ça ne fonctionne pas. Heureusement que j'avais sauvegardé le module, j'ai pu rectifier mais ça m'avait enlevé la bannière.
Je vais tenter de faire pareil sur l'autre blog, je reviens te tenir au courant.
Byyye
Commentaire n°5 posté par Sagan33 le 28/05/2012 à 20h02

Je viens de jeter un oeil à Terres et Boissons, en espérant que c'est bien le blog concerné. Il y a tant de scripts de provenances diverses que je pense que regrouper deux ou trois de mes misérables fichiers ne changera pas grand-chose !

Réponse de AÏmD ! le 30/05/2012 à 14h03
Bonsoir Bren,
Merci d'être allé sur Terre&Boissons. En fait c'était sur le MiroirAuxEssences. Mais ton idée est la bonne et peut s'appliquer là-bas aussi. Sur LMAE, il y a encore plus de scripts alors je ne retente pas. Par contre, je vais revoir ton article précédent. Si je peux faire une amélioration pour mon blog.
Belle fin de journée à toi.
Bien amicalement.
Geneviève.
Commentaire n°6 posté par Sagan33 le 30/05/2012 à 21h28
Bonsoir Bren,
Pardonne mon inversion d'article, mais rendons à César ce qui appartient à César... les pleurs... rendent heureux.

Ton article concernant le javascript est très intéressant. J'en prends bonne note. J'ai à peu près compris les liens html, css et OB; Déjà un très grand pas.
Il y a autre chose que je voulais essayer de voir dans ton blog, je vais remonter 3 articles au-dessus.
Très bonne soirée à toi.
Bien amicalement.
Geneviève
Commentaire n°7 posté par Sagan33 le 01/06/2012 à 23h05

Ah, ça progresse ! Bonne nouvelle !

Réponse de AïmD ! le 02/06/2012 à 09h55

Commentaires

Calendrier

Octobre 2014
L M M J V S D
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
<< < > >>

overblog

Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés