binder on propriété "custom" a un évènement ?

**Shadow69** · 15/04/2013, 12h39

Bonjour a tous,

Je me demandais s'il était possible avec jQuery de binder le changement de valeur d'une propriété quelconque sous forme d'un évènement.

Je m'explique:
admettons un objet "toto" qui contient des méthodes / des variables lui servant de propriété. il ya t'il un moyen (a part depuis une des méthodes de l'objet en question) de dire que si toto['variable'] est modifié alors executer le code suivant.

Jusqu'a présent j'ai toujours fais ca un peu caca avec un setInterval qui vérifie régulièrement l'état de la variable mais j'ai l'impression que ce n'est pas vraiment propre, je commence a me dire qu'il doit bien y avoir quelque chose a faire avec les events...

Merci d'avance

**Kaamo** · 15/04/2013, 14h40

Peut-être un plugin jQuery ? Mais de base, il n'inclut pas un tel observateur d'objets Javascript comme tu l'entends.
Par contre, des Frameworks MVC Javascript l'embarquent, tels que AngularJS ou encore Ember.js

Aussi, il y a une fonctionnalité Javascript prévue pour la prochaine norme : Object.observe(objetARegarder, quelqueChoseAChange).
Depuis Chrome 25, aller dans chrome://flags/ > "Activer la fonctionnalité expérimentale JavaScript".

Réalisé avec Chrome 26 à l'heure actuelle. La spéc. ne semble pas être figée, elle évolue encore.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var objetARegarder = {};
 
Object.observe(objetARegarder, function(changements) {  
  changements.forEach(function(changement, i) {  
    // A noter : changement.object est une référence de l'objet observé
    console.log("Changement [" + i + "] de " + changement.name + " (type action : " + changement.type + "). Valeur courante de l'objet : " + (changement.object[changement.name] ? changement.object[changement.name] : "n'existe plus") + (changement.oldValue ? ". Ancienne valeur : " + changement.oldValue : ''));
  });  
});
 
objetARegarder.a = "foo"; // Changement [0] de a (type action : new). Valeur courante de l'objet : n'existe plus
objetARegarder.a = "bar"; // Changement [1] de a (type action : updated). Valeur courante de l'objet : n'existe plus. Ancienne valeur : foo
objetARegarder.a = "bar"; // n'est pas logué car rien n'a changé
objetARegarder.b = "cooool"; // Changement [2] de b (type action : new). Valeur courante de l'objet : cooool
delete objetARegarder.a; // Changement [3] de a (type action : deleted). Valeur courante de l'objet : n'existe plus. Ancienne valeur : bar

**danielhagnoul** · 15/04/2013, 21h44

Bonsoir

Depuis longtemps, jQuery permet de créer ses propres événements.

J'en ai parlé ici en 2009 : http://danielhagnoul.developpez.com/.../evenement.php.

L'API : http://api.jquery.com/category/events/event-object/ et http://api.jquery.com/trigger/

**Kaamo** · 16/04/2013, 10h01

Arrêtez-moi si je me trompe mais cette API sert à attacher des événements customisés à des éléments du DOM seulement ? Pas à écouter des changements sur objets Javascript ?

admettons un objet "toto" qui contient des méthodes / des variables lui servant de propriété. il ya t'il un moyen (a part depuis une des méthodes de l'objet en question) de dire que si toto['variable'] est modifié alors executer le code suivant.

**danielhagnoul** · 17/04/2013, 09h14

Bonjour

Dans mon article de 2009 : Utilisez les événements ! l'exemple n° 4 : Une queue d’événements utilise et gère des événements en fonction de l'état des objets.

Mais c'est peut-être un peu trop touffu pour une première approche ? Voici l'exemple réduit et simplifié à l'extrême et utilisant jQuery 1.9.1 :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
				    var Pair = function(){
				        this.number = 0;
				    }
 
				    Pair.prototype = {
				        "add" : function( obj ){
				            this.number++;
 
				            if ( this.number % 2 == 0 ){
 
				                var objEvent = new $.Event( obj.eventName );
 
				                $( obj ).trigger( objEvent );
				            }
				        }
				    };
 
 
				    var Total = function( millisecondes ){
				        this.eventName = "totalEvent.Total";
				        this.pair = new Pair();
 
				        this.init( millisecondes );
				    }
 
				    Total.prototype = {
				        "init" : function( milliseconds ){
				            var t = milliseconds || 1000,
				            	self = this;
 
				            $( this ).on( self.eventName, self.totalEventHandler );
 
				            var pairInterval = window.setInterval( function(){
				                self.pair.add( self );
				            }, 30 );
 
				            window.setTimeout( function(){
				                window.clearInterval( pairInterval );
				            }, t );
 
				        },
				        "totalEventHandler" : function( event ){
				        	console.log( event );
 
				            return false;
				        }
				    };
 
				    var ObjTotal = new Total( 1000 );
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1331530/jquery/filtrer-divs-avec-class-multiples/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-04-16T00:18:54.868+02:00" pubdate>2013-04-16T00:18:54.868+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Un autre exemple, avec des objets ES5 :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					var ObjX = ( function(){
 
						var X = 5;
 
						return Object.create( {}, {
							"change" : {
								"value" : function( pX, pObj ){
									var n = parseInt( pX, 10 ) || 0;
 
									if ( n > X && pObj && pObj.eventName ){
										X += n;
 
										setTimeout( function(){
											var pObjEvent = $.Event( pObj.eventName );
 
											pObjEvent.dvjh = {
												"x" : X
											}
 
											$( pObj ).trigger( pObjEvent );
										}, 5000 );
									} else {
										console.log( "erreur dans ObjX.change, la valeur est non conforme", pX );
									}
								},
								"enumerable" : true
							}
						});
 
					})();
 
					var ObjModifie = ( function(){
 
						return Object.create( {}, {
							"eventName" : {
								"value" : "modifieEvent.ObjModifie",
								"enumerable" : true
							},
							"on" : {
								"value" : function(){
									$( this ).on( this.eventName, this.modifieEventHandler );
 
									return this;
								},
								"enumerable" : true
							},
							"off" : {
								"value" : function(){
									$( this ).off( this.eventName );
 
									return this;
								},
								"enumerable" : true
							},
							"modifie" : {
								"value" : function( pX ){
									ObjX.change( pX, this );
 
									return this;
								},
								"enumerable" : true
							},
							"modifieEventHandler" : {
								"value" : function( event ){
									console.log( "la modification a eu lieu", event, event.dvjh.x );
 
									return false;
								},
								"enumerable" : true
							}
						});
 
					})();
 
					ObjModifie
						.on()
						.modifie( 12 )
						.modifie( 3 );
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-04-17T00:25:47.110+02:00" pubdate>2013-04-17T00:25:47.110+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

binder on propriété "custom" a un évènement ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager