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

3,029 views

Published on

Published in: Technology, Business
  • Be the first to comment

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>

×