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
1.7k
WAT JavaScript Date
othree
3
1.8k
Modern HTML Email Development
othree
3
2.5k
MRT & GIT
othree
1
1.9k
YAJS.vim and Vim Syntax Highlight
othree
1
2.5k
Web Trends to 2015
othree
4
300
Transducer
othree
9
2.7k
HITCON 11 Photographer
othree
4
460
fetch is the new XHR
othree
6
3.4k
Other Decks in Technology
See All in Technology
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
エンジニア向け会社紹介資料
caddi_eng
14
220k
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.6k
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Featured
See All Featured
Being A Developer After 40
akosma
72
580k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Typedesign – Prime Four
hannesfritz
37
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Building Applications with DynamoDB
mza
89
5.8k
Become a Pro
speakerdeck
PRO
15
4.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Building Adaptive Systems
keathley
34
2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Debugging Ruby Performance
tmm1
71
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
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