Successfully reported this slideshow.
Your SlideShare is downloading. ×

Javascript Design Patterns

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 23 Ad
Advertisement

More Related Content

Advertisement
Advertisement

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>

×