JavaScript Essential Patterns

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
April 15, 2012

JavaScript Essential Patterns

Talk about the custom event, deferred and pubsub.

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

April 15, 2012
Tweet

Transcript

  1. 2.

    Who am I • othree • MozTW member • F2E

    at HTC • http://blog.othree.net
  2. 3.

    Evolution of the Web 1990 1995 2003 2005 WWW Browser

    Wars Web Standards Web Applications 2006 Web 2.0 2010 Mobile
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 12.

    What is Pattern • A general reusable solution to a

    commonly occurring problem within a given context in software design. http://en.wikipedia.org/wiki/Software_design_pattern
  9. 14.

    Browser Environment • Async • Event Driven • Async •

    Source Code from Internet • Async • Business Logic on Server
  10. 17.

    Event • Something happens to an element, to the main

    document, or to the browser window and that event triggers a reaction. http://www.yuiblog.com/blog/2007/01/17/event-plan/
  11. 18.

    Native Events • DOM Events • UI • UI logic

    • mutation • ... • BOM Events • load • error • history • ...
  12. 19.

    Problem of IE • Didn’t follow the W3C DOM standard

    • Memory leaks • Not support bubbling/capturing • ‘this’ is window, not element • ‘event’ is different http://www.quirksmode.org/blog/archives/2005/08/addevent_consid.html
  13. 20.

    Dean Edward’s Add Event • Manage callback functions • Fallback

    to elem.onevent = function () { ... } • Only one function for each event http://dean.edwards.name/weblog/2005/10/add-event2/
  14. 22.

    ‘trigger’ Method • Can fire any event as you wish

    • Even none native event name works
  15. 25.

    Observer • Define a one-to-many dependency between objects so that

    when one object changes state, all its dependents are notified and updated automatically. GoF Book
  16. 26.

    Example: Backbone • A driver model • A car model

    • Driver’s tension will get higher when shift gear
  17. 27.

    Driver var Driver = Backbone.Model.extend( defaults: { tension: 0 },

    tensionUp: function () { this.set({ tension: this.get('tension') + 1 }); } );
  18. 29.

    Observer var driver = new Driver(), car = new Car();

    car.on('change:gear', function () { driver.tensionUp(); }); //GO car.set({ gear: 1 });
  19. 32.

    History • a.k.a Promise • Idea since 1976 (Call by

    future) • Dojo 0.9 (2007), 1.5 (2010) • jQuery 1.5 (2011) • CommonJS Promises/A
  20. 33.

    What is Deferred • In computer science, future, promise, and

    delay refer to constructs used for synchronization in some concurrent programming languages. http://en.wikipedia.org/wiki/Futures_and_promises
  21. 34.

    Example: Image Loader function imgLoader(src) { var _img = new

    Image(), _def = $.Deferred(); _img.onload = _def.resolve; //success _img.onerror = _def.reject; //fail _img.src = src return _def; }
  22. 36.

    jQuery Deferred • Multiple callback functions • Add callbacks at

    any time • jQuery.when http://api.jquery.com/category/deferred-object/
  23. 37.

    Image Loader with Cache function imgLoader(src) { if (imgLoader[src]) {

    return imgLoader[src]; } var _img = new Image(), _def = $.Deferred(); imgLoader[src] = _def; _img.onload = _def.resolve; //success _img.onerror = _def.reject; //fail _img.src = src return _def; }
  24. 38.

    Use Image Loader imgLoader('/images/logo.png').done(function () { $('#logo').fadeIn(); }).fail(function () {

    document.location = '/404.html'; }); imgLoader('/images/logo.png').done(function () { App.init(); }); imgLoader('/images/logo.png').fail(function () { App.destroy(); });
  25. 42.

    Case • A module know when user signin • X,

    Y modules need to know when user signin • A should not fail when X or Y fails
  26. 52.

    http://addyosmani.com/blog/jqcon-largescalejs-2012/ $(document).trigger('eventName'); //equivalent to $.publish('eventName') $(document).on('eventName',...); //equivalent to $.subscribe('eventName',...) //

    Using .on()/.off() from jQuery 1.7.1 (function($) { var o = $({}); $.subscribe = function() { o.on.apply(o, arguments); }; $.unsubscribe = function() { o.off.apply(o, arguments); }; $.publish = function() { o.trigger.apply(o, arguments); }; }(jQuery)); // Multi-purpose callbacks list object // Pub/Sub implementation: var topics = {}; jQuery.Topic = function( id ) { var callbacks, topic = id && topics[ id ]; if ( !topic ) { callbacks = jQuery.Callbacks(); topic = { publish: callbacks.fire, subscribe: callbacks.add, unsubscribe: callbacks.remove }; if ( id ) { topics[ id ] = topic; } } return topic; }; //Using Underscore and Backbone var myObject = {}; _.extend( myObject, Backbone.Events ); //Example myObject.on('eventName', function( msg ) { console.log( 'triggered:' + msg ); }); myObject.trigger('eventName', 'some event');
  27. 54.

    Example: Error Handler • An module to control the behavior

    when error occurs • All other module should call it when something went wrong • No module should fail because error handler fails
  28. 55.

    Error Handler Code //Error Handler $.subscribe('AJAXfail', function () { alert('Something

    wrong!!'); }); //Code $.get('/api/siths').fail(function () { $.publish('AJAXfail'); });
  29. 57.

    Summary • Control async process using deferred • Modulize your

    application • Decouple using custom event • Decouple more using pubsub
  30. 59.
  31. 60.
  32. 66.

    Photos License • CC License • http://www.flickr.com/photos/sbisson/298160250/ • http://www.flickr.com/photos/gozalewis/3256814461/ •

    http://www.flickr.com/photos/birdfarm/519230710/ • Licensed by Author • http://www.flickr.com/photos/swehrmann/6009646752