Function oop - bonnes pratiques ms tech days

Javascript

La POO
Bonnes pratiques

Jean-pierre VINCENT (indépendant)

Qui ça ?
Jean-pierre VINCENT

braincracking.org (veille techno)
@theystolemynick

12 ans de Web
Expertise technique, formateur,
consultant

Lvl 1 : décorateur de page

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

Moralité

JavaScript ça se copie / colle

Lvl 2 : scripteur
<script>
function init( id ) {
$(id).randomPlugin();
};

$(document).ready( function() {
init( '#main' );
init( '#side' );
});
</script>

Lvl 2 : scripteur débogueur
Ajouts :

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

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

// init se fait écraser
init( '#main' );
init( '#side' );
});
</script>

Pollution globale
2 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 scope
Rappel
(function(){ // début de scope local
var private = true;

// ici je suis chez moi

})(); // fin de scope local

Lvl 3 : scripteur prudent
Correction 1
(function(){ // début de scope local
var init = function( id ) {
};
init( '#main' );
init( '#side' );
});
})(); // fin de scope local

Namespaces
var MY = {};

MY.init = function() {};

Namespaces
var MY = {};


MY.utils = {};

Namespaces
var MY = {};


MY.utils = {};

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

Namespaces
var MY = {};


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 ) {
};
})( );
MY.init( '#main' );
MY.init( '#side' );
});

Lvl 4 scripteur organisé

Démo code final namespaces

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

POO JS
EcmaScript 3

new (optionnel)
this (particulier)
instanceof

POO JS

new (optionel)
this (particulier)
instanceof

Rien n'est littéral
Tout est simulable

Le choix

Prototype ou closure ?

Le choix
Prototype ou closure ?

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

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

Closure
myClass = function () {
var privateVariable = 0;
// public methods

};

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

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

Lvl 5 : développeur

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

Lvl 6 : développeur
Développeur
DHTML
AJAX
2.0
HTML5 !

Lvl 6 : programmation
événementielle

Démo « événements »

Tout est émulable
● Pattern factory

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

Statiques
return {
}
};

MyClass .staticMethod(); // OK
MyObject .publicMethod(); // OK

Statiques
return {
}
};

MyClass .staticMethod(); // OK
MyObject .publicMethod(); // OK
MyObject .staticMethod(); // Error
MyClass .publicMethod(); // Error

Factory

Démo « factory »

Tout est émulable
● programmation évènementielle
● patterns classiques :

● MVC,

● observer,

● facade, proxy,

● singleton, factory ...

Librairies

Frameworks divers :
● Tests U

● Events

● MVC

● Data-bindings

Conclusion

● Javascript est différent, apprenez le

● OOP réutilisable

Questions ?

Jean-pierre VINCENT
braincracking.org
@theystolemynick

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

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.prototype
Tout est objet
var myFunction = function() {};

myFunction.prototype; // object

Function.prototype
var 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éritage
var subClass = function() {
};

subClass.prototype = myClass.prototype;

Héritage
};

subClass.prototype.constructor= subClass;

Héritage
};


myObject2 = new subClass();

Héritage
};

subClass.prototype.square = function(){}

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

Function oop - bonnes pratiques ms tech days

Contenu connexe

Tendances (20)

En vedette (6)

Similaire à Function oop - bonnes pratiques ms tech days (20)

Plus de Jean-Pierre Vincent (15)

Function oop - bonnes pratiques ms tech days

Notes de l'éditeur