Function oop - bonnes pratiques ms tech days

  • 844 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
844
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

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