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.