Patterns et bonnes pratiques autour de JavaScript

Javascript

La POOBonnes pratiques

Jean-pierre VINCENT (indépendant)

Qui ça ?Jean-pierre VINCENT

braincracking.org (veille techno)@theystolemynick

12 ans de WebExpertise technique, formateur, consultant

Voici John l'ingénieur

Lvl 1 : décorateur de page

Lvl 1 : décorateur de page

<script>$('#id').randomPlugin();</script>

Démo plugin easySlider

Moralité

JavaScript ça se copie / colle

Lvl 2 : scripteur

Lvl 2 : scripteur<script>function init( id ) {

$(id).randomPlugin();};

$(document).ready( function() {init( '#main' );init( '#side' );

});</script>

Lvl 2 : scripteur débogueurAjouts :

●Pubs●Widgets sociaux●Trackers●Autres plugins●Autres scripts maison

Lvl 2 : scripteur débogueurAjouts :

●Pubs●Widgets sociaux●Trackers●Autres plugins●Autres scripts maison

Lvl 2 : scripteur débogueur<script>function init( id ) {

$(id).randomPlugin();};

// init se fait écraser$(document).ready( function() {

init( '#main' );init( '#side' );

});</script>

Pollution globale

Pollution globale2 exemples complètement au hasard

● Gmail : 33 variables globales (450K lignes de code)

● Lemonde.fr : 480 variables globales

Actions✓pattern module anonyme + var

✗ Function action() {} ✓ var action = function() {

var myVariable; }

✓namespaces

Création d'un scopeRappel

(function(){ // début de scope localvar private = true;

// ici je suis chez moi

})(); // fin de scope local

Lvl 3 : scripteur prudentCorrection 1(function(){ // début de scope local

var init = function( id ) {$(id).randomPlugin();

};$(document).ready( function() { init( '#main' ); init( '#side' );});

})(); // fin de scope local

Namespacesvar MY = {};

Namespacesvar MY = {};

MY.init = function() {};

Namespacesvar MY = {};

MY.init = function() {};

MY.utils = {};

Namespacesvar MY = {};

MY.init = function() {};

MY.utils = {};

MY.utils.XHR = function() {};

Namespacesvar MY = {};

MY.init = function() {};

MY.utils = {};

MY.utils.XHR = function() {};

MY.utils.XHR.instances = {};

Namespaces - astuce

récupérer ou créer un namespace

MY = window.MY || {};

MY.utils = MY.utils || {};

Lvl 4 scripteur organisé(function(){

MY = window.MY || {};MY.init = function( id ) {

$(id).randomPlugin();};

})( );$(document).ready( function() {

MY.init( '#main' );MY.init( '#side' );

});

Lvl 4 scripteur organisé

Démo code final namespaces

Lvl 5 : développeur

ProgrammationOrientéObjet

POO Classique

new, class, static, public, private, __construct, $this, const, self::, extends, protected, parent::, abstract, final, interface, implements, instanceof

POO JSEcmaScript 3

new (optionnel)this (particulier)instanceof

POO JS

new (optionel)this (particulier)instanceof

Rien n'est littéralTout est simulable

Le choix

Prototype ou closure ?

Le choixPrototype ou closure ?

● Prototype :• The JS way• performance (grand nombres)

● Closure :• variables privées• plus lisible ?

ClosuremyClass = function () { var privateVariable = 0; // public methods };

ClosuremyClass = function () { var privateVariable = 0; // public methods return { decrement:function() { console.log( --privateVariable ); }, increment:function() { console.log( ++privateVariable ); } }};

Renvoi d'objetsmyClass = function () { return { decrement:function() { }, increment:function() { } }};myObject = myClass();myObject.decrement(); // -1myObject.decrement(); // -2myObject2 = myClass();myObject2.increment(); // 1myObject2.increment(); // 2

Lvl 5 : développeur

Démo « interface publique »Implémentation d'un « next »

Lvl 6 : développeurDéveloppeur

DHTMLAJAX2.0HTML5 !

Lvl 6 : programmation événementielle

Démo « événements »

Tout est émulable

● Pattern factory

StatiquesmyClass = function () { return { publicMethod:function() {} }};myClass.staticMethod = function() {};

StatiquesmyClass = function () { return { publicMethod:function() {} }};myClass.staticMethod = function() {};

myObject = myClass();MyClass .staticMethod(); // OKMyObject .publicMethod(); // OK

StatiquesmyClass = function () { return { publicMethod:function() {} }};myClass.staticMethod = function() {};

myObject = myClass();MyClass .staticMethod(); // OKMyObject .publicMethod(); // OKMyObject .staticMethod(); // ErrorMyClass .publicMethod(); // Error

Factory

Démo « factory »

Lvl 6 : développeur objet

Tout est émulable

● programmation évènementielle● patterns classiques :

● MVC, ● observer, ● facade, proxy, ● singleton, factory ...

Librairies

Frameworks divers :● Tests U● Events● MVC● Data-bindings

Librairies

Conclusion

● Javascript est différent, apprenez le

● OOP réutilisable

Questions ?

Jean-pierre VINCENTbraincracking.org@theystolemynick

RDV maintenant :stand Generative Objects(N° 55 à côté HP)

Function.prototype

Tout est objet

"abc".indexOf('a'); // 0

[1,2,3].slice(1); // [2, 3]

13.3714 .toFixed(1); // "13.4"

/[0-9]/g.test('10/11/2011'); // true

Function.prototypeTout est objet

var myFunction = function() {};

myFunction.prototype; // object

Function.prototypevar myClass = function () { // pas de variable privée this.publicVariable = 0;};myClass.prototype = { decrement:function() { console.log( --this.publicVariable ); }, increment:function() { console.log( ++this.publicVariable ); }};

Héritagevar subClass = function() {

this.publicVariable = 10;};

subClass.prototype = myClass.prototype;

Héritagevar subClass = function() {

this.publicVariable = 10;};

subClass.prototype = myClass.prototype;subClass.prototype.constructor= subClass;

Héritagevar subClass = function() {

this.publicVariable = 10;};

subClass.prototype = myClass.prototype;subClass.prototype.constructor= subClass;

myObject2 = new subClass();myObject2.increment(); // 11myObject2.increment(); // 12

Héritagevar subClass = function() {

this.publicVariable = 10;};

subClass.prototype = myClass.prototype;subClass.prototype.constructor= subClass;subClass.prototype.square = function(){}

myObject2 = new subClass();myObject2.square(); // 100

Héritagevar subClass = function() {

this.publicVariable = 10;};

subClass.prototype = myClass.prototype;subClass.prototype.constructor= subClass;subClass.prototype.square = function(){}

myObject2 = new subClass();myObject2.square(); // 100