YUI3 EventTarget

This presentation shows how YUI3 Custom Event System works!

Transcript

1. YUI3  Custom  Event  System ]{
2. Pub/Sub
3. Observer  Design  Pattern
4. Subject Observer Notify Attach
5. YUINode.on('click',  function(e)  {        console.log(e.type);  //  click }); Subject Observer
6. MySlider.on('switch',  function(e)  {        //  more  code  here });
7. Y.EventTarget
8. Y.EventTarget Y.CustomEvent Y.Subscriber Y.EventHandle Y.EventFacade
9. //  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();
10. publish on fire ... Y.EventTarget _yuievt.events {eventtype:  new  Y.CustomEvent()}
11. on fire detach ... Y.CustomEvent subscribers {id:  new  Y.Subscriber()}
12. notify ... Y.Subscriber fn context args id
13. detach batch ... Y.EventHandle evt:  Y.CustomEvent sub:  Y.Subscriber
14. preventDefault stopPropagation halt ... Y.EventFacade type target currentTarget details args ...
15. function  MyWidget()  {        this.name  =  'mywidget'; } Y.augment(MyWidget,  Y.EventTarget); //  MyWidget.publish(...) //  MyWidget.on(...) //  MyWidget.fire(...)
16. Y Y.Global Attribute Base Widget Model ...
17. 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); }
18. 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();
19. Just  Do  It!
20. Y.Do
21. Y.Do.before(fn,  obj,  sFn,  c,  args)
23. The  end. ]{