Kendo UI - Observable

 在 Kendo 中，基类 Class 第一个重要的派生类就是 Observable, 顾名思义，就是一个可观察的对象，也就是观察者模式的基础。

对于观察者模式来说，应该有主题和观察者，这里我们讨论的其实是主题，观察者只需要提供一个回调函数，在适当的时候得到回调就可以了。

对于主题来说，我们应该支持多种观察的目标，如果你使用过 .NET 的事件，这里简直就是将 .NET 的事件轮子重新实现了一下。

1.事件

_events 是用来保存注册的事件信息的存储对象，可以在主题上定义多种事件，每个事件就是 _events 上的一个字段，字段的名字就是事件名称，值是一个数组，用来保存注册到这个事件的回调函数。初始化函数中，将这个对象创建出来。

init: function() {
   this._events = {};
},

2. 注册

bind 函数用来进行注册，既可以使用事件名称，处理器方式，也可以一次性注册多个事件，使用事件名称的数组，对应每个事件的处理函数对象来表示。

最关键的实际上是这两行。

 events = that._events[eventName] = that._events[eventName] || [];
 events.push(handler);

这里有一些特殊的处理，就是可以注册仅仅执行一次的处理器。在注册的时候，需要将 one 设置为 true，默认是 undefined，也就是多次的。

在一次的情况下，会自动将用户注册的处理器另外保存到 original 中，然后创建一个新的处理器进行注册，这个处理器在执行一次之后，自动将自己从处理器列表中删除。

注册的全部代码

bind: function(eventName, handlers, one) {
    var that = this,
        idx,
        eventNames = typeof eventName === STRING ? [eventName] : eventName,
        length,
        original,
        handler,
        handlersIsFunction = typeof handlers === FUNCTION,
        events;

    if (handlers === undefined) {
        for (idx in eventName) {
            that.bind(idx, eventName[idx]);
        }
        return that;
    }

    for (idx = 0, length = eventNames.length; idx < length; idx++) {
        eventName = eventNames[idx];

        handler = handlersIsFunction ? handlers : handlers[eventName];

        if (handler) {
            if (one) {
                original = handler;
                handler = function() {
                    that.unbind(eventName, handler);
                    original.apply(that, arguments);
                };
                handler.original = original;
            }
            events = that._events[eventName] = that._events[eventName] || [];
            events.push(handler);
        }
    }

    return that;
},

 

 

3. 取消注册

对应注册的就是取消注册了。

unbind 完成取消注册的任务，取消注册的时候，有三种选择

• 全部取消注册的观察者
• 将某个时间的观察者取消
• 或者单个取消

所以代码更加简单明了。original 就是在一次性事件中保存的原有处理器。

unbind: function(eventName, handler) {
    var that = this,
        events = that._events[eventName],
        idx;

    if (eventName === undefined) {
        that._events = {};
    } else if (events) {
        if (handler) {
            for (idx = events.length - 1; idx >= 0; idx--) {
                if (events[idx] === handler || events[idx].original === handler) {
                    events.splice(idx, 1);
                }
            }
        } else {
            that._events[eventName] = [];
        }
    }

    return that;
}

 

4. 触发处理

触发就比较容易了，提供事件的名称，事件的参数就可以了，直接遍历数组中保存的每一个处理器，通过 call 调用将对象自己作为 this 传递到处理器中。

trigger: function(eventName, e) {
    var that = this,
        events = that._events[eventName],
        idx,
        length;

    if (events) {
        e = e || {};

        e.sender = that;

        e._defaultPrevented = false;

        e.preventDefault = preventDefault;

        e.isDefaultPrevented = isDefaultPrevented;

        events = events.slice();

        for (idx = 0, length = events.length; idx < length; idx++) {
            events[idx].call(that, e);
        }

        return e._defaultPrevented === true;
    }

    return false;
}

 

5. 辅助函数

额外还提供了两个辅助函数，one 和 first

one 用来检查注册仅仅执行一次的处理器，你会看到通过直接将 bind 的 one 参数设置为 true 来实现的。

one: function(eventNames, handlers) {
    return this.bind(eventNames, handlers, true);
},

 

first 用来将处理函数压入调用对象的最前面, unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

first: function(eventName, handlers) {
    var that = this,
        idx,
        eventNames = typeof eventName === STRING ? [eventName] : eventName,
        length,
        handler,
        handlersIsFunction = typeof handlers === FUNCTION,
        events;

    for (idx = 0, length = eventNames.length; idx < length; idx++) {
        eventName = eventNames[idx];

        handler = handlersIsFunction ? handlers : handlers[eventName];

        if (handler) {
            events = that._events[eventName] = that._events[eventName] || [];
            events.unshift(handler);
        }
    }

    return that;
},

 

 

6. 全部代码

全部代码如下：

var Observable = Class.extend({
    init: function() {
        this._events = {};
    },

    bind: function(eventName, handlers, one) {
        var that = this,
            idx,
            eventNames = typeof eventName === STRING ? [eventName] : eventName,
            length,
            original,
            handler,
            handlersIsFunction = typeof handlers === FUNCTION,
            events;

        if (handlers === undefined) {
            for (idx in eventName) {
                that.bind(idx, eventName[idx]);
            }
            return that;
        }

        for (idx = 0, length = eventNames.length; idx < length; idx++) {
            eventName = eventNames[idx];

            handler = handlersIsFunction ? handlers : handlers[eventName];

            if (handler) {
                if (one) {
                    original = handler;
                    handler = function() {
                        that.unbind(eventName, handler);
                        original.apply(that, arguments);
                    };
                    handler.original = original;
                }
                events = that._events[eventName] = that._events[eventName] || [];
                events.push(handler);
            }
        }

        return that;
    },

    one: function(eventNames, handlers) {
        return this.bind(eventNames, handlers, true);
    },

    first: function(eventName, handlers) {
        var that = this,
            idx,
            eventNames = typeof eventName === STRING ? [eventName] : eventName,
            length,
            handler,
            handlersIsFunction = typeof handlers === FUNCTION,
            events;

        for (idx = 0, length = eventNames.length; idx < length; idx++) {
            eventName = eventNames[idx];

            handler = handlersIsFunction ? handlers : handlers[eventName];

            if (handler) {
                events = that._events[eventName] = that._events[eventName] || [];
                events.unshift(handler);
            }
        }

        return that;
    },

    trigger: function(eventName, e) {
        var that = this,
            events = that._events[eventName],
            idx,
            length;

        if (events) {
            e = e || {};

            e.sender = that;

            e._defaultPrevented = false;

            e.preventDefault = preventDefault;

            e.isDefaultPrevented = isDefaultPrevented;

            events = events.slice();

            for (idx = 0, length = events.length; idx < length; idx++) {
                events[idx].call(that, e);
            }

            return e._defaultPrevented === true;
        }

        return false;
    },

    unbind: function(eventName, handler) {
        var that = this,
            events = that._events[eventName],
            idx;

        if (eventName === undefined) {
            that._events = {};
        } else if (events) {
            if (handler) {
                for (idx = events.length - 1; idx >= 0; idx--) {
                    if (events[idx] === handler || events[idx].original === handler) {
                        events.splice(idx, 1);
                    }
                }
            } else {
                that._events[eventName] = [];
            }
        }

        return that;
    }
});

 7. 总结 

Observable 提供了基本的观察者模式支持。