Contenu connexe Similaire à Function oop - bonnes pratiques ms tech days Similaire à Function oop - bonnes pratiques ms tech days (20) Plus de Jean-Pierre Vincent Plus de Jean-Pierre Vincent (15) Function oop - bonnes pratiques ms tech days1. Javascript
La POO
Bonnes pratiques
Jean-pierre VINCENT (indépendant)
2. Qui ça ?
Jean-pierre VINCENT
braincracking.org (veille techno)
@theystolemynick
12 ans de Web
Expertise technique, formateur,
consultant
8. Lvl 1 : décorateur de page
<script>
$('#id').randomPlugin();
</script>
12. Lvl 2 : scripteur
<script>
function init( id ) {
$(id).randomPlugin();
};
$(document).ready( function() {
init( '#main' );
init( '#side' );
});
</script>
13. Lvl 2 : scripteur débogueur
Ajouts :
●
Pubs
●
Widgets sociaux
●
Trackers
●
Autres plugins
●
Autres scripts maison
14. Lvl 2 : scripteur débogueur
Ajouts :
●
Pubs
●
Widgets sociaux
●
Trackers
●
Autres plugins
●
Autres scripts maison
15. Lvl 2 : scripteur débogueur
<script>
function init( id ) {
$(id).randomPlugin();
};
// init se fait écraser
$(document).ready( function() {
init( '#main' );
init( '#side' );
});
</script>
17. Pollution globale
2 exemples complètement au hasard
●Gmail : 33 variables globales (450K lignes
de code)
● Lemonde.fr : 480 variables globales
20. Lvl 3 : scripteur prudent
Correction 1
(function(){ // début de scope local
var init = function( id ) {
$(id).randomPlugin();
};
$(document).ready( function() {
init( '#main' );
init( '#side' );
});
})(); // fin de scope local
24. Namespaces
var MY = {};
MY.init = function() {};
MY.utils = {};
MY.utils.XHR = function() {};
25. Namespaces
var MY = {};
MY.init = function() {};
MY.utils = {};
MY.utils.XHR = function() {};
MY.utils.XHR.instances = {};
27. Lvl 4 scripteur organisé
(function(){
MY = window.MY || {};
MY.init = function( id ) {
$(id).randomPlugin();
};
})( );
$(document).ready( function() {
MY.init( '#main' );
MY.init( '#side' );
});
31. POO Classique
new, class, static, public,
private, __construct,
$this, const, self::,
extends, protected,
parent::, abstract, final,
interface, implements,
instanceof
32. POO JS
EcmaScript 3
new (optionnel)
this (particulier)
instanceof
35. Le choix
Prototype ou closure ?
● Prototype :
• The JS way
• performance (grand nombres)
● Closure :
• variables privées
• plus lisible ?
37. Closure
myClass = function () {
var privateVariable = 0;
// public methods
return {
decrement:function() {
console.log( --privateVariable );
},
increment:function() {
console.log( ++privateVariable );
}
}
};
38. Renvoi d'objets
myClass = function () {
return {
decrement:function() { },
increment:function() { }
}
};
myObject = myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2
myObject2 = myClass();
myObject2.increment(); // 1
myObject2.increment(); // 2
39. Lvl 5 : développeur
Démo « interface publique »
Implémentation d'un « next »
40. Lvl 6 : développeur
Développeur
DHTML
AJAX
2.0
HTML5 !
41. Lvl 6 : programmation
événementielle
Démo « événements »
44. Statiques
myClass = function () {
return {
publicMethod:function() {}
}
};
myClass.staticMethod = function() {};
myObject = myClass();
MyClass .staticMethod(); // OK
MyObject .publicMethod(); // OK
45. Statiques
myClass = function () {
return {
publicMethod:function() {}
}
};
myClass.staticMethod = function() {};
myObject = myClass();
MyClass .staticMethod(); // OK
MyObject .publicMethod(); // OK
MyObject .staticMethod(); // Error
MyClass .publicMethod(); // Error
48. Tout est émulable
● programmation évènementielle
● patterns classiques :
● MVC,
● observer,
● facade, proxy,
● singleton, factory ...
57. Conclusion
● Javascript est différent, apprenez le
● OOP réutilisable
62. 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 );
}
};
64. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
65. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
myObject2 = new subClass();
myObject2.increment(); // 11
myObject2.increment(); // 12
66. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
subClass.prototype.square = function(){}
myObject2 = new subClass();
myObject2.square(); // 100
67. Héritage
var subClass = function() {
this.publicVariable = 10;
};
subClass.prototype = myClass.prototype;
subClass.prototype.constructor= subClass;
subClass.prototype.square = function(){}
myObject2 = new subClass();
myObject2.square(); // 100
Notes de l'éditeur 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12 2/7/12