Embed Size (px)
DESCRIPTION
Citation preview
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
