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
YUI3 EventTarget
Search
ningzbruc
January 24, 2013
Technology
1
46
YUI3 EventTarget
This presentation shows how YUI3 Custom Event System works!
ningzbruc
January 24, 2013
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
9
去啊无线前端的一天
ningzbruc
1
110
React & Component
ningzbruc
0
9
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
190
KISSY.Base - all about that Base
ningzbruc
0
84
Hammer.js
ningzbruc
1
300
淘宝旅行门票iPad版开发
ningzbruc
0
88
Travel on KISSY mini
ningzbruc
0
120
Events
ningzbruc
2
100
Other Decks in Technology
See All in Technology
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
240
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
460
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
150
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
3.2k
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
700
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
440
Handling focus in 2024
tahia910
0
210
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
160
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
3.6k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Bash Introduction
62gerente
605
210k
Code Review Best Practice
trishagee
56
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
BBQ
matthewcrist
80
8.8k
Ruby is Unlike a Banana
tanoku
96
10k
In The Pink: A Labor of Love
frogandcode
138
21k
4 Signs Your Business is Dying
shpigford
176
21k
Happy Clients
brianwarren
92
6.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Transcript
YUI3 Custom Event System ]{
Pub/Sub
Observer Design Pattern
Subject Observer Notify Attach
YUINode.on('click', function(e) { console.log(e.type); // click });
Subject Observer
MySlider.on('switch', function(e) { // more code here
});
Y.EventTarget
Y.EventTarget Y.CustomEvent Y.Subscriber Y.EventHandle Y.EventFacade
// Step 1 var MyEventTarget = new Y.EventTarget(); //
Step 2 var MyCustomEvent = ET.publish('myevent'); // Step 3 var MySubscriber = function(MyEventFacade) { // Step 6 console.log(MyEventFacade.foo); // 1 }; // Step 4 var MyEventHandle = MyEventTarget.on('myevent', MySubscriber); // Step 5 ET.fire('myevent', { foo: 1, bar: 2 }); // Step 7 MyEventHandle.detach();
publish on fire ... Y.EventTarget _yuievt.events {eventtype: new Y.CustomEvent()}
on fire detach ... Y.CustomEvent subscribers {id: new Y.Subscriber()}
notify ... Y.Subscriber fn context args id
detach batch ... Y.EventHandle evt: Y.CustomEvent sub: Y.Subscriber
preventDefault stopPropagation halt ... Y.EventFacade type target currentTarget details args
...
function MyWidget() { this.name = 'mywidget'; }
Y.augment(MyWidget, Y.EventTarget); // MyWidget.publish(...) // MyWidget.on(...) // MyWidget.fire(...)
Y Y.Global Attribute Base Widget Model ...
function Mod(name) { this.name = name;
this.publish('render', { fireOnce: true }); } Y.augment(Mod, Y.EventTarget); Mod.prototype = { render: function() { // more code this.fire('render', { args: YArray(arguments, 0, true) }); return this; } }; Mod.create = function(name, methods) { return Y.mix(new Mod(name), methods); }
var Mod_A = Mod.create('a', { getModBData: function()
{ Mod_B.on('render', function(e) {...}) } }); var Mod_B = Mod.create('b', methods); Mod_A.render().getModBData(); // more code // lazyload Mod_B.render();
Just Do It!
Y.Do
Y.Do.before(fn, obj, sFn, c, args)
None
The end. ]{