JavaScript原生實(shí)現(xiàn)觀察者模式的示例

更新時(shí)間：2017年12月15日 10:10:46 作者：SXT明輝

下面小編就為大家分享一篇JavaScript原生實(shí)現(xiàn)觀察者模式的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

觀察者模式又叫做發(fā)布訂閱模式，它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生改變時(shí)就會(huì)通知所有觀察著對(duì)象。它是由兩類(lèi)對(duì)象組成，主題和觀察者，主題負(fù)責(zé)發(fā)布事件，同時(shí)觀察者通過(guò)訂閱這些事件來(lái)觀察該主體，發(fā)布者和訂閱者是完全解耦的，彼此不知道對(duì)方的存在，兩者僅僅共享一個(gè)自定義事件的名稱(chēng)。

在Nodejs中通過(guò)EventEmitter實(shí)現(xiàn)了原生的對(duì)于這一模式的支持。

在JavaScript中事件監(jiān)聽(tīng)機(jī)制就可以理解為一種觀察者模式。通過(guò)onclick進(jìn)行事件綁定，然后通過(guò)交互行為進(jìn)行觸發(fā)或者事件主動(dòng)觸發(fā)。

下面給出一個(gè)JS自定義的PubSub，仔細(xì)閱讀下面這段代碼有助于你理解觀察者模式。

一、定義觀察者類(lèi)Pubsub

/* Pubsub */
 function Pubsub(){
  //存放事件和對(duì)應(yīng)的處理方法
 this.handles = {};
 }

二、實(shí)現(xiàn)事件訂閱on

//傳入事件類(lèi)型type和事件處理handle
 on: function (type, handle) {
  if(!this.handles[type]){
   this.handles[type] = [];
  }
  this.handles[type].push(handle);
 }

三、實(shí)現(xiàn)事件發(fā)布emit

emit: function () {
  //通過(guò)傳入?yún)?shù)獲取事件類(lèi)型
 var type = Array.prototype.shift.call(arguments);
  if(!this.handles[type]){
   return false;
  }
 for (var i = 0; i < this.handles[type].length; i++) {
   var handle = this.handles[type][i];
   //執(zhí)行事件
  handle.apply(this, arguments);
  }
 }

需要說(shuō)明的是Array.prototype.shift.call(arguments)這句代碼，arguments對(duì)象是function的內(nèi)置對(duì)象，可以獲取到調(diào)用該方法時(shí)傳入的實(shí)參數(shù)組。

shift方法取出數(shù)組中的第一個(gè)參數(shù)，就是type類(lèi)型。

四、實(shí)現(xiàn)事件取消訂閱off

off: function (type, handle) {
  handles = this.handles[type];
  if(handles){
   if(!handle){
    handles.length = 0;//清空數(shù)組
  }else{
    for (var i = 0; i < handles.length; i++) {
     var _handle = handles[i];
     if(_handle === handle){
      handles.splice(i,1);
     }
    }
   }
  }
 }

完整代碼：

/* Pubsub */
 function Pubsub(){
  //存放事件和對(duì)應(yīng)的處理方法
 this.handles = {};
 }
 Pubsub.prototype={
  //傳入事件類(lèi)型type和事件處理handle
  on: function (type, handle) {
   if(!this.handles[type]){
    this.handles[type] = [];
   }
   this.handles[type].push(handle);
  },
  emit: function () {
   //通過(guò)傳入?yún)?shù)獲取事件類(lèi)型
  var type = Array.prototype.shift.call(arguments);
   if(!this.handles[type]){
    return false;
   }
 for (var i = 0; i < this.handles[type].length; i++) {
    var handle = this.handles[type][i];
    //執(zhí)行事件
   handle.apply(this, arguments);
   }
  },
  off: function (type, handle) {
   handles = this.handles[type];
   if(handles){
    if(!handle){
     handles.length = 0;//清空數(shù)組
   }else{
 for (var i = 0; i < handles.length; i++) {
      var _handle = handles[i];
      if(_handle === handle){
       handles.splice(i,1);
      }
     }
    }
   }
  }
 }

五、測(cè)試

var p1 = new Pubsub();
 p1.on('mm', function (name) {
 console.log('mm: '+ name);
 });
 p1.emit('mm','哈哈哈哈');
console.log('===============');
 var p2 = new Pubsub();
 var fn = function (name) {
 console.log('mm2: '+ name);
 };
 var fn2 = function (name) {
 console.log('mm222: '+ name);
 };
 p2.on('mm2', fn);
 p2.on('mm2', fn2);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2', fn);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2');
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');