Javascript Design Patterns

JavaScript Design Patterns. Subramanyan Murali Frontend Engineer, YDN Evangelist

Coverage •  Introduc/on •  Pre‐requisites •  Module Pa7ern •  Prototype Pa7ern •  Factory Pa7ern •  Decorator Pa7ern •  Observer Pa7ern 2

Pa7erns? General reusable solu/on to a commonly occurring problem in soBware design. Op/mal solu/ons to common problems 3

Pa7erns? … Descrip/on or template for how to solve a problem that can be used in many diﬀerent situa/ons 4

Pa7erns •  Crea/onal –  Deal with class instan/a/on / Object Crea/on •  Structural –  Use inheritance to compose interfaces –  deﬁne ways to compose objects to obtain new func/onality •  Behavioral –  concerned with communica/on between objects 5

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

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

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

Global references •  Global variables are Evil •  Non explicitly deﬁned vars are implied global variables •  Less Global references = be7er JS code 9

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

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

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

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

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

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

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; //deﬁne the staCc property/ﬂag MyClass.getInstance = func/on ( ) { if (this. _instance == null) { this._instance = new MyClass( ); } return this._instance; } MyClass.getInstance( ).myMethod( ); 16

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

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

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

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

Prototype Pa7ern … •  Instance has just a reference to the methods deﬁned 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

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

Factory Pa7ern … func/on XMLH7pFactory( ) { this.createXMLH7p = func/on( ) { if (typeof XMLH7pRequest != quot;undeﬁnedquot;) { return new XMLH7pRequest( ); } else if (typeof window.Ac/veXObject != quot;undeﬁnedquot;) { return new Ac/veXObject(quot;MSXML2.XMLH7pquot;); } else { alert( “XHR Object not in produc/on” ); } } var xhr = XMLH7pFactory.createXMLH7p( ); 23

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

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

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

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

Decorator pa7ern //Third Decorator, to make ﬁrst 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

Observer Pa7ern •  Object changes state and all its observer objects are no/ﬁed and updated automa/cally •  Also known as publisher/subscriber model •  Well demonstrated in modern event handling –  W3C’s addEventListener •  Behavioral paEern 29

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

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

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

Go see pa7erns  Thank you 33

http://www.scoop.it	92
http://www.slideshare.net	89
http://paulgraza.wordpress.com	39
http://www.developpez.net	21
http://paper.li	11
http://translate.googleusercontent.com	2
http://webcache.googleusercontent.com	1
http://gscalzo.pbworks.com	1
http://a0.twimg.com	1

Javascript Design Patterns

by Subramanyan Guhan on Feb 07, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 257

Statistics

Javascript Design Patterns — Presentation Transcript