IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Améliorons la robustesse et la sécurité de nos objets

Adapter jQuery à vos besoins, niveau 3

Publié le 25 mars 2012 et mis à jour le 25 mars 2012


 

IV. Version ES5 des codes de POOPJ
IV-A. Introduction
IV-B. Objets collaborant


IV. Version ES5 des codes de POOPJ


IV-A. Introduction

Ce chapitre contient l'adaptation des codes de POOPJ.

Pour les lecteurs en provenance de POOPJ, il est impératif de lire et d'assimiler l'introduction de cet article avant de poursuivre la lecture de ce chapitre.

Pouvoir construire un objet utilisant des propriétés, des accesseurs et des mutateurs est un changement important en JavaScript. On dispose enfin d'une méthode simple et fiable pour la construction d'un nouvel objet et pour l'héritage simple. Ces améliorations rendent inutiles toutes les tentatives pour insérer une partie des bénéfices de la programmation-objet basée sur les classes dans JS.

Les notions de base ayant déjà été abordées dans l'introduction de cet article attanquons nous à des codes plus complexes. On exploitera les nouvelles possibilités en construisant des hiérachies d'objets par clonage et extension.


IV-B. Objets collaborant

On construit un système du genre MVC :
  • M pour les objets du modèle ;
  • V pour l'objet responsable de l'affichage des résultats ;
  • C pour l'objet qui contrôle le programme.
Table est un objet de type V. L'objet affichera la table à la demande, elle contiendra les informations qui lui auront été communiquées par l'objet C.

Pair est un objet de type M. L'objet communiquera à l'objet de type C le résultat de son calcul.

Impair est un autre objet de type M. L'objet communiquera à l'objet de type C le résultat de son calcul.

Total est un objet de type C. L'objet jouera le rôle d'initiateur et de contrôleur du programme. Il crée les objets M (Pair et Impair) et l'objet V (Table).

L'objet C reçoit les résultats envoyés par les objets M, il les traite et envoie le résultat à l'objet V. Lorsque le temps est venu, il demande à l'objet V d'afficher les résultats.
Le fichier mvc.js :
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.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
"use strict"; 
 
/* 
* On construit un système type MVC. 
* M pour les objets du modèle. 
* V pour l'objet responsable de l'affichage des résultats. 
* C pour l'objet qui contrôle le programme. 
* 
* Table est l'objet V. 
* 
* L'objet affiche la table à la demande, elle 
* contiend les informations qui lui sont communiquées 
* par l'objet C. 
*/ 
var Table = Object.create( {}, { 
	"_eventName" : { 
		value : "tableEvent.Table" 
	}, 
	"_th" : { 
		value : null, 
		writable : true 
	}, 
	"_trs" : { 
		value : [], 
		writable : true 
	}, 
	"_tableID" : { 
		value : "vue0", 
		writable : true 
	}, 
	"init" : { 
		value : function(){ 
			// initialisation pour appel multiple 
			$( "#" + this._tableID ).remove(); 
			 
			this._th = null; 
			this._trs = []; 
			 
			var self = this; 
			 
			$( this ).off( self._eventName ); 
			 
			// start 
			$( this ).on( self._eventName, self.tableEventHandler ); 
		}, 
		enumerable : true 
	}, 
	"tableEventHandler" : { 
		value : function( event ){ 
			if ( event.dvjh && event.dvjh.length == 1 ){ 
				if ( this._th == null ){ 
					this._th = event.dvjh.p1Name; 
				} 
				 
				this._trs.push( event.dvjh.p1Data ); 
			} 
			 
			return false; 
		}, 
		enumerable : true 
	}, 
	"print" : { 
		value : function( id ){ 
			if ( this._th != null && this._trs[ 0 ] != null ){ 
				var t0 = this._trs[ 0 ][ 3 ]; 
				 
				this._tableID = "vue" + t0; 
				 
				var self = this, 
					deltaT = [], 
					tdlength = this._th.length, 
					trlength = this._trs.length, 
					array = [ "<table id='" + this._tableID + "' class='dvjhTable'>" ], 
					arrayHead = [ "<thead><tr>" ], 
					arrayFoot = [ "<tfoot><tr>" ]; 
				 
				deltaT.push( 0 ); 
				 
				for( var i = 1; i < trlength; i++ ){ 
					deltaT.push( this._trs[ i ][ 3 ] - t0 ); 
				} 
				 
				for ( var i = 0; i < tdlength; i++ ){ 
					arrayHead.push( "<th>" + self._th[ i ] + "</th>" ); 
				} 
					 
				arrayHead.push( "<th>Delta T ms</th></tr></thead>" ); 
					 
				for ( var i = 0; i < tdlength; i++ ){ 
					arrayFoot.push( "<th>" + self._th[ i ] + "</th>" ); 
				} 
				 
				arrayFoot.push( "<th>Delta T ms</th></tr></tfoot>" ); 
				 
				array.push( arrayHead.join(''), arrayFoot.join(''), "<tbody>" ); 
					 
				for ( var j = 0; j < trlength; j++ ){ 
					array.push( "<tr>" ); 
					 
					for ( var i = 0; i < tdlength; i++ ){ 
						array.push( "<td>" + self._trs[ j ][ i ] + "</td>" ); 
					} 
					 
					array.push( "<td>" + deltaT[ j ] + "</td></tr>" ); 
				} 
				 
				array.push( "</tbody></table>" ); 
				 
				$( "#" + id ).append( array.join('') ); 
				 
				$( "#" + this._tableID ).tablesorter({ 
					sortList: [ [ 3, 0 ] ], 
					widgets: [ 'zebra' ], 
					headers: {  
						4 : { sorter : false } 
					} 
				}); 
			} else { 
				$( "#" + id ).html( "<p>Il n'y a aucune information à afficher !</p>" ); 
			} 
		}, 
		enumerable : true 
	} 
}); 
 
/* 
* Pair est un objet M dans MVC. 
* 
* L'objet communique à l'objet C 
* le résultat de son calcul. 
*/ 
var Pair = Object.create( {}, { 
	"_number" : { 
		value : 0, 
		writable : true 
	}, 
	"init" : { 
		value : function( n ){ 
			this._number = 0; 
			 
			if ( typeof n === "number" ){ 
				this._number = n; 
			} 
		}, 
		enumerable : true 
	}, 
	"add" : { 
		value : function( obj ){ 
			this._number++; 
			 
			if ( ( this._number % 2 == 0 ) && ( obj._eventName ) ){	 
				var objEvent = new $.Event( obj._eventName ); 
				 
				/* 
				 * On adopte la convention suivante : 
				 * event.dvjh.length donne le nombre de params : p1,  
				 * p2, etc. 
				 * event.dvjh.p1Name donne le(s) libellé(s) du param p1 
				 * event.dvjh.p1Data contient la/les donnée(s) du  
				 * param p1. 
				 */ 
				objEvent.dvjh = { 
					"length" : 1, 
					"p1Name" : "Pair", 
					"p1Data" : this._number 
				}; 
				 
				$( obj ).trigger( objEvent ); 
			} 
		}, 
		enumerable : true 
	} 
}); 
 
/* 
* Impair est un objet M dans MVC. 
* 
* L'objet communique à l'objet C 
* le résultat de son calcul. 
*/ 
var Impair = Object.create( {}, { 
	"_number" : { 
		value : 0, 
		writable : true 
	}, 
	"init" : { 
		value : function( n ){ 
			this._number = 0; 
			 
			if ( typeof n === "number" ){ 
				this._number = n; 
			} 
		}, 
		enumerable : true 
	}, 
	"add" : { 
		value : function( obj ){ 
			this._number++; 
			 
			if ( ( this._number % 2 != 0 ) && ( obj._eventName ) ){	 
				var objEvent = new $.Event( obj._eventName ); 
				 
				objEvent.dvjh = { 
					"length" : 1, 
					"p1Name" : "Impair", 
					"p1Data" : this._number 
				}; 
				 
				$( obj ).trigger( objEvent ); 
			} 
		}, 
		enumerable : true 
	} 
}); 
 
/* 
* Total est l'objet C dans MVC. 
* 
* L'objet joue le rôle d'initiateur et de contrôleur 
* du programme. Il crée une instance des objets M et  
* de l'objet V. Il questionne les objets M et stockent  
* leurs résultats dans l'objet V.  
* Lorsque le temps est venu il demande à l'objet V  
* d'afficher les résultats. 
*/ 
var Total = Object.create( {}, { 
	"_eventName" : { 
		value : "totalEvent.Total" 
	}, 
	"_number" : { 
		value : 0, 
		writable : true 
	}, 
	"_source" : { 
		value : "", 
		writable : true 
	}, 
	"_total" : { 
		value : 0, 
		writable : true 
	}, 
	"_timeStamp" : { 
		value : 0, 
		writable : true 
	}, 
	"_milliseconds" : { 
		value : 1000, 
		writable : true 
	}, 
	"init" : { 
		value : function( milliseconds, divID ){ 
			// initialisation pour appel multiple 
			this._number = 0; 
			this._source = ""; 
			this._total = 0; 
			this._timeStamp = 0; 
			this._milliseconds = parseInt( milliseconds, 10 ) || 1000; 
			 
			Table.init(); 
			Pair.init(); 
			Impair.init(); 
			 
			var self = this; 
			 
			$( this ).off( self._eventName ); 
			 
			// start 
			$( this ).on( self._eventName, self.totalEventHandler ); 
			 
			var pairInterval = window.setInterval( function(){ 
					Pair.add( self ); 
				}, 30 ), 
				impairInterval = window.setInterval( function(){ 
					Impair.add( self ); 
				}, 40 ); 
			 
			window.setTimeout( function(){ 
				window.clearInterval( pairInterval ); 
				window.clearInterval( impairInterval ); 
				Table.print( divID ); 
			}, this._milliseconds); 
		}, 
		enumerable : true 
	}, 
	"totalEventHandler" : { 
		value : function( event ){ 
			if ( event.dvjh && event.dvjh.length == 1 ){ 
				this._number = event.dvjh.p1Data; 
				this._source = event.dvjh.p1Name; 
				this._total += this._number; 
				this._timeStamp = event.timeStamp; 
				 
				var self = this, 
					outputEvent = new $.Event( Table._eventName ); 
				 
				outputEvent.dvjh = { 
					"length" : 1, 
					"p1Name" : [ "Total", "Nombre", "Source", "TimeStamp ms" ], 
					"p1Data" : [ this._total, this._number, this._source, this._timeStamp ] 
				}; 
				 
				$( Table ).trigger( outputEvent ); 
			} 
			 
			return false; 
		}, 
		enumerable : true 
	} 
});
Code du fichier mvc.html :
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.
"use strict"; 
	 
$( function(){ 
 
try { 
	/* 
	 * L'utilisateur peut appeler plusieurs fois le programme, 
	 * mais il ne doit y avoir qu'un objet contrôleur. 
	 *  
	 * L'utilisateur crée et initialise l'objet contrôleur en 
	 * cliquant sur le bouton Afficher. 
	 * 
	 * L'objet contrôleur se charge du bon fonctionnement du 
	 * programme et de l'affichage des résultats. 
	 * 
	 * L'affichage des résultats nécessite le plugin  
	 * Tablesorter.js 
	 */ 
	$( "#btn" ).click( function(){ 
		Total.init( $( "#choix" ).val(), "affiche" ); 
		 
		console.log( Total ); 
		console.log( Object.keys( Total ) ); 
		 
		Object.getOwnPropertyNames( Total ).forEach( function( key ){ 
			var props = Object.getOwnPropertyDescriptor( Total, key ); 
			 
			console.log( "Total : key = ", key, ", value = ", props.value,  
							", writable = ", props.writable,  
							", enumerable = ", props.enumerable,  
							", configurable = ", props.configurable ); 
		}); 
		 
		console.log( Table ); 
		console.log( Object.keys( Table ) ); 
		 
		Object.getOwnPropertyNames( Table ).forEach( function( key ){ 
			var props = Object.getOwnPropertyDescriptor( Table, key ); 
			 
			console.log( "Table : key = ", key, ", value = ", props.value,  
							", writable = ", props.writable,  
							", enumerable = ", props.enumerable,  
							", configurable = ", props.configurable ); 
		}); 
		 
		console.log( Pair ); 
		console.log( Object.keys( Pair ) ); 
		 
		Object.getOwnPropertyNames( Pair ).forEach( function( key ){ 
			var props = Object.getOwnPropertyDescriptor( Pair, key ); 
			 
			console.log( "Pair : key = ", key, ", value = ", props.value,  
							", writable = ", props.writable,  
							", enumerable = ", props.enumerable,  
							", configurable = ", props.configurable ); 
		}); 
		 
		console.log( Impair ); 
		console.log( Object.keys( Impair ) ); 
		 
		Object.getOwnPropertyNames( Impair ).forEach( function( key ){ 
			var props = Object.getOwnPropertyDescriptor( Impair, key ); 
			 
			console.log( "Impair : key = ", key, ", value = ", props.value,  
							", writable = ", props.writable,  
							", enumerable = ", props.enumerable,  
							", configurable = ", props.configurable ); 
		}); 
 
/* 
Résultat dans Firebug : 
Object { jQuery172010337594348121637={...}, init=function(), totalEventHandler=function()} 
["init", "totalEventHandler", "jQuery172010337594348121637"] 
Total : key = _eventName , value = totalEvent.Total , writable = false , enumerable = false , configurable = false 
Total : key = _number , value = 0 , writable = true , enumerable = false , configurable = false 
Total : key = _source , value = , writable = true , enumerable = false , configurable = false 
Total : key = _total , value = 0 , writable = true , enumerable = false , configurable = false 
Total : key = _timeStamp , value = 0 , writable = true , enumerable = false , configurable = false 
Total : key = _milliseconds , value = 1000 , writable = true , enumerable = false , configurable = false 
Total : key = init , value = function() , writable = false , enumerable = true , configurable = false 
Total : key = totalEventHandler , value = function() , writable = false , enumerable = true , configurable = false 
Total : key = jQuery172010337594348121637 , value = Object { events={...}, toJSON=function(), handle=function()} , writable = true , enumerable = true , configurable = true 
Object { jQuery172010337594348121637={...}, init=function(), tableEventHandler=function(), more...} 
["init", "tableEventHandler", "print", "jQuery172010337594348121637"] 
Table : key = _eventName , value = tableEvent.Table , writable = false , enumerable = false , configurable = false 
Table : key = _th , value = null , writable = true , enumerable = false , configurable = false 
Table : key = _trs , value = [] , writable = true , enumerable = false , configurable = false 
Table : key = _tableID , value = vue0 , writable = true , enumerable = false , configurable = false 
Table : key = init , value = function() , writable = false , enumerable = true , configurable = false 
Table : key = tableEventHandler , value = function() , writable = false , enumerable = true , configurable = false 
Table : key = print , value = function() , writable = false , enumerable = true , configurable = false 
Table : key = jQuery172010337594348121637 , value = Object { events={...}, toJSON=function(), handle=function()} , writable = true , enumerable = true , configurable = true 
Object { init=function(), add=function()} 
["init", "add"] 
Pair : key = _number , value = 0 , writable = true , enumerable = false , configurable = false 
Pair : key = init , value = function() , writable = false , enumerable = true , configurable = false 
Pair : key = add , value = function() , writable = false , enumerable = true , configurable = false 
Object { init=function(), add=function()} 
["init", "add"] 
Impair : key = _number , value = 0 , writable = true , enumerable = false , configurable = false 
Impair : key = init , value = function() , writable = false , enumerable = true , configurable = false 
Impair : key = add , value = function() , writable = false , enumerable = true , configurable = false 
*/ 
 
	}); 
} 
catch( evt ){ 
	console.log( evt.message ); 
}

 
 

Valid XHTML 1.0 TransitionalValid CSS!


Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (https://www.developpez.net/forums/u285162/danielhagnoul/)"