YUI事件体系之Y.Do

YUI团队在种种场合不断的夸耀自己的事件体系是多么强大：

• YUI 3′s Event module is one of the strengths of the library –Eric Miraglia, YUI Theater — Luke Smith: “Events Evolved”
• YUI 3 is not all about DOM manipulation — it also contains a robust set of class/object management tools, not to mention our powerful custom events –Tilo Mitra, 10 Things I Learned While Interning at YUI
• One of the strengths of the YUI App Framework is that it’s integrated tightly with the rest of YUI and benefits from YUI’s fantastic event system and plugin/extension infrastructure. –Ryan Grove, How can I decided whether to choose YUI 3’s MVC or Backbone for a new project?

事实的确如此吗？就使用YUI的开发者反馈来看，应该是不错的：

• AFAIK YUI 3’s event system is the most sophisticated of any JavaScript framework. Am I wrong in thinking that? –Walter Rumsby
• I love the event system in YUI. Pure awesomeness. –Kevin Isom
• I am constantly impressed by the degree of excellence I find in working with the YUI3 framework –Andrew Wooldridge, Cross YUI Communication and Custom Events

作为一名YUI用户，我对其事件体系的强大深有体会。从本篇文章起，我将对YUI事件机制做一个全面分析。

本次我们介绍的是比较基础的两个对象Y.EventHandle和Y.Do。千里之行积于跬步，YUI整套事件机制也是从这两个对象开始构筑的。

Y.EventHandle

Y.EventHandle的作用很简单：注销事件/消息监听。

Y.EventHandle = function (evt, sub) {
    this.evt = evt; // 事件对象
    this.sub = sub; // 监听对象
};
Y.EventHandle.detach = function () {
    this.evt._delete(this.sub); // 执行event对象的_delete方法，注销事件/消息监听
    return true;
};

Y.Do

Y.Do的作用是：向对象方法前面或者后面插入其它方法(前置、后置方法)，以达到动态修改对象行为的目的。这种方式，也称作AOP。

示例

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

// 例1
YUI().use('event-custom', function (Y) {
    var cat = {
        eat: function () {
            console.log('eat a fish');
        }
    };

    cat.eat(); // output: eat a fish

    var beforeHandle = Y.Do.before(function () {
        console.log('catch a fish');
    }, cat, 'eat');
    var afterHandle = Y.Do.after(function () {
        console.log('done!');
    }, cat, 'eat');
    cat.eat(); // output: catch a fish, eat, done!

    afterHandle.detach();
    cat.eat(); // output: catch a fish, eat
});

在不修改原对象方法的基础上，可以方便的添加前置、后置方法，并且注销这些方法也很容易。Y.Do非常漂亮的解决了我们动态修改对象方法的需求！很难想象，如果不用Y.Do代码会复杂成怎样。

源代码分析

接下来，让我们看看YUI的内部实现吧。这是多么有趣的事，就像小时候买把手枪，想不明白为什么可以射击，就砸开一看究竟。

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

// 代码版本为YUI3.4.1，YUI3.5.0对Y.Do的实现有所改进
var DO_BEFORE = 0,
    DO_AFTER = 1;
Y.Do = {
    // 缓存处理对象
    objs: {},
    before: function (fn, obj, sFn) {
        return this._inject(DO_BEFORE, fn, obj, sFn);
    },
    after: function (fn, obj, sFn) {
        return this._inject(DO_AFTER, fn, obj, sFn);
    },
    _inject: function (when, fn, obj, sFn) {
        var id = Y.stamp(obj), o, sid;
        if (!this.objs[id]) this.objs[id] = {};
        o = this.objs[id];
        if (!o[sFn]) {
            // 创建保存对象、方法名的Method对象
            o[sFn] = new Y.Do.Method(obj, sFn);
            // 修改对象方法
            obj[sFn] = function () {
                return o[sFn].exec.apply(o[sFn], arguments);
            };
        }
        sid = id + Y.stamp(fn) + sFn;
        // 注册插入方法
        o[sFn].register(sid, fn, when);

        // 返回EventHandle对象，方便注销
        return new Y.EventHandle(o[sFn], sid);
    }
}

Y.Do.Method = function (obj, sFn) {
    this.obj = obj;
    this.methodName = sFn;
    this.method = obj[sFn];
    this.before = {};
    this.after = {};
};
Y.Do.Method.prototype.register = function (sid, fn, when) {
    if (when) {
        this.after[sid] = fn;
    } else {
        this.before[sid] = fn;
    }
};
// 注销插入方法
Y.Do.Method.prototype._delete = function (sid) {
    delete this.before[sid];
    delete this.after[sid];
};
Y.Do.Method.prototype.exec = function () {
    var before = this.before,
        after = this.after,
        i, ret;
    // 执行插入前面的方法
    for (i in before) {
        if (before.hasOwnProperty(i)) {
            ret = before[i].apply(this.obj, arguments);
        }
    }
    // 执行原方法
    ret = this.method.apply(this.obj, arguments);
    // 执行插入后面的方法
    for (i in after) {
        if (after.hasOwnProperty(i)) {
            ret = after[i].apply(this.obj, arguments);
        }
    }
    return ret;
};

适用场景

a) 动态修改对象方法

请参照例1。

b) 动态修改原型方法

原型也是对象，所以，另外一个适用场景就是修改原型方法。

// 例2
YUI().use('event-custom', function (Y) {
    function Car(brand) {
        this.brand = brand;
    };
    Car.prototype.start = function () {
        console.log('start');
    };

    var myCar = new Car('bmw');
    Y.Do.before(function () {
        console.log('open the door');
    }, Car.prototype, 'start');
    Y.Do.after(function () {
        console.log('the car is started!');
    }, Car.prototype, 'start');

    myCar.start(); // output: open the door, start, the car is started!
});

c) 动态修改宿主方法

为宿主对象添加插件时，插件往往需要在宿主一些方法前后执行某些操作。YUI提供了一个很好的例子。

d) 动态修改被扩展对象方法

为对象添加扩展时，扩展对象往往需要在被扩展对象一些方法前后执行某些操作。YUI提供了一个很好的例子。

进阶使用

由于简化代码，省略了一些细节。Y.Do还有很多功能，例如：可以根据前置方法返回值阻止默认方法执行、替换参数等等。下面介绍一些这样的进阶使用方式：

// 例3
YUI().use('event-custom', function (Y) {
    function Car(brand, degree) {
        this.brand = brand;
        this.degree = degree || 0;
    };
    Car.prototype.shift = function (degree) {
        console.log('change to ' + degree);
    };

    var myCar = new Car('bmw');
    
    // 多个前置方法
    Y.Do.before(function (degree) {
        console.log('prepare to change');
    }, Car.prototype, 'shift');
    Y.Do.before(function (degree) {
        console.log('prepare to change again');
    }, Car.prototype, 'shift');
    myCar.shift(1); // output: prepare to change, prepare to change again, change to 1

    // 多个后置方法
    Y.Do.after(function (degree) {
        console.log('already change');
    }, Car.prototype, 'shift');
    Y.Do.after(function (degree) {
        console.log('already change again');
    }, Car.prototype, 'shift');
    myCar.shift(2); // output: ..., change to 2, already change, already change again 

    // 中止执行
    Y.Do.before(function (degree) {
        if (degree < 0) {
            console.log('halt, too low!');
            return new Y.Do.Halt();
        }
    }, Car.prototype, 'shift');
    myCar.shift(-1); // output: ..., halt, too low! 

    // 阻止默认方法
    Y.Do.before(function (degree) {
        if (degree > 4) {
            console.log('prevent changing, too high!');
            return new Y.Do.Prevent();
        }
    }, Car.prototype, 'shift');
    myCar.shift(5); // output: ..., prevent changing, too high!, already change, ... 

    // 替换参数
    Y.Do.before(function (degree) {
        var d = Math.floor(degree);
        if (degree !== d) {
            return new Y.Do.AlterArgs('degree should be a integer', [d]);
        }
    }, Car.prototype, 'shift');
    myCar.shift(2.5); // output: ..., change to 2, ... 

    // 替换返回值
    Y.Do.after(function (degree) {
        if (degree === 0) {
            return new Y.Do.AlterReturn('', 'wow, your car now has no power');
        }
    }, Car.prototype, 'shift');
    var ret = myCar.shift(0); // output: ..., change to 0, ... 
    console.log(ret); // wow, your car now has no power
});

参考

• YUILibrary-Do
• YUILibrary-EventTarget
• Wikipedia-AOP