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.7k
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
三視点LLMによる複数観点レビュー
mhlyc
0
230
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
430
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
microCMSではじめるAIライティング
himaratsu
0
150
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
730
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
300
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
330
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Site-Speed That Sticks
csswizardry
10
700
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Optimizing for Happiness
mojombo
379
70k
A designer walks into a library…
pauljervisheath
207
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Being A Developer After 40
akosma
90
590k
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