javascript design patterns
TRANSCRIPT
![Page 1: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/1.jpg)
Javascript Design Patterns
Zohar Arad. April 2010
![Page 2: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/2.jpg)
Javascript Design Patterns
• Singleton• Module• Engine• Event-driven• Templates
![Page 3: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/3.jpg)
Why do we need design patterns?
![Page 4: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/4.jpg)
To make our lives as programmers easier!
![Page 5: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/5.jpg)
Singleton
![Page 6: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/6.jpg)
Singleton
A Singleton is an object in our programming scope that has ONLY one instance.
Examples:• Logger• Window / Modal• Reporter
![Page 7: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/7.jpg)
Singleton
Syntax:
var Logger = { initialized:false, initialize:function(){....}, getInstance:function(){ if(!this.initialized){ this.initialize(); } return this; } }
![Page 8: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/8.jpg)
Module
![Page 9: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/9.jpg)
Module
A Module is an object that can be instantiated but is not inheritable.
Useful for any reusable, self-contained logical unit. Fast, slim and does not rely on external libraries.
Examples:• XHR handling• Programmable DOM representation• Almost anything your heart desires
![Page 10: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/10.jpg)
Modulevar Module = function(o){ if(typeof o !== 'object'){ return false; } return function(){ for(prop in o){ if(o.hasOwnProperty(prop)){ this[prop] = o[prop]; } } if(typeof this['initialize'] == 'function'){ this.initialize.apply(this,arguments); } return this; }}
![Page 11: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/11.jpg)
Modulevar MyModule = new Module({ initialize:function(params){....}, doSomething:function(){....}, prop:'value' });
var m = new Module();
![Page 12: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/12.jpg)
Engine
![Page 13: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/13.jpg)
Engine
An engine is a callable that implements a unique internal logic and exposes a uniform API to the consumer (much like a Facade).
Key advantages:• Separation of logic from action• Overridable• Plugable• Graceful error-handling
Examples:• Modal window• Media player
![Page 14: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/14.jpg)
Engine
var ModalWindow = new Module({ initialize:function(){....}, call:function(engine,arg){ var engine = Consumer.Engines[engine]; if(typeof engine == 'function'){ engine.call(this,arg) } });
Consumer.Engines = { alert:function(){....}, prompt:function(){....}, confirm:function(){....} }
![Page 15: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/15.jpg)
Event-driven
![Page 16: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/16.jpg)
Event-driven
Event-driven programming uses DOM events as means of communication between separate pieces of code.
Rational:• Decoupling and separation of concerns• No direct calls to functionality on the page• No run-time errors due to missing functions• Excellent for Flash-to-Javascript handling
Examples:• state-to-action handling• inter-object communication• Flash-to-Javascript using window.fireEvent
* relies on external JS library to handle DOM events
![Page 17: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/17.jpg)
Event-driven
AS3:
public function stateChanged(state:String):void{ var func:String = 'window.fireEvent("stateChanged", ["'+state+'"])'; ExternalInterface.call(func);}
Javascript:
window.addEvent('stateChanged',function(state){.....});
![Page 18: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/18.jpg)
Event-driven
var Activity = new Class({ Implements:Events, doAction:function(action){ this.fireEvent('stateChanged',[action]); } });
var Handler = new Class({ initialize:function(){ var activity = new Activity(); activity.addEvent('stateChanged', this.onStateChange.bind(this)); }, onStateChange:function(action){ //...do something } });
![Page 19: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/19.jpg)
Templates
![Page 20: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/20.jpg)
Templates
Used for handling repeat string-manipulation that produces large snippets of HTML.
Rational:• Saves on DOM-fragment handling• Keeps DOM structure in one place• Easy to make changes
Examples:• Dynamic parsing of XHR response• Manipulation of pre-defined DOM structuresr
![Page 21: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/21.jpg)
Templatesvar SomeClass = new Class({ onXHRResponse:function(data){ var json = JSON.decode(data); var html = '' var t = ''; for(item in json){ if(!json.hasOwnProperty(item)) continue; var i = json[item] t = SomeClass.Template; for(prop in i){ if(!i.hasOwnProperty(prop)) continue; var re = new RegExp('__'+prop+'__','gi'); t = t.replace(re,i[prop]); } html =+ t; } $('someElement').set('html',html); } });
SomeClass.Template = '<a href="__url__" title="__title__"><img src="__src__" alt="__title__" /></a>';
![Page 22: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/22.jpg)
Templates//response structure:
{link1:{url:'someurl',title:'sometitle',src:'somesrc',link2:{url:'someurl',title:'sometitle',src:'somesrc',link3:{url:'someurl',title:'sometitle',src:'somesrc',link4:{url:'someurl',title:'sometitle',src:'somesrc' }
![Page 23: Javascript Design Patterns](https://reader036.vdocuments.mx/reader036/viewer/2022081515/5589054ed8b42ad34c8b45c5/html5/thumbnails/23.jpg)
Demo
A demo containing the patterns discussed in the presentation can be found on http://tinyb.cn/2vg