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 Zohar Arad. April 2010
Javascript Design Patterns <ul><ul><li>Singleton </li></ul></ul><ul><ul><li>Module </li></ul></ul><ul><ul><li>Engine </li>...
Why do we need design patterns?
To make our lives as programmers easier!
Singleton
Singleton <ul><li>A Singleton is an object in our programming scope that has ONLY one instance. </li></ul><ul><li>Examples...
Singleton <ul><li>Syntax: </li></ul><ul><li>var Logger = { </li></ul><ul><li>     initialized : false ,  </li></ul><ul><li...
Module
Module <ul><li>A Module is an object that can be instantiated but is not inheritable. </li></ul><ul><li>Useful for any reu...
Module <ul><li>var  Module =  function (o){     if(typeof o !== 'object'){          return  false;     }      return funct...
Module <ul><li>var  MyModule =  new  Module({ </li></ul><ul><li>     initialize: function (params){....}, </li></ul><ul><l...
Engine
Engine <ul><li>An engine is a callable that implements a unique internal logic and exposes a uniform API to the consumer (...
Engine <ul><li>var  ModalWindow =  new  Module({ </li></ul><ul><li>     initialize: function (){....}, </li></ul><ul><li> ...
Event-driven
Event-driven <ul><li>Event-driven programming uses DOM events as means of communication between separate pieces of code. <...
Event-driven <ul><li>AS3: </li></ul><ul><li>public function  stateChanged(state: String ):void{ </li></ul><ul><li>     var...
Event-driven <ul><li>var  Activity =  new  Class({ </li></ul><ul><li>     Implements: Events , </li></ul><ul><li>     doAc...
Templates
Templates <ul><li>Used for handling repeat string-manipulation that produces large snippets of HTML. </li></ul><ul><li>Rat...
Templates <ul><li>var  SomeClass = new Class({ </li></ul><ul><li>     onXHRResponse: function (data){ </li></ul><ul><li>  ...
Templates <ul><li>//response structure: </li></ul><ul><li>{ </li></ul><ul><li>link1 :{url:'someurl',title:'sometitle',src:...
Demo <ul><li>A demo containing the patterns discussed in the presentation can be found on  http://tinyb.cn/2vg </li></ul>
Upcoming SlideShare
Loading in …5
×

of

Javascript Design Patterns Slide 1 Javascript Design Patterns Slide 2 Javascript Design Patterns Slide 3 Javascript Design Patterns Slide 4 Javascript Design Patterns Slide 5 Javascript Design Patterns Slide 6 Javascript Design Patterns Slide 7 Javascript Design Patterns Slide 8 Javascript Design Patterns Slide 9 Javascript Design Patterns Slide 10 Javascript Design Patterns Slide 11 Javascript Design Patterns Slide 12 Javascript Design Patterns Slide 13 Javascript Design Patterns Slide 14 Javascript Design Patterns Slide 15 Javascript Design Patterns Slide 16 Javascript Design Patterns Slide 17 Javascript Design Patterns Slide 18 Javascript Design Patterns Slide 19 Javascript Design Patterns Slide 20 Javascript Design Patterns Slide 21 Javascript Design Patterns Slide 22 Javascript Design Patterns Slide 23
Upcoming SlideShare
Architecting single-page front-end apps
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

Javascript Design Patterns

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Javascript Design Patterns

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

    Mar. 25, 2011
  • scarpenter

    Sep. 16, 2010

Views

Total views

3,406

On Slideshare

0

From embeds

0

Number of embeds

36

Actions

Downloads

34

Shares

0

Comments

0

Likes

2

×