jQuery EventEmitter 是一個簡易的 Observer 模式實現,短短的幾行程式碼就實作出對物件加入自訂事件的機制。
事實上 jQuery EventEmitter 只是把 jQuery 內建的 event 機制再加上一層包裝而已,實現方式如下:
(function(jQuery) {
jQuery.eventEmitter = {
_JQInit: function() {
this._JQ = jQuery(this);
},
emit: function(evt, data) {
!this._JQ && this._JQInit();
this._JQ.trigger(evt, data);
},
once: function(evt, handler) {
!this._JQ && this._JQInit();
this._JQ.one(evt, handler);
},
on: function(evt, handler) {
!this._JQ && this._JQInit();
this._JQ.bind(evt, handler);
},
off: function(evt, handler) {
!this._JQ && this._JQInit();
this._JQ.unbind(evt, handler);
}
};
}(jQuery));
因為 jQuery 也可以包裝一個非 DOM 的純物件,所以程式中透過 _JQInit 動態生成一個以 jQuery 包裝起來的 _JQ 物件。
然後在 _JQ 物件上,把 emit/once/on/off 等方法 delegate 到 jQuery 原來的 trigger/one/bind/unbind 方法上,就完成了整個機制。
然後我們就可以這樣用了 (範例直接引用原文) :
function App() {
// do stuff
}
jQuery.extend(App.prototype, jQuery.eventEmitter);
var myApp = new App();
// myApp supports events!
myApp.on('someEvent', function() {
alert('someEvent!');
});
myApp.emit('someEvent'); // 'someEvent' alerted
主要的用法是先讓物件繼承 jQuery.eventEmitter ,這樣一來就可以在我們自行建立的物件上使用事件機制了。