Discussion :

[erox44]

Hello,

Le contexte:
dev JS pour IE6, sans plugins.


Je reprend actuellement le code JS d'une application où il y a tout un tas de fonctions de la forme :

Code :

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

1
2
3
4
5
6
7
8
 
document.getElementById('monobj_div_text').style.display = '';
document.getElementById('monobj_div_select').style.display = 'none';
formObj.monobj.value = '';
formObj.monobj_text.value = '';
formObj.monobj_select.options[0].selected = true;
formObj.monobj_select.options[0].value = '';
formObj.monobj_select.value = '';

Le soucis là c'est qu'à certains moments, les elements _select ou _text ne sont pas créés sur ma page et du coup, paf erreur d'execution du script (normal).

Du coup là jvais devoir tout reprendre pour éviter ça en ajoutant à chaque fois un fi du genre

Code :

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

if(document.getElementById('monobj_div_text')){}

Ce qui va clairement alourdir le code, donc avant de me lancer là dedans, jme demandais si vous aviez des idées pour optimiser ça.
En gros suivants les cas, la page contient pour chaque donnée soit un input text simple, soit un input text et un selec associé.

[Rctiste]

Si je comprend bien tu veux faire un contrôle sur des champs (ou plutôt tester leurs valeurs) dont tu ne te sert pas dans certains cas ?

Pourquoi n'affiche tu pas tous simplement seulement les éléments que tu souhaite avec un javascript en fonction de cas d'utilisation et tu les valorise à ton goût ? Tu sera sûr que tes éléments seront accessibles.

[RomainVALERI]

En ne faisant à chaque fois qu'un seul appel à la fonction, ça ne devrait pas être particulièrement gourmand...

Code :

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

1
2
3
4
var elem = document.getElementById("idMachin");
if (elem) {
   // ...
}

Pour le coût en ressources de quelques if... ^^

De toutes façons, c'est considéré comme une bonne pratique, même hors de ton contexte, de commencer, au chargement de la page, par référencer ses éléments avec getElementById puis de ne toucher qu'aux références sans réappeler la fonction à chaque fois. Pour certaines pages très chargées ou très animées, ça peut faire un certaine différence ^^

Par contre, si j'ai un seul conseil à te donner : tu es dans un contexte qui n'est pas évident (IE6), occupe-toi déjà de faire un code fonctionnel ET maintenable. Une fois que tu auras réalisé ces deux objectifs, tu pourras alors envisager d'optimiser les performances. Dans l'ordre inverse, je te souhaite un agréable séjour aux enfers développement.

[NoSmoking]

Bonsoir,
tu crées une petite fonction

Code :

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

1
2
3
function $id( id){
  return document.getElementById( id);
}

pour te simplifier l'écriture, et ensuite tu fais

Code :

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

1
2
3
if(( oElem = $id('monobj_div_text')){
  // tout le code avec oElem
}

- il vaut mieux perdre un peu en performance que de planter le script !!!
- quoiqu'il arrive il faut tester l'existence de l'objet avant son utilisation, sauf si bien sûr tu es sûr de ton coup !!!!

[erox44]

Ok merci à vous tous, jvais du coup rester sur mon idée et me farcir tout les if :p
Juste une question par contre :

Code :

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

1
2
3
4
var elem = document.getElementById("idMachin");
if (elem) {
   // ...
}

Dans quel(s) cas la condition ne sera t-elle pas remplie? si l'element est caché? s'il n'existe pas?

[javatwister]

Je reprend actuellement le code JS d'une application où il y a tout un tas de fonctions

Code :

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

1
2
3
4
5
6
7
8
 
document.getElementById('monobj_div_text').style.display = '';
document.getElementById('monobj_div_select').style.display = 'none';
formObj.monobj.value = '';
formObj.monobj_text.value = '';
formObj.monobj_select.options[0].selected = true;
formObj.monobj_select.options[0].value = '';
formObj.monobj_select.value = '';

C'est étonnant... Remarque, moi l'autre jour, j'ai pris des oeufs pour faire une purée et ça n'a pas marché non plus;

Le soucis là c'est qu'à certains moments, les elements _select ou _text ne sont pas créés sur ma page(normal).

Là c'est pas étonnant.


Sinon, elle ressemble à quoi ta page?

[erox44]

Hello,

En simplifié ca donne quelque chose comme ça :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <table>
        <tr id="nom_TR" style="display:block" >
          <td class="libelle">Nom </td>
          <td class="champ">
            <input name="nom" type="text" value="aaa" class="text"/>
            <input name="nom_hidden" id="nom_hidden" type="hidden" value="aaa"/>
          </td>
        </tr>
        <tr id="hostname_TR" style="display:block" >
          <td class="libelle">Hostname</td>
          <td class="champ">
            <input name="hostname" type="text" value="bbb" class="text"/>
            <input name="hostname_hidden" id="hostname_hidden" type="hidden" value="bbb"/>
          </td>
        </tr>
        <tr id="syst_TR" style="display:block" >
          <td class="libelle">Syst&#xE8;me </td>
          <td class="champ">
            <div id="syst_div_text">
              <input name="syst" type="text" value="SOLARIS" readonly="" id="syst_text" class="text" onkeypress="capture(this,event)"/>
              <img class="liste_deroul" src="../images/deroul2.gif" onclick="javascript:appel(this);"/>
            </div>
            <div id="syst_div_select" style="display:none;">
              <select class="normal" name="syst" id="syst_select" onchange="javascript:syst_onchange(this);">
                <option class="normal" value="SOLARIS" selected="">SOLARIS</option>
              </select>
            </div>
            <input name="syst_hidden" id="syst_hidden" type="hidden" value="SOLARIS"/>
          </td>
        </tr>
	</table>

En fait, tout le html est généré via xslt/xml
Et en fonction de certains droits, pour tel ou tel champ, on génére soit seulement un input text, soit un text et un select en caché (qui sera actualisé via ajax et visible apres click sur le bouton plus(="../images/deroul2.gif))
En gros pour un champ les différents etats possibles :
- le TR est en display none
- TR visible, l'input text visible en readOnly avec la classe 'ro text'
- TR visible, input text visible avec le bouton liste déroulante, le select en display none
- TR visible, input text readOnly false


Donc apres dans le code j'aurais bien fait quelque chose pour généraliser tout ça dans les controle et éviter les crashs quoi.



EDIT:

Code :

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

1
2
3
if(( oElem = $id('monobj_div_text')){
  // tout le code avec oElem
}

Code :

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

1
2
if(( $id('monobj_div_text')){
  // tout le code avec $id('monobj_div_text')}

Je ne vois pas réellement la différence entre les deux codes ci dessus :o

[RomainVALERI]

Ok merci à vous tous, jvais du coup rester sur mon idée et me farcir tout les if :p
Juste une question par contre :

Code :

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

1
2
3
4
var elem = document.getElementById("idMachin");
if (elem) {
   // ...
}

Dans quel(s) cas la condition ne sera t-elle pas remplie? si l'element est caché? s'il n'existe pas?

Si l'élément existe > la condition sera remplie, que l'élément soit caché ou pas
Si l'élément n'existe pas > ben pas remplie

Ca n'empeche pas de se faire une mini-fonction qui teste l'affichage de l'élément et d'utiliser tour à tour les deux tests en fonction des besoins ^^

Code :

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

1
2
3
4
5
6
7
8
function on(elem) {
   return elem.style.display != "none";
}
 
var truc = document.getElementById("machin");
if (truc && on(truc)) {
   // ne s'exécutera que si l'élément existe ET est affiché
}

Sinon à part ça :

Je ne vois pas réellement la différence entre les deux codes ci dessus :o

Le deuxième va faire un appel à getElementById à chaque fois... pour un peu qu'il soit utilisé par-ci par-là dans des boucles...

[erox44]

Ok merci

[javatwister]

et pour être plus rationnel, appelle chaque élément par id, y compris les champs...

Code :

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

1
2
3
4
5
6
7
8
9
10
var exi={ste : function(b){return document.getElementById(b)}}
 
if(exi.ste("monobj_div_text")){
	exi.ste("monobj_div_text").style.display = '';
}
if(exi.ste("monobj_div_select")){
	exi.ste("monobj_div_select").style.display = 'none';
}
 
// etc.

[RomainVALERI]

et pour être plus rationnel,

et pour être moins rationnel,

Code :

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

var sexi={ste : function(b){return b.genre != "feminin"}};

...

[javatwister]

le sexisme serait donc irrationnel?

gasp, faut que je me recycle là-dedans aussi