Syntaxe with end with

**patricktoulon** · 24/02/2017, 09h49

Bonjour a tous
je voudrais simplifier mes codes

au lieu de faire document.getElementById("truc").machin=bidule
et de répéter pour chaque modif d'une propriété

y a t il un moyen de faire un peu comme on le fait en VB pour manipuler le DOM

Code :

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

1
2
3
4
5
with document.getElementById("truc").style
.border="1px solid red";
.backgroundColor="blue";
//etc....
end with

**eleydet** · 24/02/2017, 12h04

Bonjour,

La solution ci-dessous, peut-être?

Code :

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

$=function(id) { return document.getElementById(id); };

**melka one** · 24/02/2017, 12h21

jour

la syntaxe est presque bonne

Code :

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

1
2
3
4
with (document.getElementById("truc").style){
   border="1px solid red";
   backgroundColor="blue";
}

par contre il est déconseillé d'utilisé with pour une histoire de performance ou sécurité je sais plus trop mais sa reste a voir

**SpaceFrog** · 24/02/2017, 12h25

Code :

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

1
2
3
s = document.getElementById("truc").style
s.border="1px solid red";
s.backgroundColor="blue";

Sinon le principe des sélecteurs Jquery...

**badaze** · 24/02/2017, 12h56

Regarde cette page.
http://javascript.info/tutorial/with-operator
Il y a bien un with mais c'est déconseillé de l'utiliser dans la mesure où il n'y a pas de contrôle et que tu pourrais affecter une valeur à une propriété qui n'existe pas pour l'objet sans qu'il y ait d'erreur.

**patricktoulon** · 24/02/2017, 16h36

re
OK merci messieux
spacefrog
oui une variable ça je sais faire encore ça va, pas trop dur

comme j'ai beaucoup de ligne finalement a répétition je voulais juste savoir si cela existait

badaze de conseillé oui mais dans mon cas les fonctions sont déclenchées si les attributs sont != null donc je n'ai pas de soucis avec ca non??

surtout que maintenant je sais me servir du débogueur IE (F12) même si il est lite ça m'a permis de comprendre beaucoup de chose avec mes attribut
actuellement en débogage je n'ai plus d'erreurs tout est bien défini
dans ce cas tu vois une objection autre qu'une probable gestion d'erreur qui pourrait m’empêcher de l'utiliser ???
par ce que ca simplifierait les code et en plus je serais moins perdus dans la syntaxe moi le vieux VBISTE

**badaze** · 24/02/2017, 18h33

Sur le site de Mozilla ils disent que cette fonction peut être retirée du jour au lendemain.

De plus comme ils le disent ça doit être coton à déboguer.

Quand tu utilises with l'objet référencé devient l'objet de base et toutes ses propriétés deviennent des défauts.

Dans le code ci-dessous, quand je change Href c'est le Href de toto qui est changé. Si tu regardes bien il y a une variable nommée title qui passe de toto à titi.
Mais tu verras que alert(title) donne toto et non pas titi mais si tu laisses le curseur sur le lien tu verras titi.

Donc le with tel qu'il est implémenté est une fausse bonne idée et donc à proscrire sauf si les effets de bords et les bugs incompréhensibles sont ta tasse de thé.

Code html :

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
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
 var title = 'toto';
 with(document.getElementById('toto')) {
  title = 'titi';
  href  = "http://www.emmella.fr";
 }
 alert(document.getElementById('toto').href);
 alert(title);
}
</script>
</head>
<body>
 <a href="http://www.developper.com" id="toto">Développer.com</a>
 <br>
 <input type="button" value="Test" onclick="test()" />
</body>
</html>

**NoSmoking** · 25/02/2017, 14h54

Bonjour,

dans ce cas tu vois une objection autre qu'une probable gestion d'erreur qui pourrait m’empêcher de l'utiliser ???
par ce que ca simplifierait les code et en plus je serais moins perdus dans la syntaxe moi le vieux VBISTE

j'en vois une évidente dans ton cas qui est ta façon d'indenter ton code et par conséquence la maintenance et

Trêve de plaisanterie, si le with est bien maitrisé il ne devrait pas y avoir de soucis (oui c'est au conditionnel car loi de Murphy ...) mais il est tout aussi simple d'écrire

Code :

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

1
2
3
4
var oElem = document.querySelector('#id-element');
var oStyle = oElem.style;
  oStyle.backgroundColor = '#ABC';
  oStyle.border = '#1px solid 069';

c'est tout aussi clair mais surement moins piégeux même si plus (à peine) verbeux !

**Watilin** · 26/02/2017, 00h21

Un autre problème de with c’est la performance. Le moteur doit déterminer si un identifiant utilisé fait partie de l’objet du with, ou bien du contexte supérieur. Autrement dit, on rajoute un scope, mais un scope basé sur un objet dynamique, contrairement à une fonction ou un bloc let qui peuvent faire l’objet d’optimisations avant exécution.

Et aussi, un objet DOM ayant typiquement un grand nombre de propriétés, ça rajoute beaucoup de choses dans le scope. Les choses commencent à sérieusement se gâter si tu décides d’utiliser des variables qui ne font normalement pas partie de l’objet. Il peut se produire deux choses :

soit il se trouve que la variable est en fait une propriété de l’objet et tu n’avais pas prévu ça, et là il peut se passer n’importe quoi ;
soit la variable ne se trouve pas sur l’objet, et le moteur va d’abord vérifier chacune des propriétés de l’objet avant de passer au contexte supérieur. Dans le cas d’un objet DOM, comme je l’ai dit, il y a beaucoup de propriétés donc ça peut être très lent.

Voir optimization killers. with est considéré likely never optimizable (probablement jamais optimisable) au même titre qu’eval. Cet article concerne V8, le moteur de Chrome et d’Opera, mais ça donne une idée.

**patricktoulon** · 26/02/2017, 00h28

bien recu
on oubli with end with
je garde l'idée de la variable
merci a tous

**eleydet** · 28/02/2017, 10h03

Bonjour,

Comment dire... Je pose cette question non pas pour résoudre mais plutôt pour comprendre. L'idée de la variable ne me semble pas si simple. Dans le code ci-dessous, les deux premières solutions fonctionnent, mais pas la troisième. Pourquoi au juste?

Code html :

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
<!DOCTYPE html>
<html>
<head></head>
<body>
 
<div id="truc">Une div...</div>
 
<script>
 
// 1ère solution
s=document.getElementById("truc").style
s.border="3px solid red";
s.backgroundColor="blue";
 
// 2ème solution
$=function(id) { return document.getElementById(id); };
$("truc").style.border="3px solid green";
$("truc").style.backgroundColor="orange";
 
// 3ème solution (ne marche pas)
t=document.getElementById;
t("truc").style.border="3px solid navy";
t("truc").style.backgroundColor="pink";
 
</script>
</body>
</html>

**Watilin** · 28/02/2017, 11h36

C’est un problème de contexte, je veux dire ici l’objet this. getElementById ne marche que lorsque son contexte est document.

En JavaScript, le contexte est lié lors de l’appel (sauf avec les nouvelles fonctions arrow =>). Un moyen simple de comprendre est de regarder ce qu’il y a « devant le point ». Dans document.getElementById, devant le point il y a document. En revanche, dans ta fonction t, il n’y a rien devant le point, ce qui se réduit par défaut à l’objet window, comme si tu appelais window.t.

Essaye ceci :

Code :

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

1
2
3
4
5
6
7
8
var obj = {
  func: function () { console.log(this); }
};
 
obj.func(); // affiche obj
 
var f = obj.func;
f(); // affiche window

Pour manipuler le contexte tu peux utiliser les méthodes call, apply et bind.

Code :

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

1
2
3
4
5
6
t.call(document, "truc").style.border = "3px solid navy";
 
t.apply(document, ["truc"]).style.border = "3px solid navy";
 
var t2 = document.getElementById.bind(document);
t2("truc").style.border = "3px solid navy";

Syntaxe with end with

JavaScript

Discussions similaires

Partager

Partager