• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript essential-pattern
 

Javascript essential-pattern

on

  • 2,464 views

Talk about the custom event, deferred and pubsub.

Talk about the custom event, deferred and pubsub.

Statistics

Views

Total Views
2,464
Views on SlideShare
2,424
Embed Views
40

Actions

Likes
13
Downloads
53
Comments
0

4 Embeds 40

http://morenadev.esat.com.br 23
http://esatonline-web.sharepoint.com 15
http://nodeslide.herokuapp.com 1
http://us-w1.rockmelt.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript essential-pattern Javascript essential-pattern Presentation Transcript

    • JavaScript Essential Patterns othree @ OSDC 2012
    • Who am I• othree• MozTW member• F2E at HTC• http://blog.othree.net
    • Evolution of the WebWWW Browser Wars Web Standards Web Applications Web 2.0 Mobile1990 1995 2003 2005 2006 2010
    • Web Applications
    • Text
    • Problem to F2E• Large scale application never seen on Web
    • But• The problem F2Es face today already exists
    • 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
    • GOF Book, 1994
    • Browser Environment• Async • Event Driven• Async • Source Code from Internet• Async • Business Logic on Server
    • Patterns to Talk Today• Custom Event• Deferred• PubSub
    • Custom Event http://www.flickr.com/photos/swehrmann/6009646752
    • 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/
    • Native Events• DOM Events • BOM Events • UI • load • UI logic • error • mutation • history • ... • ...
    • 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
    • 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/
    • jQuery’s Event• Normalize event object• ‘trigger’ method to fire specific event
    • ‘trigger’ Method• Can fire any event as you wish• Even none native event name works
    • Custom Event• An event name is defined by you, triggered by you
    • When to Trigger• State/Value change
    • 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
    • Example: Backbone• A driver model• A car model• Driver’s tension will get higher when shift gear
    • Drivervar Driver = Backbone.Model.extend( defaults: { tension: 0 }, tensionUp: function () { this.set({ tension: this.get(tension) + 1 }); });
    • Carvar Car = Backbone.Model.extend( defaults: { gear: P });
    • Observervar driver = new Driver(), car = new Car();car.on(change:gear, function () { driver.tensionUp();});//GOcar.set({ gear: 1});
    • Advantages• Loose coupling• Prevent nested codes
    • Deferred http://www.flickr.com/photos/gozalewis/3256814461/
    • 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
    • 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
    • Example: Image Loaderfunction imgLoader(src) { var _img = new Image(), _def = $.Deferred(); _img.onload = _def.resolve; //success _img.onerror = _def.reject; //fail _img.src = src return _def;}
    • Use Image LoaderimgLoader(/images/logo.png).done(function () { $(#logo).fadeIn();}).fail(function () { document.location = /404.html;});
    • jQuery Deferred• Multiple callback functions• Add callbacks at any time• jQuery.when http://api.jquery.com/category/deferred-object/
    • Image Loader with Cachefunction 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;}
    • Use Image LoaderimgLoader(/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();});
    • jQuery.when$.when( $.getJSON(/api/jedis), $.getJSON(/api/siths), $.getJSON(/api/terminators)).done(function (jedis, siths, terminators) { // do something....});
    • Advantages• Manage callbacks• Cache results• $.when
    • PubSub http://www.flickr.com/photos/birdfarm/519230710/
    • 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
    • Without PubSub
    • X signin signinA YB Z
    • X,Y depends on A
    • PubSubSubscribe Event Only
    • X PubSubA YB Z
    • subscribe ‘signin’ X PubSub subscribeA ‘signin’ YB Z
    • X PubSub publishA ‘signin’ YB Z
    • signin X PubSub signinA YB Z
    • Publish/Subscribe• Mediator + Observer• Easy to implement
    • $(document).trigger(eventName); // Using .on()/.off() from jQuery 1.7.1//equivalent to $.publish(eventName) (function($) {$(document).on(eventName,...); var o = $({});//equivalent to $.subscribe(eventName,...) $.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 //Using Underscore and Backbone// Pub/Sub implementation: var myObject = {};var topics = {}; _.extend( myObject, Backbone.Events );jQuery.Topic = function( id ) { var callbacks, topic = id && topics[ id ]; //Example if ( !topic ) { callbacks = jQuery.Callbacks(); myObject.on(eventName, function( msg ) { topic = { console.log( triggered: + msg ); publish: callbacks.fire, }); subscribe: callbacks.add, unsubscribe: callbacks.remove myObject.trigger(eventName, some event); }; if ( id ) { topics[ id ] = topic; } } return topic;}; http://addyosmani.com/blog/jqcon-largescalejs-2012/
    • When to Use• Module and module have dependency but not really depend on it.
    • 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
    • Error Handler Code//Error Handler$.subscribe(AJAXfail, function () { alert(Something wrong!!);});//Code$.get(/api/siths).fail(function () { $.publish(AJAXfail);});
    • Advantages• Loose coupling• Scalability
    • Summary• Control async process using deferred• Modulize your application• Decouple using custom event• Decouple more using pubsub
    • Further Reading...
    • http://addyosmani.com/resources/essentialjsdesignpatterns/book/
    • http://shichuan.github.com/javascript-patterns/
    • http://leanpub.com/asyncjs
    • May the Patterns be with You
    • Questions?
    • 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