Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Design Patterns

35,888 views

Published on

Published in: Technology

Javascript Design Patterns

  1. 1. JavaScript Design Patterns. Subramanyan Murali  Frontend Engineer, YDN Evangelist 
  2. 2. Coverage  •  Introduc/on  •  Pre‐requisites   •  Module Pa7ern   •  Prototype Pa7ern  •  Factory Pa7ern   •  Decorator Pa7ern  •  Observer Pa7ern  2 
  3. 3. Pa7erns?   General reusable solu/on to a commonly occurring  problem in soBware design. Op/mal solu/ons to  common problems  3 
  4. 4. Pa7erns? …   Descrip/on or template for how to solve a problem  that can be used in many different situa/ons  4 
  5. 5. Pa7erns  •  Crea/onal  –  Deal with class instan/a/on / Object Crea/on  •  Structural  –  Use inheritance to compose interfaces  –  define ways to compose objects to obtain new  func/onality  •  Behavioral  –  concerned with communica/on between objects  5 
  6. 6. JavaScript is not Java !@#$%  •  Everything is an Object  •  Class free  •  Popular as a scrip/ng language in the browser  •  Typeless syntax  •  No compila/on   •  C‐like syntax  •  Late binding for all variables  6 
  7. 7. Object Literal nota/on  var myObject = { name: quot;Jack B. Nimblequot;, 'goto': 'Jail', grade: 'A', level: 3 };  return {      getData : func/on( )                       {                              return private_data;                       },      myVar    : 1,      my Str    : “some String”,            px/ck       : document.body.scrollLeB,          y/ck       : document.body.scrollTop,  };    7 
  8. 8. Scope  •  All proper/es and methods are in the public scope  •  There is no Block Scope  –  Global  –  Func/on  •  No direct Sta/c scope support  –  Can provide proper/es & methods on constructors  •  this points to object that’s is calling a method  8 
  9. 9. Global references  •  Global variables are Evil  •  Non explicitly defined vars are implied global  variables  •  Less Global references = be7er JS code  9 
  10. 10. Closure  •  Inner func/on has access to the vars and  parameters of the outer func/on  –  vars and parameters survive un/l reference to inner  func/on survives  •  Callbacks are good use‐cases for using closures  10 
  11. 11. Closure …  func/on createAdd (base)  {      return func/on (num)      {           return base + num; // base is accessible through closure      }  }  var  add5 = createAdd(5);  alert( add5(2) );  // Alerts 7   11 
  12. 12. Constructors  •  Resembles classical Java like coding  •  this keyword is used to assign/access object  proper/es and methods   •  No explicit return as all proper/es and methods  are accessible on this   •  Constructors create separate copies of members  for each new object created  •  CreaConal PaEern  12 
  13. 13. Constructors …  func/on Car( sColor, sMake ) {     this.color = sColor;     this.make = sMake;     this.showDetails = func/on( ) {        alert(this.color + ” “ + this.make);     };  }  var myCar = new Car(“Light Blue”, “Chevi Spark”);  Var dadCar = new Car(“Black”, “Honda City”);  13 
  14. 14. Prototype  •  Hidden link property  •  If a item is accessed on an object is not present,  then its is checked going up the prototype chain  ObjB.prototype = new ObjA ( );  ObjA  this.initA ( )  ObjC.prototype = new ObjB ( );  ObjB  this.initB ( )  ObjC  var test = new objC ( )  this.initC ( )  test.initA ( );  14 
  15. 15. Singletons  •  Tradi/onally ‐ Restrict instan/a/on of a class to  one object  •  In Javascript – The func/on object is pre‐ instan/ated, and will have just one instance   •  Useful when exactly one object is needed to  coordinate ac/ons across the system  •  CreaConal PaEern  15 
  16. 16. Singletons …  func/on MyClass( ) {     if (MyClass.caller != MyClass.getInstance) {         throw new Error (“MyClass is not a constructorquot;);     } // this will ensure that users wont be able to do new MyClass()      var myProperty = quot;hello worldquot;;     this.myMethod  = func/on( ) {        alert( myProperty );     };  }  MyClass._instance = null;                //define the staCc property/flag  MyClass.getInstance = func/on ( ) {      if (this. _instance == null) {          this._instance = new MyClass( );      }      return this._instance;  }  MyClass.getInstance( ).myMethod( );  16 
  17. 17. Module Pa7ern  •  Uses Singleton Paradigm  •  Stays out of Global namespace  •  Uses Object literal nota/on  •  Supports private data  •  Scales well for projects that becomes more  complex and as its API grows  •  Eric Miraglia’s Explana/on  17 
  18. 18. Module Pa7ern …  var myModule = func/on( ) {        var _priVar = 10;                          // private aEributes      var _priMethod = func/on( ) {  // private methods         return “foo”;      };      return {         pubVar         : 10,                    // public aEributes         pubMethod : func/on( ) {     // public methods          return “bar”;        },        getData         : func/on ( ) {    // Access private members           return _priMethod() + this.pubMethod( ) +_priVar;             }     }  } ( ); // get the anonymous funcCon to execute and return  myModule.getData( );  18 
  19. 19. Prototype Pa7ern  •  Object type is determined by a prototypical  instance  •  No mul/ple copies of members  •  Proper/es inside constructor  •  Methods on the prototype  •  CreaConal paEern  19 
  20. 20. Prototype Pa7ern …  func/on myClassA( ) {     this.ppt1 = 10;     this.ppt2 = 20;  }  myClassA.prototype.myMethod1 =  func/on( ) {     return this.ppt1;  }  myClassA.prototype.myMethod2 = func/on( ) {     return this.ppt2;  }  func/on myClassB( ) {     this.ppt3 = 30;  }  myClassB.prototype = new myClassA( );  var test = new myClassB( );  alert( test.ppt3 + test.myMethod2( ) );  20 
  21. 21. Prototype Pa7ern …  •  Instance has just a reference to the methods  defined on the prototype  •  If code needs to establish inheritance, this is a  good pa7ern to use  •  Forms basis of Lazy Inheritance  –  postponed linking of an object with its prototype  (class) un/l it is needed  21 
  22. 22. Factory Pa7ern  •  Main purpose is crea/on of objects  •  Subclasses / Implementer decide which class to  instan/ate  •  Useful to expose objects based on environment  –  XHR objects on browsers  22 
  23. 23. Factory Pa7ern …  func/on XMLH7pFactory( )   {       this.createXMLH7p = func/on( )       {          if (typeof XMLH7pRequest != quot;undefinedquot;)           {              return new XMLH7pRequest( );          }           else if (typeof window.Ac/veXObject != quot;undefinedquot;)           {              return new Ac/veXObject(quot;MSXML2.XMLH7pquot;);          }          else          {              alert( “XHR Object not in produc/on” );          }  }   var xhr = XMLH7pFactory.createXMLH7p( );  23 
  24. 24. Factory Pa7ern …   func/on shapeFactory( ) {      this.create = func/on( type, dimen ) {           switch (type) { // dimension object { }             case quot;circlequot;:                return {                   radius : dimen.radius,   // pixel                    getArea : func/on ( ) {                      return ( 22 / 7 ) * this.radius * this.radius;                   }                       };            break;            case quot;squarequot;:                return {                  length   :  dimen.length,                  breath   : dimen.breath,                  getArea : func/on ( ) {                     return this.length * this.breath;                  }                };             break;          } } }  24 
  25. 25. Factory Pa7ern …   var circle = new shapeFactory().create(quot;circlequot;, { radius : 5 });  circle.getArea( );  var square = new shapeFactory().create(quot;squarequot;, { length : 10, breath : 20 });  square.getArea( );  25 
  26. 26. Decorator Pa7ern   •  Extend / decorate the func/onality of a class at  run/me  •  Pass the original object as a parameter to the  constructor of the decorator  •  The decorator implements the new func/onality  •  Alterna/ve to sub‐classing  •  Structural PaEern  26 
  27. 27. Decorator Pa7ern …  // Create a Name Space  myText = { };  myText.Decorators = { };  // Core base class   myText.Core = func/on( myString ) {      this.show = func/on( ) {   return myString;      };  }  // First Decorator, to add quesCon mark to string  myText.Decorators.addQus/onMark = func/on ( myString ) {      this.show = func/on( ){   return myString.show( ) + '?';      };    }  //Second Decorator, to make string Italics  myText.Decorators.makeItalic = func/on( myString ) {      this.show = func/on(){   return quot;<i>quot; + myString.show( ) + quot;</i>quot;;      };  }  27 
  28. 28. Decorator pa7ern  //Third Decorator, to make first character of sentence caps  myText.Decorators.upperCaseFirstChar = func/on( myString ) {      this.show = func/on( ){            var str = myString.show( );            var ucf = str.charAt(0).toUpperCase( );            return ucf + str.substr( 1, str.length – 1 );      };  }  // Set up the core String   var theString = new myText.Core( “this is a sample test string” );  // Decorate the string with Decorators  theString        = new myText.Decorator.upperCaseFirstChar( theString );  theString        = new myText.Decorator.addQus/onMark( theString );  theString        = new myText.Decorator.makeItalic( theString );   theString.show( );  28 
  29. 29. Observer Pa7ern  •  Object changes state and all its observer objects  are no/fied and updated automa/cally  •  Also known as publisher/subscriber model  •  Well demonstrated in modern event handling  –  W3C’s addEventListener  •  Behavioral paEern   29 
  30. 30. Observer Pa7ern …  •  Fits well for for applica/ons that have lot of  interac/ons  •  Observer class must have the following  –  Subject class also holds a private list of observers  –  AEach method  –  Detach method  –  NoCfy method – to no/fy the change of state  30 
  31. 31. Observer Pa7ern …  // The Observer Object – One who super sees all the print operations function printManager( ) { var queue = [ ]; // The attach method this.addJob = function(name, job) { queue.push( { ”name” : name, quot;job” : job } ); } // The detach method this.removeJob = function(job) { var _queue = [ ]; for(var i in queue) { if(queue[ i ].job == job) continue; else _queue.push( queue[ i ] ); } queue = _queue; }… 31 
  32. 32. Observer Pa7ern …   // The notify method this.doPrint = function( item ) { for ( var i in queue ) { queue[ i ].job.call( this, item ); } } } var p = new printManager(); // Publishers are in charge of quot;publishing” function printWithItalics( str ) { // The callback function – the print job alert( “<i>” + str + “</i>” ); } //Once subscribers are notified their callback functions are invoked] p.addJob( quot;italicsquot;, printWithItalics); // Notify the observer about a state change p.doPrint(quot;this is a testquot;); 32 
  33. 33. Go see pa7erns   Thank you   33 

×