Ces deux codes sont-ils équivalent ?

Bonjour,

J'ai plusieurs scripts js à charger de façon asynchrone dans ma page.
(Dons celui de google-analytics qui me sert d'exemple.)

Le code de base de google-analytics est le suivant :

Code:

---

1 2 3 4 5 6 7 8

<script> (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

---

Du coups ça donne envie d'écrire une fonction async(src) pour rendre le code plus lisible :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script> function async(src) { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = src; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); }   async(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'); //async('un_autre_script'); </script>

---

Mais est-ce vraiment équivalent ?

Dans le code de google-analytics y'a ça :

Code:

---

1 2 3

(function() { // CODE })();

---

Qu'est ce que ça fait exactement ?

C'est ce qu'on appelle une fonction anonyme immédiatement invoquée. Cela permet d'éviter la déclaration de variables dans le scope global, car elles sont déclarées dans le scope local de cette fonction anonyme et immédiatement oubliées dès qu'on quitte cette fonction.

Ton code est certes plus lisible, mais il crée une variable globale async :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script>function async(src) { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = src; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); } async(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'); //async('un_autre_script'); </script> <script> if("async" in window){ alert("async est déclaré dans le scope global: "+ async); }</script>

---

Eviter les variables globales est une bonne pratique car permet de se prémunir des conflits de variables accidentels.

Merci pour cette réponse rapide et précise :)

C'est peut-être plus propre comme ça ?

Code:

---

1 2 3 4 5 6 7

MyLIB = {} MyLIB.async = function (src) { //.. }   MyLIB.async('ma_source');

---

Au lieu d'avoir une globale async tu as une globale myLIB. Si tu te sers de cette globale myLIB pour mettre toutes les variables que tu as besoin de récupérer partout, c'est effectivement un moindre mal: mieux vaut une seule globale que cinquante. On parle alors de namespace. C'est ce que je fais la plupart du temps.

tu peux éviter toute variables en utilisant une closure

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script> //ici async n'existe pas (function() { //ici async est crée var async = function(src) { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = src; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); } //ici async n'existe async(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'); //async('un_autre_script'); })(); //ici async n'existe plus</script>

---

A+JYT

Merci à vous deux pour toutes ces précisions.

Résolu