Le javascript objet avec prototype
Le javascript objet avec prototype - 22/09/2009

La librairie prototype est une librairie javascript assez puissante permettant beaucoup de simplification dans le code. Elle permet notamement la création simple de classe JS. Pour les fan d'objet, voici un tutorial basique sur la programmation javascript orientée objet avec prototype :

Voici un exemple de classe simple :
var MonObjet = Class.create();
MonObjet.prototype = {
}

On met ensuite en premiere position les attributs de la classe :
var MonObjet = Class.create();
MonObjet.prototype = {
attribut1 : false,
attribut2 : false,
}

Pour que la classe soit valide il faut un constructeur :
var MonObjet = Class.create();
MonObjet.prototype = {
attribut1 : false,
attribut2 : false,
initialize : function(){
alert('Ma classe fonctionne');
}
}

Erreur courante :
Il faut penser a mettre des virgules entre chaque fonction
var MonObjet = Class.create();
MonObjet.prototype = {
attribut1 : false,
attribut2 : false,
initialize : function(){
alert('Ma classe fonctionne');
}, //<- IMPORTANT
fonction1 : function(){
this.attribut1 = 'ok';
}, //<- IMPORTANT
fonction2 : function(){
this.attribut1 = 'ok';
}
}

Il ne faut pas mettre de virgule apres la dernière fonction de la classe (IE n'aime pas !!)
var MonObjet = Class.create();
MonObjet.prototype = {
attribut1 : false,
attribut2 : false,
initialize : function(){
alert('Ma classe fonctionne');
},
fonction1 : function(){
this.attribut1 = 'ok';
},
fonction2 : function(){
this.attribut1 = 'ok';
}//<- IMPORTANT
}

La gestion des évènement :
Pour gérer les évènements il faut utiliser la fonction bind. Elle sert a garder le lien avec l'objet courant. En gros, si on ne fait pas le bind, lors de l'évènement on instancira un nouvel objet qui n'aurra plus les mêmes attributs ... Le bind permet de garder this
var MonObjet = Class.create();
MonObjet.prototype = {
attribut1 : false,
attribut2 : false,
initialize : function(){
alert('Ma classe fonctionne');
},
fonction1 : function(){
this.attribut1 = 'ok';
},
fonction2 : function(){
this.attribut1 = 'ok';
},
fonction3 : function(){
Event.observe(window, 'click', this.function2.bind(this));
}
}

Les boucles each :
On retrouvera le même problème qu'avec les éléments dans les boucles :
var MonObjet = Class.create();
MonObjet.prototype = {
attribut1 : false,
attribut2 : false,
initialize : function(){
alert('Ma classe fonctionne');
},
fonction1 : function(){
this.attribut1 = 'ok';
},
fonction2 : function(){
this.attribut1 = 'ok';
},
fonction3 : function(){
Event.observe(window, 'click', this.function2.bind(this));
},
fonction4 : function(){
array.each(
function(item, index){
alert(this.attribut2);
}.bind(this)
);
}
}


Commentaires

Aucun commentaire pour le moment

Poster un commentaire