Discussion :

[tepaze]

Bonjour,

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

Genre :

Code :

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

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...

[SpaceFrog]

?
mets le dans la fonction action ...?

[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 ?

[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

[Bovino]

addListener() n'existe pas en JavaScript !
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.

[p3ga5e]

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 :

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
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);

[tepaze]

Merci pour les pistes proposées :-)

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

Code :

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

params.push.apply(params,arguments);

et dans celui ci :

Code :

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

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

Bien cordialement

Merci

[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

[tepaze]

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

En tout cas j'ai vaguement 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

[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.

[tepaze]

Oui bon d'accord...

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...

[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 !

[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".

[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

[dragonno]

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.