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
63
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
49
去啊无线前端的一天
ningzbruc
1
160
React & Component
ningzbruc
0
34
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
250
KISSY.Base - all about that Base
ningzbruc
0
110
Hammer.js
ningzbruc
1
330
淘宝旅行门票iPad版开发
ningzbruc
0
120
Travel on KISSY mini
ningzbruc
0
180
Events
ningzbruc
2
120
Other Decks in Technology
See All in Technology
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
120
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
340
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
0
280
RemoteFunctionを使ったコロケーション
mkazutaka
1
110
.NET 10のBlazorの期待の新機能
htkym
0
110
serverless team topology
_kensh
3
230
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
880
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
210
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fireside Chat
paigeccino
41
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
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. ]{