Variables globales en javascript

Version imprimable

31/05/2011, 12h13
link_915

Variables globales en javascript
Bonjour,

J'ai un problème de variables :

En fait j'ai un fichier JS (main.js) qui va avoir besoin de variables présentes dans d'autres fichiers .js (var1.js , var2.js, var3.js, etc ...)

exemple main.js :
Code:

1 2 3 4 5 items: [login, var1, var2, var3 ]
exemple var1. js :

Code:

var var1 = 3

voilà je sèche :)

merci d'avance,

link_915
31/05/2011, 12h45
RomainVALERI

Citation:

Envoyé par link_915

voilà je sèche :)

A quel niveau ? :koi:

Aucun problème sur le principe d'accéder à des variables définies dans des fichiers séparés. Quel est le problème observé ?

Code:

1
2
3
4
5
items: [login,
	                var1,
	                var2,
	                var3
	        ]

au depart c'est pas du js ...

31/05/2011, 13h34
Bovino

Mouais... tu pourrais essayer d'être un peu plus clair pour décrire ton problème...

Alors si je suppose que tu déclares items comme un tableau dans un objet, j'espère que tu n'espère pas que

Code:

var var1 = 3

va référencer la valeur du même nom dans le tableau... :koi:

En tout état de cause, item (qui est fort maladroit comme nom de propriété puisque c'est aussi un mot clé du langage) est très probablement erroné puisque dans un tableau, il faut passer des valeurs, or toi tu passes des noms inconnus de JavaScript.
01/06/2011, 23h25
Watilin

Moi je veux voir l'objet qui est autour de item.

Citation:

Envoyé par Bovino

item (qui est fort maladroit comme nom de propriété puisque c'est aussi un mot clé du langage)

item, un mot-clé de JS ? :koi: Tu dis ça parce que la balise code le colore en bleu ? :mouarf:
02/06/2011, 00h51
RomainVALERI

Citation:

Envoyé par Watilin

Moi je veux voir l'objet qui est autour de item.

item, un mot-clé de JS ? :koi: Tu dis ça parce que la balise code le colore en bleu ? :mouarf:

Bon, y'a bien NodeList.item ou plus généralement HTMLCollection.item, mais comme mot réservé, non, en effet :? D'ailleurs, pourquoi est-ce que la coloration le mentionne en bleu au fait, j'avais jamais remarqué ? :koi:
02/06/2011, 08h45
Bovino

item est une méthode native du DOM JavaScript (toutes les collections et le enumerables), ça en fait donc un mot clé du langage...
J'imagine que s'il était question d'une variable alert par exemple, il y aurait plus de consensus sur le fait que c'est maladroit, pourtant, alert est aussi une méthode de l'objet window.
Alors utiliser ce genre de nommage est maladroit, pas interdit. Maladroit parce que c'est potentiellement source de confusion, pour la maintenance du code bien sûr, mais aussi dans certains cas pour JavaScript.

@Romain : tu auras noté que j'ai bien dit : "qui est fort maladroit comme nom de propriété puisque c'est aussi un mot clé du langage" et non "qui est interdit comme nom car c'est un mot réservé du langage". :whistle:
02/06/2011, 11h03
NoSmoking

Citation:

Envoyé par Bovino

Alors utiliser ce genre de nommage est maladroit, pas interdit. Maladroit parce que c'est potentiellement source de confusion, pour la maintenance du code bien sûr, mais aussi dans certains cas pour JavaScript.

d'autant que l'on peut souvent trouver un mot en français, c'est plus facile pour nous on possède un dictionnaire très riche, levant toute ambiguïté.
02/06/2011, 11h17
RomainVALERI

On est tous bien d'accord sur l'emploi maladroit de ce type de mots-clés ^^ pour ce qui est des "mots réservés", au temps pour moi, ce n'est pas la même chose :aie:

Et de toutes façons, comme dit NoSmoking, le vocabulaire francais permet d'éviter la plupart de ces conflits potentiels :)
02/06/2011, 13h10
dukej

Citation:

Envoyé par Bovino

item est une méthode native du DOM JavaScript (toutes les collections et le enumerables), ça en fait donc un mot clé du langage...

@Romain : tu auras noté que j'ai bien dit : "qui est fort maladroit comme nom de propriété puisque c'est aussi un mot clé du langage" et non "qui est interdit comme nom car c'est un mot réservé du langage". :whistle:

http://louvreuse.net/images/stories/.../facepalm1.jpg
Quand est-ce que tu comprendras que ce que tu dis n'a pas de sens, sépare un moment le DOM du Javascript, le JS peut-être utilisé sans DOM.
Et quand tu codes un objet en JS tu as le droit d"utiliser les noms de propriétés que tu veux sur un objet et ce n'est certainement pas maladroit.

si tu t'amuses à venir rajouter des propriétés sur un objet du DOM, alors que cette propriété est native du DOM, là oui c'est n'importe quoi. Mais venir rabacher à chaque fois que l'utilisation d'un nom de propriété dans un objet/classe purement js est maladroit parce qu'il existe dans un objet X ou Y du DOM, c'est aussi du grand n'importe quoi
02/06/2011, 15h39
Bovino

8O
J'avoue que tes arguments sont impressionnants.

Citation:

sépare un moment le DOM du Javascript

je veux bien, mais vu que la quasi totalité des questions posées sur ce forum sont liées au JavaScript coté navigateur, ça va devenir compliqué d'y répondre :roll:

Citation:

le JS peut-être utilisé sans DOM

tu aurais un exemple concret dans le cadre d'une page Web ? :koi:

Citation:

Quand est-ce que tu comprendras que ce que tu dis n'a pas de sens

Ben, quand tu arrêteras de sortir des fèves comme ça :aie:
Dans le cadre d'une page Web, l'interface DOM est pleinement du JavaScript, ne t'en déplaise, tout comme la gestion des bases de données en PHP est du PHP bien qu'il soit possible d'utiliser des bases de données sans PHP ou PHP sans extensions sur les bases de données !
JavaScript étant un langage de script, son vocabulaire est complété par l'interface que lui offre son environnement.

Ensuite, pour ce qui est du nommage, je peux bien comprendre que tu ne sois pas d'accord sur ce qui est maladroit ou non, mais si on suit ta logique, tout ce qui n'est pas interdit n'est pas maladroit, ce qui autorise des noms de propriétés comme "class" ou même "un nom de propriété bien pensé" qui, bien qu'autorisés, me semblent maladroits. Et comme j'ai tendance à appliquer les mêmes règles à tous les types de nommage (variables, fonctions, paramètres, propriétés), je considère un nom comme setTimeout ou alert maladroit (ce ne sont pourtant que des noms de méthodes de l'objet DOM window), je considère au même titre maladroit d'utiliser comme noms n'importe quel nom de propriété ou de méthode natif du langage dans le contexte d'exécution.
02/06/2011, 17h18
RomainVALERI

Citation:

Envoyé par dukej

*facepalm*
[...] Mais venir rabacher à chaque fois que l'utilisation d'un nom de propriété dans un objet/classe purement js est maladroit parce qu'il existe dans un objet X ou Y du DOM, c'est aussi du grand n'importe quoi

8O Range ton flingue, cowboy, tu t'es gourré de cible :aie:

Ni dans ce post ni dans d'autres à ma connaissance Bovino ne s'est fait le censeur borné des pratiques des autres : il a bien dit "maladroit", et il a argumenté. Libre à chacun d'en tirer son propre jugement, de contre-argumenter, etc.

Et dis-moi au fait, quel est l'intérêt d'utiliser un des très très très rares mots déjà utilisés dans le DOM pour le choix d'un identificateur (DOM ou hors-DOM d'ailleurs) ? :koi:
02/06/2011, 18h44
Watilin

Moi ça m'arrive d'utiliser item comme nom de variable quand j'itère sur une nodeList. Ce n'est pas dérangeant dans le sens où la propriété item a un cadre bien précis. Il y a peu de risque de mauvaises surprises.

Dans le cas présent, je parie que c'est du JSON, et que donc ça vient d'un serveur qui a de fortes chances de ne pas tourner en JS. De plus, c'est possible que le code qui génère le JSON ait été écrit par quelqu'un d'autre que link_915, du coup ce serait pas lui qui décide…
02/06/2011, 18h46
sekaijin
bon après tout ça si nous revenions à la question de départ

si j'ai bien compris tu as 4 script dont 1 main.js utilise des variables des autres

il n'y a pas de pb à faire cela.
il suffit de s'assurer que les 3 premier script sont correctement exécuté avant d'exécuter le dernier main.js.

il faut donc s'assurer des cycles d'exécution.
si la variable est définie dans le script directement est que celui-ci n'a pas d'attribut defer alors la variable doit exister à la fin du script
si l'attribut defer est présent la variable n'existera qu'après le chargement complet du DOM et sa fermeture.
si la definition est dans un gestionnaire d'événement
il est nécessaire de s'assurer que l'événement aura lieu avant l'exécution du code de main.js.

Je n'aime pas les variables globales et généralement je n'en ai qu'une
dans ton cas tu peux créer le tableau d'abord
chaque script ajoute ensuite des valeurs dans le tableau

Code:

myNameSpace= {items: ['login']

var1.js

Code:

myNameSpace.items.push(3);

cela évite de créer des variables pour ensuite mettre leur valeur dans un tableau.
var1.js

Code:

var1=3;

main.js
Code:

1 2 3 4 myNameSpace={items: [ 'login', var1 ]
quant à l'utilisation des mots comme items je ne les utilise dans mes propres objets que s'il ont la même sémantiques que dans les objets standards. je ne mettrais l'attribut length à mon objet que s'il représente la longueur courante d'une collection. ce qui implique que l'attribut doit être maintenu correct par l'objet. si je ne peux atteindre cette spécification je n'utilise pas l'attribut length. s'il ne s'agit pas du nombre d'élément d'une collection je cherche un nom plus approprié, s'il s'agit bien de cette taille mais que je ne peux garantir qu'il est maintenue alors je préfère le calculer et je ne mets pas l'attribut length mais la méthode getLength
mon but est qu'il n'y ai aucune ambiguïté par rapport à ce qu'un développer js connais déjà dans le langage et les objets standards.

A+JYT
03/06/2011, 11h08
dukej

Citation:

Envoyé par Bovino

8O
J'avoue que tes arguments sont impressionnants.

je veux bien, mais vu que la quasi totalité des questions posées sur ce forum sont liées au JavaScript coté navigateur, ça va devenir compliqué d'y répondre :roll:

tu aurais un exemple concret dans le cadre d'une page Web ? :koi:

Ben, quand tu arrêteras de sortir des fèves comme ça :aie:
Dans le cadre d'une page Web, l'interface DOM est pleinement du JavaScript, ne t'en déplaise, tout comme la gestion des bases de données en PHP est du PHP bien qu'il soit possible d'utiliser des bases de données sans PHP ou PHP sans extensions sur les bases de données !
JavaScript étant un langage de script, son vocabulaire est complété par l'interface que lui offre son environnement.

Ensuite, pour ce qui est du nommage, je peux bien comprendre que tu ne sois pas d'accord sur ce qui est maladroit ou non, mais si on suit ta logique, tout ce qui n'est pas interdit n'est pas maladroit, ce qui autorise des noms de propriétés comme "class" ou même "un nom de propriété bien pensé" qui, bien qu'autorisés, me semblent maladroits. Et comme j'ai tendance à appliquer les mêmes règles à tous les types de nommage (variables, fonctions, paramètres, propriétés), je considère un nom comme setTimeout ou alert maladroit (ce ne sont pourtant que des noms de méthodes de l'objet DOM window), je considère au même titre maladroit d'utiliser comme noms n'importe quel nom de propriété ou de méthode natif du langage dans le contexte d'exécution.

Décidément on ne sera jamais d'accord, mais tu fais fausse route en venant critiquer le terme "item" dans un objet JS et en disant qu'il est utilisé par le DOM dans une collection. Mais on s'en cogne puisqu'il sont totalement différents et que item n'est pas un mot clé.

Ce qui serait gênant serait de faire :
obj : {
'class' : 1,
'parseInt' : 2
}
etc...
Là oui tu utilises des mots clé du langage et ce n'est pas trop conseillé. Mais venir rabacher le même message pour 2 choses complètement différentes, c'est un peu déplacé.
03/06/2011, 11h44
link_915

Bonjour, merci de votre aide.

le problème est résolu, aucun problème pour utiliser des variables dans des fichiers séparés effectivement, mon problème venait de la génération de ces fichiers javascript en fin de compte (via java).

Du coup je comprenais vraiment pas pourquoi ça ne voulait pas fonctionner et voilà pourquoi je séchait.

merci encore,

link_915
03/06/2011, 13h56
sekaijin
je reviens sur les variables globales
pour faciliter la maintenance et améliorer les perfs

j'évite tout ce qui est global, et tous ce qui est js généré dynamiquement.

par principe (donc à ne pas suivre dans l'absolu mais à réfléchir avant d'agir) le javascript est dans un fichier statique est ne contient pas de données.

la partie dynamique du site génère des data et jamais de fonctions.

pour éviter les globales voilà comment je fais.
un premier script statique qui définit un objet (qui vas servir d'espace de nom) dans celui-ci je mais les éléments de base de mon appli.
Code:

1 2 3 4 myApp={ 'name':'sampleApp', ... }
ensuite un script dynamique vient ajouter les éléments dynamiques de l'application.
Code:

1 2 3 4 5 myApp.user={ 'name':'<* echo userName *>', 'lang':'<* echo userLanguage *>', ... }
si je dois définir différement une fonction ou une méthode en fonction de ce que fait le serveur je ne créé pas la fonction dynamiquement avec le langage serveur mais je charge un script statique ou un autre qui qui chacun d'eux contient la définition des différents cas. cela m'arrive très rarement. j'ai souvent rencontré la génération dynamique de fonction dans le cadre de l'internationalisation.

Code:

formatDate=function(...)

qui va formater la Date en fonction de la langue de l'utilisateur. dans ce genre de cas j'ai un fichier statique par langue et je charge le fichier de la langue. mieux je définit une seule fonction format qui prends en compte un pattern de format du coup la fonction n'est compilé qu'une fois par le poste client

depuis que je fais ainsi je n'ai plus de pb de conflit de nom avec des script extérieurs le seul objet de mon des étant myApp
les scripts statiques sont toujours mis dans les caches (Webcontener JEE, frontal HTTP, Proxy, navigateur, moteur JS)
question perf c'est incomparable. un js généré dynamiquement par le serveur suit le chemin complet ci dessus l'app du webcontener génère le js qui traverse tout et comme il est dynamique il n'est pas mis en cache seul le moteur JS garde la version compilé. à l'appel suivant du même JS comme il est dynamique il reprends complètement le même chemin. et ce pour tous les utilisateurs.

s'il est statique le premier utilisateur à l'utiliser suit le chemin complet. mais à chaque étape le script est mis en cache. un autre utilisateur du même sous réseau n'ira le chercher que dans le proxy local un utilisateur d'un autre réseau ira le chercher dans le cache du frontal et l'utilisateur local sur le même browser ira le chercher dans le cache du navigateur et s'il recharge la page le moteur JS ne le rechargera pas si ses dépendances n'ont pas changé.

A+JYT
08/06/2011, 10h21
link_915
Bonjour, je réouvre le thread car je me suis rendu compte que tout ne fonctionnait pas comme je le voulais :aie:

En fait, j'ai un fichier index.js que j'ai du éclater en plusieurs fichiers.js

Ces fichiers.js représentants chaque item à inserer dans le tableau si l'utilisateur les a choisis.

Le problème est tel que mon application se lance, avec mes variables entrées dans le tableau.

main.js :
Code:

1 2 3 4 5 myNameSpace={items: [ item1, item2, item3 ]
En revanche, quand je souhaite faire dans item1.js

Code:

myNameSpace.setActiveItem(item2)

j'ai une erreur m'indiquant que item2 est indéfini. Si quelqu'un à une idée :)

merci.
08/06/2011, 10h43
Bovino

Citation:

Envoyé par link_915

j'ai une erreur m'indiquant que item1 est indéfini. Si quelqu'un à une idée :)

Euh... j'imagine que tu parles de item2 plutôt :?
Si c'est le cas, c'est normal... item2 est une propriété de myNameSpace or tu l'utilises comme si c'était une variable...

Code:

myNameSpace.setActiveItem(myNameSpace.item2)
08/06/2011, 11h00
link_915

Oui, je voulais dire item2 (j'ai édité mon précédent message).

J'ai réussi à résoudre mon problème en mettant onReady: devant l'appel.

merci.
08/06/2011, 11h08
RomainVALERI

Ou a été déclaré panel ? est-ce bien une globale implicite (:?) déclarée dans la définition d'une fonction anonyme ? (:calim2:)

J'espère qu'il nous manque simplement l'endroit où elle est déclarée "proprement" :roll:

Citation:

Envoyé par link_915

Oui, je voulais dire item2 (j'ai édité mon précédent message).

En revanche, maintenant c'est myNameSpace qui est undefined, voici un bout du code :
...

j'avoue que je ne saisis pas bien ce que tu fais
mais déjà pourquoi créer toute ces variables ???

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/*var user = new Ext.form.Text({
  xtype : 'textfield',
  name  : 'user',
  labelWidth: '120px',
  value: 'username',
  label : 'User'
});*/
 
/*var password = new Ext.form.Password({
  xtype : 'passwordfield',
  name  : 'password',
  labelWidth: '120px',
  value : 'password',
  label : 'Password'
});*/
 
var login = new Ext.form.FormPanel({
  dockedItems: [toolbar],
 
  iconCls: 'user',
  items: [
    {
      xtype: 'fieldset',
      title: 'Login',
      instructions: 'Please type your username and password',
      items: [
 
        //user,
        {
          xtype : 'textfield',
          name  : 'user',
          labelWidth: '120px',
          value: 'username',
          label : 'User'
        },
        //password
        {
          xtype : 'passwordfield',
          name  : 'password',
          labelWidth: '120px',
          value : 'password',
          label : 'Password'
        }
      ]
 
    }
    ,{
      layout: 'hbox',
      direction: 'reverse',
      items : [
        {
          xtype: 'button',
          text : 'Login',
          handler: function() {
          //}
 
            server.execute({
              sequence: 'Login',
              form : login,
              callback : function (data) {
              if (data.document.logon == "true"){
                alert();
                panel.setActiveItem(panel.form);
              }
              else
                Ext.Msg.alert("Login Failed");
              }
            });
          }
        }
      ]
    },
    rememberMe
  ],
});

je ne comprends pas ton handler tu soumets le formulaire ???
parce que si c'est ça relis les exemples et la doc.
créer une variable form pour la passer au handler du form c'est tordu

@RomainVALERI : panel est définit dans

Code:

1
2
3
4
5
6
7
8
9
10
11
onReady: function() {
  panel = new Ext.TabPanel({
    tabBarDock: "bottom",
    fullscreen: true,
    cardAnimation: 'flip',
    items: [
      login,
      form
    ]
  });
}

A+JYT

08/06/2011, 14h29
RomainVALERI
Citation:
Envoyé par sekaijin

@RomainVALERI : panel est définit dans

Code:

1 2 3 4 5 6 7 8 9 10 11 onReady: function() { panel = new Ext.TabPanel({ tabBarDock: "bottom", fullscreen: true, cardAnimation: 'flip', items: [ login, form ] }); }

A+JYT
C'est ce que j'entendais par

Citation:

déclarée dans la définition d'une fonction anonyme ? (:calim2:)

Ma question était en fait plus explicitement : l'extrait ci-dessus est-il le premier usage de la variable, la déclarant donc implicitement OU y a-t-il une déclaration dans une autre partie du code ? ^^
08/06/2011, 18h36
NoSmoking

Citation:

Envoyé par Bovino

Code:

myNameSpace.setActiveItem(myNameSpace.item2)

j'aurais plus volontier fait

Code:

myNameSpace.setActiveItem(myNameSpace.items[1])

pour "pointer" sur item2
08/06/2011, 19h26
Bovino

Citation:

Envoyé par NoSmoking

j'aurais plus volontier fait

Code:

myNameSpace.setActiveItem(myNameSpace.items[1])

pour "pointer" sur item2

:langue:

Oui, j'ai peut-être répondu un peu vite... :oops:
07/07/2011, 09h15
link_915

Bonjour,

pour préciser un peu c'était de la programmation Sencha Touch donc quelques variantes existes.

Et pour ce second problème, je l'ai résolu en mettant onReady: devant mon activation d'item.

Merci en tout cas, mon application est finie depuis un petit moment maintenant :ccool: