Discussion :

[Rémy DEV]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function() {
 // CODE
})();

Qu'est ce que ça fait exactement ?

[SylvainPV]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Rémy DEV]

Merci pour cette réponse rapide et précise

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
MyLIB = {}
MyLIB.async = function (src) {
//..
}
 
MyLIB.async('ma_source');

[SylvainPV]

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.

[sekaijin]

tu peux éviter toute variables en utilisant une closure

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Rémy DEV]

Merci à vous deux pour toutes ces précisions.

Résolu