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 提供了基本的观察者模式支持。