JS設計模式之Obeserver（觀察者）模式、Publish/Subscribe（發佈/訂閱）模式

時間 2019-11-09

標籤設計模式 obeserver 觀察者 publish subscribe 發佈訂閱欄目 JavaScript 简体版

原文原文鏈接

Obeserver（觀察者）模式

定義

《js設計模式》中對Observer的定義：
一個對象（稱爲subject）維持一系列依賴於它（觀察者）的對象，將有關狀態的任何變動自動通知給它們。jquery

《設計模式：可服用面向對象軟件的基礎》中對Observer的定義：
一個或多個觀察者對目標的狀態感興趣，它們經過將本身依附在目標對象上以便註冊所感興趣的內容。目標狀態發生改變而且觀察者可能對這些改變感興趣，就會發送一個通知消息，調用每一個觀察者的更新方法。當觀察者再也不對目標感興趣時，他們能夠簡單地將本身從中分離。segmentfault

下面看一個觀察者模式的例子：設計模式

//觀察者列表
function ObserverList() {
  this.observerList = [];
}
ObserverList.prototype.add = function(obj) {
  return this.observerList.push(obj);
};
ObserverList.prototype.count = function() {
  return this.observerList.length;
};
ObserverList.prototype.get = function(index) {
  if(index > -1 && index < this.observerList.length) {
    return this.observerList[index ];
  }
};
ObserverList.prototype.indexOf = function(obj, startIndex) {
  var i = startIndex;
  while(i < this.observerList.length) {
    if(this.observerList[i] === obj) {
      return i;
    }
    i++;
  }
  return -1;
};
ObserverList.prototype.removeAt = function(index) {
  this.observerList.splice(index, 1);
};

//目標
function Subject() {
  this.observers = new ObserverList();
}
Subject.prototype.addObserver = function(observer) {
  this.observers.add(observer);
};
Subject.prototype.removeObserver = function(observer) {
  this.observers.removeAt(this.observers.indexOf(observer, 0));
};
Subject.prototype.notify = function(context){
  var observerCount = this.observers.count();
  for(var i=0; i < observerCount; i++){
    this.observers.get(i).update(context);
  }
};

//觀察者
function Observer(name, subject) {
  this.name = name;
  this.subject = subject;
  this.subscribe(this.subject);
}
Observer.prototype.update = function(context) {
  console.log('observer:' + this.name + ' content:' + context);
}
Observer.prototype.subscribe = function(subject) {
  this.subject.addObserver(this);
}


var subject1 = new Subject();
var subject2 = new Subject();
var observer1 = new Observer('observer1', subject1);
var observer2 = new Observer('observer2', subject1);
var observer3 = new Observer('observer3', subject2);
subject1.notify('999感冒靈');
subject2.notify('999胃泰');
//observer:observer1 content:999感冒靈
//observer:observer2 content:999感冒靈
//observer:observer3 content:999胃泰

經常使用的場景promise

網頁的事件綁定

Publish/Subscribe（發佈/訂閱）模式

下面咱們來看一個發佈訂閱的具體實現；微信

var pubsub={};
        (function(q){
            var topics={},
                subUid=-1,
                subscribers,
                len;
            //發佈廣播事件，包含特定的topic名稱和參數
            q.publish=function(topic, args){
                if(!topics[topic]){
                    return false;
                }

                subscribers=topics[topic];
                len=subscribers ? subscribers.length : 0;

                while(len--){
                    subscribers[len].func(topic, args);
                }
                return this;
            };
            q.subscribe=function(topic, func){
                if(!topics[topic]){
                    topics[topic]=[];
                }

                var token=(++subUid).toString();
                topics[topic].push({
                    token:token,
                    func:func
                });
                return token;
            };

            q.unsubscribe=function(token){
                for(var m in topics){
                    if(topics[m]){
                        for(var i = 0, j=topics[m].length; i < j; i++){
                            if(topics[m][i].token === token){
                                topics[m].splice(i, 1);
                                return token;
                            }
                        }
                    }
                }
                return this;
            };
        })(pubsub);


        function log1(topic ,data){
            console.log(topic , data);
        }
        function log2(topic ,data){
            console.log("Topic is "+topic+" Data is "+data);
        }

        pubsub.subscribe("sss",log2);
        pubsub.subscribe("sss",log1);
        pubsub.subscribe("cccc",log2);
        pubsub.subscribe('aaa', log1);
        pubsub.publish("sss","aaaaa1");
        pubsub.publish("cccc","ssssss");
        pubsub.publish('aaa', 'hahahahah');
        //sss aaaaa1
        //Topic is sss Data is aaaaa1
        //Topic is cccc Data is ssssss
        //aaa hahahahah