Ajouter un Listener � un objet JS

Version imprimable

27/03/2013, 16h47
tepaze

Ajouter un Listener � un objet JS
Bonjour,

Comme l'indique le titre, je souhaite savoir s'il est possible d'ajouter un listener perso � un objet JS perso.

Genre :
Code:

1 2 3 4 5 6 7 8 9 var obj = { a : "A" , action : function() { console.log(a); } } obj.addListener(obj.a, action);
Je ne sais pas si je me suis bien faire comprendre... :oops:
27/03/2013, 16h51
SpaceFrog

?
mets le dans la fonction action ...?
27/03/2013, 16h54
tepaze

Huummmm,

En fait je ne sais pas utiliser la fonction addListener... Et ce que je veux c'est une �coute de variable qui declanche une action.

et accessoirement est ce possible en jQuery ?

Est ce plus clair ?
27/03/2013, 16h56
SpaceFrog

ce n'est possible en js ...

tu peux soit passer par un input sur lequel tu as un onchange

sinon faut passer par un setInterval
27/03/2013, 17h31
Bovino

addListener() n'existe pas en JavaScript ! :aie:
Sinon, les �v�nements sont li�s � des objets HTML, donc ce que tu fais n'est pas valable.
Sinon, il existe bien la m�thode watch sur un objet, mais elle est propri�taire et compatible uniquement Firefox il me semble.

Les gestionnaire d��v�nements n�existe pas de base en JavaScript, mais doit certainement exister en jQuery (vu la popularit� de celui-ci) ! Non ?

Sinon ce n�est pas trop compliqu� � l�impl�menter soit m�me !
Petit �bauche :

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
function EventEmitter()
{
	var listeners = {};
 
	this.addListener = function(event, listener)
	{
		if(!listeners[event])
			listeners[event] = [];
		listeners[event].push(listener);
	}
 
	this.emit = function(/*event, [arg1], [arg2], [...]*/)
	{	
		var params =[];
		params.push.apply(params,arguments);
		var event = params.shift();
		if(listeners[event])
		{
			for(var l=0;l<listeners[event].length;l++)
				(listeners[event][l]).apply(null,params);
		}
	}
}
 
function PropertiesListeners()
{
	this.set = function (property,value)
	{
		var oldvalue = this[property];
		this[property]=value;
		this.emit(property+" change",value,oldvalue);
	}
};
PropertiesListeners.prototype = new EventEmitter();
 
var obj = new PropertiesListeners();
obj.addListener('Name change',function(val)
{	
	console.log('Listener 1 : Name = '+val);
})
obj.set('Name','pierre');
obj.addListener('Name change',function(newval,oldval)
{
	console.log('Listener 2 : Name '+oldval+' change to '+ newval);
})
obj.set('Name','paul');	
obj.Age = 25;
obj.addListener('Age change',function(newval,oldval)
{
	console.log('Listener 3 : Age '+oldval+' change to '+ newval);
})
obj.set('Age',32);

27/03/2013, 19h19
tepaze

Merci pour les pistes propos�es :-)

J'ai besoin d'un eclaircissement neanmoins, que signifie apply dans ce contexte :

Code:

params.push.apply(params,arguments);

et dans celui ci :

Code:

(listeners[event][l]).apply(null,params);

Bien cordialement

Merci
28/03/2013, 11h01
p3ga5e

La m�thode apply du prototype Function, permet d�ex�cuter la fonction en lui sp�cifiant son context ( ce que r�f�rencera this durant son ex�cution) et la pile d�arguments sous la forme d�un Array.

Dans la fonction emit je recopie tous les arguments dans un nouveau tableau nomm� params en utilisant la m�thode push du prototype Array. Je les recopie car arguments ne r�f�rence pas un "vrais" prototype Array, en tous cas par sur l�interpr�teur V8 de Chrome. Or, pour la fonction emit, j�ai besoin de retirer le 1er elements de pile d�argument, qui repr�sente l�identifiant de l��v�nement, par la m�thode shift et de passer le reste de la pile d�arguments � chacun d�un listeners.

Par contre un gestionnaire d��v�nements doit OBLIGATOIREMENT exister dans jQuery, car c�est tous de m�me un m�canisme de base pour tous framework JavaScript
28/03/2013, 14h46
tepaze

ok, apply c'est une fa�on de faire une classe statique en php c'est ca ?

En tout cas j'ai vaguement :cry: compris le principe.

Tiens au passage, je commence � bien comprendre le JS, mais j'aimerais appronfondir ma connaissance, et du cou p je cherche un bon livre (un peu pointu) ENCORE EDIT� pour me perfectionner...

Je dis encore �dit�, car bcp de livre propos� dans la liste du site ne sont plus �dit�...

Bien cordialement
28/03/2013, 14h54
Bovino

Non, rien � voir... Notamment parce qu'il n'existe pas de classes en JavaScript !
Mais � part �a, apply et call servent � appeler une fonction en pr�cisant son contexte.
28/03/2013, 14h57
tepaze

Oui bon d'accord... :mrgreen::aie:

Il ya effectivement un gestionnaire d'�v�nement en jQuery, .bind() d'apr�s ce que j'ai compris, mais il ne s'applique qu'aux �l�ments du DOM non ? Pas � une valeur d'un objet JS...
29/03/2013, 23h29
kimjoa

salut,

si tu cibles des navigateurs r�cents, il y a les fonctions Object.create et Object.defineProperty qui permettent de d�finir des fonctions lors de la consultation d'une valeur (getter) ou de sa modification (setter). Je pense que ca devrait te convenir !
30/03/2013, 01h21
dragonno

Salut ;)

Il y a quand m�me de bons tutos de niveau �lev� sur d�veloppez si tu n'a pas le livre, sinon moteur de recherche...

PS:
Pour ajouter une m�thode � un objet, utilise "prototype".
01/04/2013, 20h46
tepaze

>dragono : C'est vrai que les tutos de developpez sont d'un tres bon niveau, et sont une base pr�cieuses. Mais je les ais tous deja lu...

Ce qui m'interesserais maintenant, c'est d'avoir une expertise. Tant au niveau de la construction d'objet complexe, que des bonnes pratiques de codage. Pouvoir par exemple appr�hender de maniere plus clair le cote assynchrone de JS.

Vous l'aurez peut etre compris, l'idee c'est de pouvoir par la suite apprehender nodeJS avec de bonne base cot� client :-)

Kimjoa : Je ne connaissais pas ces fonction. Je vais creuser. Merci

Bien cordialement
04/04/2013, 12h13
dragonno

Citation:

que des bonnes pratiques de codage.

Je crois qu'il y a un topic la-dessus quelque part, je ne saurais te dire o�.
Sinon il �tait aussi question d'une r�union de codeurs sur ce sujet pr�vue par Keulkeul, je ne sais pas o� �a en est, sinon il a d� mettre une vid�o de la r�union, contacte-le peut-�tre.