DOM - déclaration dynamique variable Javascript globale [Résolu]

[ionesco]

Bonjour,

Dans un retour AJAX, j'inclus un bout de code DOM qui inclut dynamiquement un fichier javascript et qui déclare une variable :

Code :

1
2
3
4
5
6
7
8
9
10
11
// inclusion du fichier user.js en DOM
var script = window.document.createElement('script');
script.setAttribute('src', '...../user.js');
script.setAttribute('type', 'text/javascript');
head.appendChild(script);
 
// déclaration de la variable global toto en DOM
var script = window.document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.text = 'var toto = "valeur de toto";';
head.appendChild(script);

Quand je réutilise la variable toto dans ma page, cela fonctionne sous Firefox, mais IE ne la reconnait pas!

Connaissez-vous une issue?


Merci.

[vermine]

Bonjour,

Vous pourriez peut-être essayer de déclarer la variable avec cette méthode-ci :

Code :

window["toto"] = "valeur de toto";

[ionesco]

La vermine a entièrement raison.

Cette façon de déclarer ne pose plus aucun problème.
Si vous savez la différence entre un window["toto"] = "val toto" et un var toto = "val toto", au niveau des interprétations, je veux bien la connaitre.

Un grand merci à vous.

[Bovino]

Le bout de code que tu as présenté est un retour AJAX, il est donc dans une fonction, du coup les variables que tu déclares sont attachées au scope de la fonction, pas à l'objet global.
A noter que la notation de vermine (que l'on peut aussi écrire window.toto) ne crée pas vraiment de variable, mais une propriété de l'objet window et comme window est implicite pour les instructions JavaScript, la notation toto renvoie la bonne valeur

[ionesco]

Envoyé par Bovino

Le bout de code que tu as présenté est un retour AJAX, il est donc dans une fonction, du coup les variables que tu déclares sont attachées au scope de la fonction, pas à l'objet global.

C'est bien dans un retour Ajax, mais pas dans une fonction, mais dans une balise script que j'interprète avec eval. Et comme j'ai mis "var" je pensais qu'elle aurait été global, donc visible par toute la page.

Merci pour cette explication sur l'objet window.

[sekaijin]

De façon générale
NE JAMAIS CRÉER DE VARIABLE GLOBALE

j'entends dans le fond "encore un ayatollah du code".
Oui ça parait dur mais c'est souvent bien plus facile à maintenir.

alors que faire pour respecter cette règle et tout de même résoudre ton problème.

ben déroger à la règle en ajoutant un corolaire
CRÉER QU'UN NAMESPACE
dans ton appli la première chose qu'elle fait c'est

Code :

monnamespace = {};

ainsi ton namespace est connu dans toute ton application.

par la suite tu peux donc ajouter à ton namespace des variables sans problèmes.

Code :

monnamespace .toto = "ceci";

ainsi partout ou tu serais tenté d'utiliser une variable globale tu peux utiliser une variable de ton namespace.

mais cela permet d'aller plus loin.
le conflit de non de variables ou de fonction entre scripts.

la cas classique tu écrit un truc du tonnerre et puis on beau jour tu tombe sur un script sur le net qui fait autre chose et qui te semble super. et qui peut t'être super utilise. tu le mets dans ta page et là catastrophe il utilise lui aussi la variable globale toto et machin et truc et et et .... mais aussi les fonctions chose et onTruc etc.

t'es dans la m#rd#! et tu te dis si je modifie la lib et qu'elle s'améliore il me faudra recommencer la prochaine fois et si je modifie mes variables et fonctions à moi je les utilise partout c'est beaucoup de boulot.

avec un namespace lors que défini tes fonction tu les mets dans le namespace

Code :

monnamespace.maFunction = function() {...

Du coup si t'a un pd conflit c'est que le nom de ton namespace est utilisé par une variable ou un fonction de la lib. il n'y a que lui à changer.

enfin pour en venir à ton problème directement créer un élément script qui va créer une variable est un peut lours pour pas grand chose. car lorsqu'un élément script est attaché au dom il entre dans une première phase qui détermine s'il doit être déféré ou pas. quoi qu'il soit déféré ou pas il passe ensuite dans le chargement du source même si c'est un script en ligne. le contenu du script est alors chargé et compilé mais pas exécuté.
si le script n'est pas déféré on attend que le script en cour soit terminé pour l'exécuter. s'il est déféré on attends que tout soit exécuté pour le faire
cela comprends tous les scripts en attentes et tous les évènements.

dans ton callback ajax tu peux très bien directement positionner ta variable.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
monnamespace.onResponse = function () {
  // inclusion du fichier user.js en DOM
  var script = window.document.createElement('script');
  script.setAttribute('src', '...../user.js');
  script.setAttribute('type', 'text/javascript');
  head.appendChild(script);
 
  monnamespace.toto = "valeur de toto";
}
 
var xhReq = createXMLHttpRequest();
 xhReq.open("GET", "get.phtml", true);
 xhReq.onreadystatechange = monnamespace.onResponse;
 xhReq.send(null);

peux importe comment tu code ton AJAX mais pour traiter la réponse tu ne peux qu'être dans une fonction.
si tu utilise jQuery ou autre la syntaxe te le cache mais une méthode est tout de même crée et c'est dans celle-ci que s'exécute le traitement du retour.


A+JYT

[Bovino]

Pour compléter la réponse de sekaijin, voir Espaces de noms en JavaScript