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
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
210
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
130
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
17k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
130
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
520
ビギナーであり続ける/beginning
ikuodanaka
3
760
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Facilitating Awesome Meetings
lara
54
6.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Six Lessons from altMBA
skipperchong
28
3.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.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