patterns et bonnes pratiques autour de javascript
TRANSCRIPT
![Page 1: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/1.jpg)
Javascript
La POOBonnes pratiques
Jean-pierre VINCENT (indépendant)
![Page 2: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/2.jpg)
Qui ça ?Jean-pierre VINCENT
braincracking.org (veille techno)@theystolemynick
12 ans de WebExpertise technique, formateur, consultant
![Page 3: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/3.jpg)
![Page 4: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/4.jpg)
Voici John l'ingénieur
![Page 5: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/5.jpg)
Lvl 1 : décorateur de page
![Page 6: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/6.jpg)
![Page 7: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/7.jpg)
![Page 8: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/8.jpg)
Lvl 1 : décorateur de page
<script>$('#id').randomPlugin();</script>
![Page 9: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/9.jpg)
Démo plugin easySlider
![Page 10: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/10.jpg)
Moralité
JavaScript ça se copie / colle
![Page 11: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/11.jpg)
Lvl 2 : scripteur
![Page 12: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/12.jpg)
Lvl 2 : scripteur<script>function init( id ) {
$(id).randomPlugin();};
$(document).ready( function() {init( '#main' );init( '#side' );
});</script>
![Page 13: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/13.jpg)
Lvl 2 : scripteur débogueurAjouts :
●Pubs●Widgets sociaux●Trackers●Autres plugins●Autres scripts maison
![Page 14: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/14.jpg)
Lvl 2 : scripteur débogueurAjouts :
●Pubs●Widgets sociaux●Trackers●Autres plugins●Autres scripts maison
![Page 15: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/15.jpg)
Lvl 2 : scripteur débogueur<script>function init( id ) {
$(id).randomPlugin();};
// init se fait écraser$(document).ready( function() {
init( '#main' );init( '#side' );
});</script>
![Page 16: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/16.jpg)
Pollution globale
![Page 17: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/17.jpg)
Pollution globale2 exemples complètement au hasard
● Gmail : 33 variables globales (450K lignes de code)
● Lemonde.fr : 480 variables globales
![Page 18: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/18.jpg)
Actions✓pattern module anonyme + var
✗ Function action() {} ✓ var action = function() {
var myVariable; }
✓namespaces
![Page 19: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/19.jpg)
Création d'un scopeRappel
(function(){ // début de scope localvar private = true;
// ici je suis chez moi
})(); // fin de scope local
![Page 20: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/20.jpg)
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
![Page 21: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/21.jpg)
Namespacesvar MY = {};
![Page 22: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/22.jpg)
Namespacesvar MY = {};
MY.init = function() {};
![Page 23: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/23.jpg)
Namespacesvar MY = {};
MY.init = function() {};
MY.utils = {};
![Page 24: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/24.jpg)
Namespacesvar MY = {};
MY.init = function() {};
MY.utils = {};
MY.utils.XHR = function() {};
![Page 25: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/25.jpg)
Namespacesvar MY = {};
MY.init = function() {};
MY.utils = {};
MY.utils.XHR = function() {};
MY.utils.XHR.instances = {};
![Page 26: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/26.jpg)
Namespaces - astuce
récupérer ou créer un namespace
MY = window.MY || {};
MY.utils = MY.utils || {};
![Page 27: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/27.jpg)
Lvl 4 scripteur organisé(function(){
MY = window.MY || {};MY.init = function( id ) {
$(id).randomPlugin();};
})( );$(document).ready( function() {
MY.init( '#main' );MY.init( '#side' );
});
![Page 28: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/28.jpg)
Lvl 4 scripteur organisé
Démo code final namespaces
![Page 29: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/29.jpg)
Lvl 5 : développeur
![Page 30: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/30.jpg)
ProgrammationOrientéObjet
![Page 31: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/31.jpg)
POO Classique
new, class, static, public, private, __construct, $this, const, self::, extends, protected, parent::, abstract, final, interface, implements, instanceof
![Page 32: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/32.jpg)
POO JSEcmaScript 3
new (optionnel)this (particulier)instanceof
![Page 33: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/33.jpg)
POO JS
new (optionel)this (particulier)instanceof
Rien n'est littéralTout est simulable
![Page 34: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/34.jpg)
Le choix
Prototype ou closure ?
![Page 35: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/35.jpg)
Le choixPrototype ou closure ?
● Prototype :• The JS way• performance (grand nombres)
● Closure :• variables privées• plus lisible ?
![Page 36: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/36.jpg)
ClosuremyClass = function () { var privateVariable = 0; // public methods };
![Page 37: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/37.jpg)
ClosuremyClass = function () { var privateVariable = 0; // public methods return { decrement:function() { console.log( --privateVariable ); }, increment:function() { console.log( ++privateVariable ); } }};
![Page 38: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/38.jpg)
Renvoi d'objetsmyClass = function () { return { decrement:function() { }, increment:function() { } }};myObject = myClass();myObject.decrement(); // -1myObject.decrement(); // -2myObject2 = myClass();myObject2.increment(); // 1myObject2.increment(); // 2
![Page 39: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/39.jpg)
Lvl 5 : développeur
Démo « interface publique »Implémentation d'un « next »
![Page 40: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/40.jpg)
Lvl 6 : développeurDéveloppeur
DHTMLAJAX2.0HTML5 !
![Page 41: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/41.jpg)
Lvl 6 : programmation événementielle
Démo « événements »
![Page 42: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/42.jpg)
Tout est émulable
● Pattern factory
![Page 43: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/43.jpg)
StatiquesmyClass = function () { return { publicMethod:function() {} }};myClass.staticMethod = function() {};
![Page 44: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/44.jpg)
StatiquesmyClass = function () { return { publicMethod:function() {} }};myClass.staticMethod = function() {};
myObject = myClass();MyClass .staticMethod(); // OKMyObject .publicMethod(); // OK
![Page 45: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/45.jpg)
StatiquesmyClass = function () { return { publicMethod:function() {} }};myClass.staticMethod = function() {};
myObject = myClass();MyClass .staticMethod(); // OKMyObject .publicMethod(); // OKMyObject .staticMethod(); // ErrorMyClass .publicMethod(); // Error
![Page 46: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/46.jpg)
Factory
Démo « factory »
![Page 47: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/47.jpg)
Lvl 6 : développeur objet
![Page 48: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/48.jpg)
Tout est émulable
● programmation évènementielle● patterns classiques :
● MVC, ● observer, ● facade, proxy, ● singleton, factory ...
![Page 49: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/49.jpg)
Librairies
Frameworks divers :● Tests U● Events● MVC● Data-bindings
![Page 50: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/50.jpg)
![Page 51: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/51.jpg)
![Page 52: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/52.jpg)
![Page 53: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/53.jpg)
![Page 54: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/54.jpg)
![Page 55: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/55.jpg)
![Page 56: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/56.jpg)
Librairies
![Page 57: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/57.jpg)
Conclusion
● Javascript est différent, apprenez le
● OOP réutilisable
![Page 58: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/58.jpg)
Questions ?
Jean-pierre VINCENTbraincracking.org@theystolemynick
RDV maintenant :stand Generative Objects(N° 55 à côté HP)
![Page 59: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/59.jpg)
Function.prototype
![Page 60: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/60.jpg)
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
![Page 61: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/61.jpg)
Function.prototypeTout est objet
var myFunction = function() {};
myFunction.prototype; // object
![Page 62: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/62.jpg)
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 ); }};
![Page 63: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/63.jpg)
Héritagevar subClass = function() {
this.publicVariable = 10;};
subClass.prototype = myClass.prototype;
![Page 64: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/64.jpg)
Héritagevar subClass = function() {
this.publicVariable = 10;};
subClass.prototype = myClass.prototype;subClass.prototype.constructor= subClass;
![Page 65: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/65.jpg)
Héritagevar subClass = function() {
this.publicVariable = 10;};
subClass.prototype = myClass.prototype;subClass.prototype.constructor= subClass;
myObject2 = new subClass();myObject2.increment(); // 11myObject2.increment(); // 12
![Page 66: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/66.jpg)
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
![Page 67: Patterns et bonnes pratiques autour de JavaScript](https://reader030.vdocuments.pub/reader030/viewer/2022032422/55a98da91a28ab0e048b47e8/html5/thumbnails/67.jpg)
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