Function oop - bonnes pratiques ms tech days

1,275 views
1,157 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,275
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • Function oop - bonnes pratiques ms tech days

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

    ×