Discussion :

[Bovino]

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

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 � 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

[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.

[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.

[Bis�n�rs]

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

[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".

[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 ?

[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.

[jpvincent]

- 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)

[Bovino]

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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�.

[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

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[grunk]

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

Soit l'extrait de classe suivant :

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
 
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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 ?

[arcanis]

Enregistre this dans une closure.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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);
};

[jpvincent]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[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.

[arcanis]

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 :

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
// 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

[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
@+