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
62
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
46
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
32
阿里旅行去啊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
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
540
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
190
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
270
roppongirb_20250911
igaiga
1
240
Practical Agentic AI in Software Engineering
uzyn
0
110
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
310
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
890
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How STYLIGHT went responsive
nonsquared
100
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Producing Creativity
orderedlist
PRO
347
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Facilitating Awesome Meetings
lara
55
6.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
BBQ
matthewcrist
89
9.8k
Code Review Best Practice
trishagee
71
19k
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. ]{