iT邦幫忙

4

jQuery EventEmitter 簡介

  • 分享至 

  • xImage
  •  

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 ,這樣一來就可以在我們自行建立的物件上使用事件機制了。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言