欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法

 更新時(shí)間:2017年03月30日 11:48:38   作者:柒青衿  
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了javascript觀察者模式的原理、功能并結(jié)合實(shí)例形式給出了觀察者模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:

觀察者模式又叫做發(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ī)制就可以理解為一種觀察者模式。

下面給出一個(gè)JS自定義的PubSub,仔細(xì)閱讀下面這段代碼有助于你理解觀察者模式。相關(guān)代碼請(qǐng)查看github。

function PubSub() {
 this.handlers = {};
}
PubSub.prototype = {
  // 訂閱事件
  on: function(eventType, handler){
    var self = this;
    if(!(eventType in self.handlers)) {
      self.handlers[eventType] = [];
    }
    self.handlers[eventType].push(handler);
    return this;
  },
   // 觸發(fā)事件(發(fā)布事件)
  emit: function(eventType){
    var self = this;
    var handlerArgs = Array.prototype.slice.call(arguments,1);
    for(var i = 0; i < self.handlers[eventType].length; i++) {
     self.handlers[eventType][i].apply(self,handlerArgs);
    }
    return self;
  },
  // 刪除訂閱事件
  off: function(eventType, handler){
    var currentEvent = this.handlers[eventType];
    var len = 0;
    if (currentEvent) {
      len = currentEvent.length;
      for (var i = len - 1; i >= 0; i--){
        if (currentEvent[i] === handler){
          currentEvent.splice(i, 1);
        }
      }
    }
    return this;
  }
};
var pubsub = new PubSub();
var callback = function(data){
  console.log(data);
};
//訂閱事件A
pubsub.on('A', function(data){
  console.log(1 + data);
});
pubsub.on('A', function(data){
  console.log(2 + data);
});
pubsub.on('A', callback);
//觸發(fā)事件A
pubsub.emit('A', '我是參數(shù)');
//刪除事件A的訂閱源callback
pubsub.off('A', callback);
pubsub.emit('A', '我是第二次調(diào)用的參數(shù)');

運(yùn)行結(jié)果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論