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
31
阿里旅行去啊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
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
roppongirb_20250911
igaiga
1
220
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
220
エラーとアクセシビリティ
schktjm
1
1.3k
Practical Agentic AI in Software Engineering
uzyn
0
110
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
550
AWSで始める実践Dagster入門
kitagawaz
1
610
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
280
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Featured
See All Featured
Designing for Performance
lara
610
69k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Side Projects
sachag
455
43k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
4 Signs Your Business is Dying
shpigford
184
22k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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. ]{