Comment faire du chainage de méthode ( comme jquery)

**le_chomeur** · 25/10/2007, 14h38

Bonjour a tous , je cherche a implémenter dans mes scripts, le chainage de méthode , comme j'ai pu voir dans les framework jquery et autre ...
Je n'ai pas trouvé de documentation sur la création/héritage de tel méthode sur le net si quelqu'un pouvais éclairer ma lanterne ou me donner quelques exemples ?

Merci à tous ^^

Voici un petit exemple pour illustrer mes propos :

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
32
 
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function testDiv(element){
 
	this.element = document.getElementById(element);
	this.borderRed = function(){
 
		this.element.style.border = '2px solid red';
		return element;
	}
 
	this.green =  function() {
	 this.element.style.backgroundColor = 'green';
	 return element;
	}
}
 
function go(){
		var maDiv = new testDiv("test");
		maDiv.borderRed().green();
}
 
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="Effectuer les modifications" onClick="go()">
<div id="test" style="border:2px solid #ccc;background-color:yellow;width:200px;height:200px;"></div>
</FORM>
</BODY>
</HTML>

j'ai donc un souçis lorsque j'essaye d'appeler la deuxième méthode ....
J'aimerais donc comprendre pour pouvoir implémenter ce type de programmation dans mes prochains scripts

**denisC** · 06/11/2007, 16h14

Envoyé par le_chomeur

J'aimerais donc comprendre pour pouvoir implémenter ce type de programmation dans mes prochains scripts

J'ai juste changé le return element en return this, et ça marche sous FFx :

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
32
33
 
 
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function testDiv(element){
 
	this.element = document.getElementById(element);
	this.borderRed = function(){
 
		this.element.style.border = '2px solid red';
		return this;
	}
 
	this.green =  function() {
	 this.element.style.backgroundColor = 'green';
	 return this;
	}
}
 
function go(){
		var maDiv = new testDiv("test");
		maDiv.borderRed().green();
}
 
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="Effectuer les modifications" onClick="go()">
<div id="test" style="border:2px solid #ccc;background-color:yellow;width:200px;height:200px;"></div>
</FORM>
</BODY>
</HTML>

Il faut bien retourner this, puisque tu veux lui appliquer d'autres méthodes après....

Bonne chance!

**le_chomeur** · 06/11/2007, 16h21

... j'ai un grand moment de solitude

erreur de noob

Merci beaucoup

**SpaceFrog** · 06/11/2007, 16h30

si ça te rassure ... j'ai pas compris le coup du thos ...
que represent this en l'occurence ?
Pour moi c'etait la fonction pas l'objet,
j'essayais de faire un

Code :

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

return this.element;

qui me paraissait plus logique ???

**le_chomeur** · 06/11/2007, 17h02

Justement je cherchais a appliquer mes modifications sur l'objet , et non sur l'élément passé en paramètre...
et en faisant return this.element je ne répondais pas a ma problématique, grossière erreur de ma part...

**denisC** · 06/11/2007, 21h31

Envoyé par le_chomeur

Justement je cherchais a appliquer mes modifications sur l'objet , et non sur l'élément passé en paramètre...
et en faisant return this.element je ne répondais pas a ma problématique, grossière erreur de ma part...

Ca me fait ça aussi. Quand on se concentre trop sur quelque chose, on finit par ne plus voir très clair....

C'est le moment d'aller prendre un café

**SpaceFrog** · 07/11/2007, 08h36

10 litres de café plus tard ...

J'ai toujours pas compris pourquoi this et pas this.element

Je vais essayer les substances illicites ...

**le_chomeur** · 07/11/2007, 09h34

Pendant ce temps la à tiruana...

Code :

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

this

et non

Code :

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

this.element

car this.element est une propriété de mon objet , or , lorsque je fais

Code :

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

var maDiv = new testDiv("test");

<== on passe en paramètre ce qui fera office de this.element

Puis

Code :

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

maDiv.borderRed().green();

green(), renvois l'objet en entier , pour pouvoir travailler ensuite sur this.element de l'objet, si l'on renvoyais this.element , on renverrais l'objet div , qui lui est une propriété privé de mon objet , donc on ne peut pas le modifier directement sur borderRed()

Voila pourquoi on doit retourner l'objet et non juste une des propriétés

**SpaceFrog** · 07/11/2007, 09h56

Y'a toujours un truc qui m'échappe .

je ne comprends pas pourquoi dans

Code :

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

1
2
3
4
 
mafocntion('monid'){ 
//this=l'objet  ???
}

pour moi this c'est la fonction pas l'objet ...

???
pour moi cela relève du mystère

**le_chomeur** · 07/11/2007, 10h25

this, renvois l'objet , car la méthode appartient à la classe

et en javascript , this , renvois sur l'objet sur lequel on est positionné

test tout bète , fait un alert(this) , tu il te retournera [object] , si tu utilises firebug , regarde les propriétés de et objet et tu verras qu'il s'agit de l'objet instancié.

le schmilimiliblick ^^

**SpaceFrog** · 07/11/2007, 10h28

alors pourquoi ceci ne fonctionne-t-il pas ?

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type='text/javascript'>
function showAlert() {
	alert(this.id);
}
</script>
</head>
 
<body>
<div id='alert' onclick="showAlert()">hh</div>
</script>

**SpaceFrog** · 07/11/2007, 10h32

Et ce resultat n'eclaire pas plus ma lanterne

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type='text/javascript'>
function showAlert() {
var liste=''
	for (elt in this){liste+= elt +" => "+this[elt]+"\n";}
	alert (liste)
}
</script>
</head>
 
<body>
<div id='alert' name='coucou' onclick="showAlert()">hh</div>
</script>

**le_chomeur** · 07/11/2007, 11h07

Car lors de l'appel a ta fonction showAlert() tu ne passes aucun paramètre, donc
l'objet renvoyer par this dans ta fonction showAlert(), renvoit ... showAlert() elle même.
essaye de passer comme paramètre this ce qui donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type='text/javascript'>
function showAlert(element) {
var liste=''
	for (element in this){liste+= elt +" => "+element[elt]+"\n";}
	alert (liste)
}
</script>
</head>
 
<body>
<div id='alert' name='coucou' onclick="showAlert(this)">hh</div>
</script>

onclick="showAlert(this)" va renvoyer l'objet div

en utilisant this a l'intérieur de ta fonction, tu utilises les propriétés / méthode de "l'objet" showAlert() j'espère être assez clair dans mes explications ?

dans un objet , this renvois le parent le plus haut si tu préfères :-)

**SpaceFrog** · 07/11/2007, 11h38

i je comprends bien mais à aucin moment tu ne passes l'objet en paramètre, puisqeu tu oasse un string de l'id

d'ou mon étonnement que le fait de passer un string fasse pointer la focntion sur l'objet ????

**le_chomeur** · 07/11/2007, 11h47

heu tu as du sauter une ligne regarde :

Code :

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

1
2
3
4
5
6
 
function testDiv(element){
 
	this.element = document.getElementById(element);
/*****/
}

element en paramètre est effectivement une string
mais ensuite , est désigné comme pointant vers : document.getElementById(element);

donc par la suite lorsque j'appel mon ojbet et que je pointe vers this.element , je point vers ma div et non plus sur une string