[Article] Javascript Orient� Objet : syntaxe de base des classes JavaScript � l'intention des d�veloppeurs PHP

Version imprimable

16/11/2010, 21h57
Bovino

[Article] Javascript Orient� Objet : syntaxe de base des classes JavaScript � l'intention des d�veloppeurs PHP

:salut:

Jean-Pierre Vincent vous propose un article de pr�sentation sur la Programmation Orient�e Objet en JavaScript.
:fleche: Javascript Orient� Objet : syntaxe de base des classes JavaScript � l'intention des d�veloppeurs PHP

Citation:

Ce tutoriel a pour cible les d�veloppeurs qui ont une exp�rience du PHP (5) et qui veulent se lancer dans un projet JavaScript qui d�passe le simple scripting. Cela va donc commencer par savoir �crire des classes en JavaScript. Pour avoir gal�r� en tant que d�veloppeur puis en tant que lead technique, avoir form� de bons d�veloppeurs PHP � faire des applications Web o� le JavaScript repr�sente plus d'un tiers du code et la moiti� du temps de d�veloppement, j'ai pu constater les �nervements classiques lorsqu'on commence � vouloir faire des choses s�rieuses en JavaScript.
Le but ici n'est pas de rentrer dans la th�orie du langage JavaScript ou m�me d'�tre exhaustif (voir � la fin de cet article des ressources qui le font tr�s bien), mais de vous fournir un template pour commencer � �crire vos classes.

Merci de faire part de vos commentaires, remarques et encouragements pour cet article dont l'approche permettra, je l'esp�re, de faire comprendre que le mod�le orient� objet par prototype est aussi valable que le mod�le plus classique de classes et d'h�ritage.

Bonne lecture � tous et :merci: � l'auteur !

PS : Si vous souhaitez voter pour ce message, faites-le plut�t sur le message de jpvincent qui est l'auteur de l'article ;)
17/11/2010, 07h37
vermine

Article tr�s int�ressant. Bouts de codes � l'appui, ce qui permet de bien appr�hender la transition du PhP vers le Javascript.
Merci pour cette d�marche instructive. ;)
18/11/2010, 09h20
camus3

bon article , m�me si je d�teste javascript. Non pas � cause du prototypage, mais parce que le d�veloppeur n'a pas le choix de la techno cliente finalement.
J'image ce qui aurait pu �tre le web si ruby ou python s'�taient impos� cot� client. ECMA a fait un sale boulot, et il est trop tard pour changer quoi que ce soit , bref , les devs sont "coinc�s" avec javascript.
N�anmoins les closures et les lambdas sont l'aspect le plus puissant de javascript.
18/11/2010, 10h06
Bis�n�rs
Petite coquille dans le code PHP de la section "Classes statiques" :
Code:

1 2 3 static function isMailValid($sMail) { return (preg_match("/".self::$regMail."/", $sMail) === 1) ; }
Code:

print MY_APP_NAMESPACE\validation::isValidMail( '[email protected]' );

De plus (mais �a n'entrave rien � la bonne marche de l'article), pour cette m�thode on aurait pu utiliser filter_var() au lieu d'une expression r�guli�re.
18/11/2010, 10h48
psychomatt

Merci pour cet article tr�s int�ressant.
Et j'en profite pour glisser que "oui je suis int�ress� par la notion d'h�ritage en JS".
18/11/2010, 11h52
arcanis

Je pense que �a rentre dans le th�me de l'article : j'ai fait il y a quelques temps un script permettant de g�rer les classes Javascript en simulant le v�ritable concept des objets (public, protected, private, extends).

Ce n'est �videmment pas un script � utiliser en production (quoique si vous �tes un fanatique pur et dur ...), mais je le trouve assez int�ressant en tant que proof of concept de ce qu'est capable d'accomplir le JS en mati�re d'objets.

http://arcanis.alwaysdata.net/classjs/class.js
http://arcanis.alwaysdata.net/classj...testsuite.html

Par ailleurs, en ce qui concerne les performances, un constat est r�ellement surprenant (et si quelqu'un d�couvre une erreur dans ma fa�on de compter, qu'il n'h�site pas, �a m'int�resse !) : il semblerait que, selon les navigateurs :
- IE 7 : Ne fonctionne pas, je n'ai pas cherch� � le rendre compatible.
- Firefox : Environ 3x plus lent d'instancier un objet utilisant ma classe qu'un objet classique
- Chrome : Ca se vaut, avec un l�ger avantage pour un objet classique
- Opera : Donc l� c'est le wtf : il est (semble-t-il) plus rapide d'instancier un objet de ma classe qu'un objet classique. Etrange, n'est-ce pas ?
18/11/2010, 11h54
grunk

Ca tombe pile au moment ou je dois d�velopper une appli ou le JS sera dominant par rapport au reste !

Cela aurait pu �tre int�ressant d'avoir un paragraphe sur les possibilit� qu'apporte chaque framewok pour la r�alisation de class.
18/11/2010, 12h28
jpvincent

Citation:

Envoy� par arcanis

- IE 7 : Ne fonctionne pas, je n'ai pas cherch� � le rendre compatible.
- Firefox : Environ 3x plus lent d'instancier un objet utilisant ma classe qu'un objet classique
- Chrome : Ca se vaut, avec un l�ger avantage pour un objet classique
- Opera : Donc l� c'est le wtf : il est (semble-t-il) plus rapide d'instancier un objet de ma classe qu'un objet classique. Etrange, n'est-ce pas ?

comportement bizarre effectivement
concernant chrome, j'ai souvent constat� que son comportement par rapport aux performances JS �taient radicalement diff�rentes par rapport aux autres navigateurs : en g�n�ral les IE et Firefox 3 sont d'accords pour pr�f�rer une m�thode plut�t qu'une autre, alors que le V8 de Chrome affiche parfois des r�sultats invers�s. Mais je pense de toute mani�re qu'il faut rester sur le plus petit d�nominateur commun : IE6 ou 7. Si c'est optimis� pour ce navigateurs, �a n'est que rapide pour les autres

@grunk : �a aurait �t� int�ressant, mais juger d'une librairie sur ce crit�re ne me semble pas tr�s pertinent, car c'est une fonction mineure qui doit �tre support�e un peu partout de la m�me mani�re.
Juste une note sur les librairies : jQuery est tr�s bien pour d�velopper rapidement du scripting, rajouter des effets etc... Si tu pars sur une vraie appli Web, prend plut�t quelque chose de plus performant et solide, mais long � apprendre comme YUI3 ou Ext (payant)
18/11/2010, 20h12
Bovino
Citation:
Envoy� par Bis�n�rs

Petite coquille dans le code PHP de la section "Classes statiques" :

Code:

1 2 3 static function isMailValid($sMail) { return (preg_match("/".self::$regMail."/", $sMail) === 1) ; }

Code:

print MY_APP_NAMESPACE\validation::isValidMail( '[email protected]' );

De plus (mais �a n'entrave rien � la bonne marche de l'article), pour cette m�thode on aurait pu utiliser filter_var() au lieu d'une expression r�guli�re.
Ca a �t� rectifi�.

:merci:
19/11/2010, 01h39
kimjoa
tr�s bonne articles !!

Il y a l� toutes les bonnes techniques � adopter en js.... espace de nom, cr�er des variables local "ou priv�", via des fonctions anonymes auto-ex�cut�...

C'est tr�s bien :ccool::ccool: :aie:

Des petites remarque quand m�me !!

Sur la sections des closures et variables priv�e.
Etant dans un context POO, votre exemple est pas vraiment valable, car il retourne un objet anonyme, et non rattach� � une classe.
Pour permettre des variables priv� d'instance, il suffit de red�finir les m�thodes dans le constructeur.

du genre:
Code:

1 2 3 4 5 6 7 function MaClasse(){ var argPrivé = "ok"; this.funtionPublic = function(){ return argPrivé; } }
Mais c'est � �viter , comme vous l'avez pr�cis�...

Sinon je trouve pas le lien -> contre performance des variables priv�es

Je suis fa�e � un l�ger probl�me de port�e de variable.

Soit l'extrait de classe suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
boxCmd : function() {
            $.post('index.php?mod=video&act=ajax_boxCmd',
            {csrf_protect:this.token},
            function(responseText) {
                $('#contenu_bas').append(responseText);
            });
        },
 
        ongletPilotage : function() {
            $.post('index.php?mod=video&act=ajax_pilotage',
            {csrf_protect:this.token},
            function(responseText) {
                $('#contenu_bas').append(responseText);
                this.boxCmd()
            });
        }

Dans la fonction de callback de ongletPilotage je souhaite appeller une m�thode de ma classe. Seulement dans le contexte , this ne r�f�re plus � la classe mais � l'environnement de callback (je suppose).

J'ai dans un premier temps penser � modifier ma classe comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
ongletPilotage : function() {
            $.post('index.php?mod=video&act=ajax_pilotage',
            {csrf_protect:this.token},
            this.callbackPilotage);
        },
 
        callbackPilotage : function(responseText) {
            $('#contenu_bas').html(responseText);
            this.boxCmd();
        },

Mais ca ne marche pas mieux (Object has no method boxCmd).
Des id�es pour solutionner cela ?

Enregistre this dans une closure.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function Test() {}
 
Test.prototype.toto = function () {
    var self = this;
    $.get('foobar.php', function () {
        self.success();
    });
};
 
Test.prototype.success = function () {
    alert(this);
};

la r�ponse d'Arcanis est valable
sinon, en JS normal (oui, sans jQuery!), on peut appeller une m�thode en lui donnant le scope
exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 myObject = function() { this.myVariable = 1; }; var instance = new myObject(); function myFunction() { alert(this.myVariable); } myFunction(); // undefined myFunction.call(instance); // 1
Dans YUI, on peut donner le scope que l'on veut aux callbacks, fouille la doc jQuery pour voir si cette fonctionalit� est pr�vue (probablement que oui, mais pas avec cette syntaxe)
Sinon oui par d�faut le browser donne le scope de l'objet DOM d'o� provient l'�v�nement

03/12/2010, 09h44
grunk

Merci � vous deux pour vos r�ponses.

La solution d'arcanis , marche parfaitement.

@jpvincent
De m�moire prototype permettait �galement de passer l'instance � une fonction de callback , je vais regarder du cot� de jquery , pas de raison que ce soit pas possible.

Le soucis de call et d'apply, c'est que tu ne peux pas vraiment les utiliser pour des callbacks, sauf en rajoutant un peu de code pour englober les appels.

Au pire suffit de prototyper le code de Function :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Seul ce passage est réellement intéressant, le reste c'est une demo
Function.prototype.bind = function (context) {
    var func = this;
    return function () {
        func.apply(context, arguments);
    };
};
 
// Classe de test
function Foobar() {}
Foobar.prototype.tagazok = 42;
var scope = new Foobar();
 
// On construit une fonction et on lui force un scope défini
// A noter qu'en procédant ainsi, il ne sera pas possible de redéfinir le scope plus tard.
// Mais dans le cas des callbacks, généralement, on s'en fout.
var toto = function () { alert(this.tagazok); }
var scopedToto = toto.bind(scope);
 
setTimeout(toto, 1); // Fail
setTimeout(scopedToto, 1); // Pas fail

01/04/2011, 20h58
Etn3000

Salut,
Merci pour cet article tr�s int�ressant, je suis moi m�me dans les difficult�s de l'apprentissage du JS apr�s le PHP... �a va m'aider ;)
@+