Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Essential Patterns
Search
othree
April 15, 2012
Technology
12
4.8k
JavaScript Essential Patterns
Talk about the custom event, deferred and pubsub.
othree
April 15, 2012
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
2k
WAT JavaScript Date
othree
3
2k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.8k
Web Trends to 2015
othree
4
320
Transducer
othree
9
3k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Technology
See All in Technology
インフラ寄りSREの生存戦略
sansantech
PRO
6
2.1k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
970
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
280
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
330
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
130
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
2
120
LLM時代の検索
shibuiwilliam
2
420
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
350
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
8.1k
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Six Lessons from altMBA
skipperchong
28
3.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Gamification - CAS2011
davidbonilla
81
5.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Site-Speed That Sticks
csswizardry
10
690
Building Applications with DynamoDB
mza
95
6.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
JavaScript Essential Patterns othree @ OSDC 2012
Who am I • othree • MozTW member • F2E
at HTC • http://blog.othree.net
Evolution of the Web 1990 1995 2003 2005 WWW Browser
Wars Web Standards Web Applications 2006 Web 2.0 2010 Mobile
Web Applications
Text
None
None
None
None
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 • UI • UI logic
• mutation • ... • BOM Events • load • error • 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
Driver var Driver = Backbone.Model.extend( defaults: { tension: 0 },
tensionUp: function () { this.set({ tension: this.get('tension') + 1 }); } );
Car var Car = Backbone.Model.extend( defaults: { gear: 'P' }
);
Observer var driver = new Driver(), car = new Car();
car.on('change:gear', function () { driver.tensionUp(); }); //GO car.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 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; }
Use Image Loader imgLoader('/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 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; }
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(); });
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
signin signin A Y X Z B
X, Y depends on A
PubSub Subscribe Event Only
PubSub A Y X Z B
PubSub subscribe ‘signin’ subscribe ‘signin’ A Y X Z B
PubSub publish ‘signin’ A Y X Z B
PubSub signin signin A Y X Z B
Publish/Subscribe • Mediator + Observer • Easy to implement
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');
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...
None
None
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