YUI事件体系之Y.CustomEvent

红太狼 2023-10-17 19:37 20阅读 0赞

上一篇文章中，简要介绍了YUI实现AOP的`Y.Do`对象。

接下来，我们继续对YUI事件体系进行探索。本次要介绍的是`Y.CustomEvent`对象，从命名上就可以看出，这个对象在整个YUI事件体系中十分重要。它建立起整个自定义事件的体系，而且，DOM事件也构建在这个体系之上。

### Y.Subscriber ###

Y.Subscriber的作用比较简单：执行回调函数。

Y.Subscriber = function (fn, context) {
        this.fn = fn; // 回调函数
        this.context = context; // 上下文
        this.id = Y.stamp(this); // 设置唯一id
    };
    Y.Subscriber.prototype = {
        constructor: Y.Subscriber,
        // 执行回调函数
        notify: function (args, ce) {
            if (this.deleted) return null;
            var ret;
    
            ret = this.fn.apply(this.context, args || []);
            // 只监听一次
            if (this.once) {
                ce._delete(this);
            }
    
            return ret;
        }
    };

### Y.CustomEvent ###

`Y.CustomEvent`主要作用是：建立自定义事件机制，为方便的进行事件创建、监听、触发提供良好基础。自定义事件机制，实际上是[Observer Pattern][]（[Publish–subscribe Pattern][Publish_subscribe Pattern]的演化）的一种实现，这种机制能够方便的实现模块间解耦，增强模块的扩展性。

YUI的自定义事件较其它一些js库来说要强大一些，有这样一些好的features：

*  支持事件接口(Event Facade)，在回调函数中可以进行调用
 *  支持设置默认执行方法
 *  支持停止/立即停止传播，并可设定停止传播时执行的方法
 *  支持阻止默认行为(默认执行方法)，并可设定阻止默认行为时执行的方法
 *  支持冒泡。指定冒泡目标序列，就可以顺序的触发事件(需要`Y.EventTarget`)
 *  支持广播。每个自定义事件，都可以设置在当前YUI实例范围内和全局YUI内进行广播

可以看出，YUI的自定义事件和DOM事件极其类似，这种设计自然到我们在用自定义事件时，丝毫感觉不到和DOM事件的差异。

#### 示例 ####

让我们先来看个简单的例子：

// 例1 简单自定义事件
    YUI().use('event-custom', function (Y) {
        var eatEvent = new Y.CustomEvent('eat');
        var onHandle = eatEvent.on(function () {
            Y.log('before eating');
        });
        var onHandle2 = eatEvent.on(function () {
            Y.log('before eating, too');
        });
        var afterHandle = eatEvent.after(function () {
            Y.log('after eating');
        }); 
    
        // output: "before eating", "before eating, too", "after eating"
        eatEvent.fire();
    
        onHandle2.detach();
        // output: "before eating", "after eating"
        eatEvent.fire();
    });

有些事件只需触发一次，比如你的各种第一次～～～。来看这个例子：

// 例2 仅触发一次的自定义事件
    YUI().use('event-custom', function (Y) {
        var birthEvent = new Y.CustomEvent('birth', {
            fireOnce: true  // you can only birth once
        });
        var onBirthHandle = birthEvent.on(function () {
            Y.log('before birth');
        });
    
        // output: "before birth"
        birthEvent.fire();
        // nothing happened
        birthEvent.fire();
    
        // 只触发一次的事件在触发后，再次添加监听方法时，会被立即执行
        // output: before birth, too
        var onBirthHandle2 = birthEvent.on(function () {
            Y.log('before birth, too');
        });
    });

也许你还在琢磨，事件广播是什么？因为YUI使用了sandbox设计，可以生成不同实例绑定不同api，所以才有了事件广播机制。来看这个例子：

// 例3 事件广播
    YUI().use('event-custom', function (Y) {
        var cryEvent = new Y.CustomEvent('cry', {
            broadcast: 2  // global broadcast
        });
        cryEvent.on(function () {
            Y.log('before cry');
        });
        Y.on('cry', function () {
            Y.log('YUI instance broadcast');
        });
        Y.Global.on('cry', function () {
            Y.log('YUI global broadcast');
        });
    
        // output: "before cry", "YUI instance broadcast", "YUI global broadcast"
        cryEvent.fire();
    });

文章之前介绍过YUI自定义事件的种种NB之处，那么用起来如何呢，来看下面的例子：

// 例4 复杂自定义事件
    YUI().use('event-custom', function (Y) {
        var driveEvent = new Y.CustomEvent('drive', {
            emitFacade: true,
            host: {  // hacking. 复杂自定义事件需要指定host，该host必须augment Y.EventTarget
                _yuievt: {},
                _monitor: function () {}
            },
            defaultFn: function () {
                Y.log('execute defaultFn');
            },
            preventedFn: function () {
                Y.log('execute preventedFn');
            },
            stoppedFn: function () {
                Y.log('execute stoppedFn');
            }
        });
        driveEvent.on(function (e) {
            e.stopImmediatePropagation();
        });
        driveEvent.on(function (e) {
            e.preventDefault();
        });
        driveEvent.after(function (e) {
            Y.log('after driving');
        });
    
        // output: "execute stoppedFn", "execute defaultFn"
        driveEvent.fire();
    });

不要失望，现在还没有介绍到事件体系的精华部分`Y.EventTarget`，所以很多特性（例如冒泡）还不能体现出来，拭目以待吧。

#### 源代码分析 ####

接下来，让我们看看YUI的内部实现吧。

注：为了更容易的看懂代码的核心，我做了适当的简化，感兴趣的朋友可以去看未删节的[源码][Link 1]。

#### 适用场景 ####

自定义事件的适用场景与Publish–subscribe Pattern基本一致。具体来讲，我觉得以下一些场景是非常适合用自定义事件的：

##### a) 需要暴露接口/行为以满足扩展需要 #####

底层模块一般会设计的尽量简单，解决核心问题，并适当的开放一些接口，方便应用层进行扩展以满足实际需求。例如表单验证控件，有可能需要在某个表单项验证成功/失败后执行一些额外操作，举一个实际的例子：当用户输入的邮箱地址验证成功时，我们会检查是不是某些比较烂的邮件服务商，如果是则给出一些建议。

YUI作为一个底层基础库，在组件/控件层面加入了大量的自定义事件，以满足实际应用中的需要。例如`Y.Anim`的start、end事件，`Y.io`的success、failure、end事件，`Y.Attribute`中的属性变化事件等。

##### b) 行为可能会被其它模块/方法中止 #####

这一点非常像DOM事件，我们经常会中止一些事件的默认行为，例如anchor的点击事件。

#### 自定义事件 VS 回调函数 ####

这是一个比较难的问题，我自己的看法是：相对回调函数，自定义事件是一种更重但更灵活的方案。在实际应用中，如果对于关心某消息的受众不够清楚，那么就使用事件。否则，比较适合使用回调函数。

[MSDN][]上的解释更好一些：“An event is like an anonymous broadcast, while a call-back is like a handshake. The corollary of this is that a component that raises events knows nothing about its clients, while a component that makes call-backs knows a great deal”。

另外，如果对于性能特别关心，在可能的情况下，尽量使用回调。

### 参考 ###

*  [YUILibrary-CustomEvent][]
 *  [YUILibrary-EventTarget][]
 *  [Wikipedia-Publish–subscribe Pattern][Observer Pattern]
 *  [Zakas-Custom events in JavaScript][]
 *  [When to Use Events or Call-Backs for Notifications][MSDN]

**发现文章有错误、对内容有疑问，都可以关注美团点评技术团队微信公众号（meituantech），在后台给我们留言。我们每周会挑选出一位热心小伙伴，送上一份精美的小礼品。快来扫码关注我们吧！**

![公众号二维码][1521521024099-image.png]

[Observer Pattern]: http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern
[Publish_subscribe Pattern]: http://en.wikipedia.org/wiki/Observer_pattern
[Link 1]: http://yuilibrary.com/yui/docs/api/files/event-custom_js_event-custom.js.html#l38
[MSDN]: http://msdn.microsoft.com/en-us/library/aa733743%28v=vs.60%29.aspx
[YUILibrary-CustomEvent]: http://yuilibrary.com/yui/docs/api/files/event-custom_js_event-custom.js.html
[YUILibrary-EventTarget]: http://yuilibrary.com/yui/docs/event-custom/index.html
[Zakas-Custom events in JavaScript]: http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/
[1521521024099-image.png]: https://tech.meituan.com//img/1521521024099-image.png