Javascript orienté objet

Contrairement aux apparences, Javascript permet de supporter des classes et des objets et par extension des frameworks complets peuvent-être écrits en Javascript (ex : prototypes, scriptacoulous, Ext Js, Raphaeljs…)

Je vais ici détailler une méthode classique de génération de classe en Javascript et donner une application directe à une classe permettant de générer des box-plots, graphique bien connu des statisticiens.

La création d’une classe en Javascript se fait simplement par la déclaration d’une fonction. Cette fonction utilise l’indentificateur « this ». Par défaut « this » pointe sur la fenêtre courante dans lequel le Javascript s’exécute. Toutefois si l’opérateur new est utilisé pour créer une instance de classe, this pointera sur cette instance plutôt que sur l’objet « window ».

Cet éclaricissement fait nous pouvons commencer à créer notre première classe :

function Boxplot ( min, q1,q2,q3, max, mean, divTarget) {

}

Vous me direz, ça ne ressemble pas vraiment à une classe mais à une bonn vieille function clasique de Javascript qui prend ,le minum, le quartile 25, la médiane, le quartile 75, le max et la moyenne de la distribution comme paramètre.

L’utilité du paramètre divTarget, très utile sera détaillé ultérieurement.

Ajoutons des membres et des méthodes à cette classe, pour se faire nous allons utiliser l’identificateur « this »

function Boxplot ( min, q1,q2,q3, max, mean, divTarget) {
this._min=min;
this._q1=q1;
this._q2=q2;
this._q3=q3;

...

}

Je vais créer autant de membres qu’il y a de paramètre dans mon constructeur et oui ici comme la classe est une fonction, son constructeur est d’office la fonction : Boxplot dans notre cas de figure.

J’utilise la notation _membre pour signifier que ce membre est privé, contrairement aux langages réellement orientés objet, Javascript ne dispose pas de restriction de visibilité. On prend donc cette convention venant de PERL pour signifier les éléments privés.

Il est intéressant d’avoir conçu une classe Boxplot toutefois si on ne peut pas l’afficher elle n’est pas très utile, nous allons donc ajouter une méthode à notre classe : show() qui permettra d’afficher le box-plot.

function Boxplot ( min, q1,q2,q3, max, mean, divTarget) {
this._min=min;
this._q1=q1;
this._q2=q2;
this._q3=q3;

...
this.show=function () {
… code de la fonction
}

}

Ici j’ai déclaré une fonction publique je n’indique pas d’underscore devant.

Concrètement comment cela va-t-il fonctionner ?

Je devrais réserver un emplacement où placer mon box-plot dans ma page web, typiquement, je vais définir un panel de type DIV qui contiendra mon résultat.

Ensuite je créer une instance de ma classe en lui passant les paramètres de la distribution que je veux boxplotter.

Concrètement ça nous donne ceci :

var boxplot = new BoxPlot(1,8.75,13,16.35,28,13.3,"test");
boxplot.show();

Test référant le panel DIV. Le résultat est donné en haut de page.

Dans le prochain billet je donnerai le détail de l’affichage du boxplot (le contenu dans la fonction show() ).