设计模式篇一：观察者模式与发布-订阅模式

矫情吗；* 2022-02-21 10:07 228阅读 0赞

# 观察者模式（Observer） #

观察者模式：**一个对象（主体）根据它维护的一个对象列表（观察者），自动通知它们状态的任何变化。**（举例说明，电商平台关注（订阅）一家店铺（发布者）的鞋子，当鞋子上架之后店铺就会发送消息给用户（订阅者）；用户（订阅者）可以通过取消订阅来取消推送消息接收。）

实际上是：主体对观察者传递消息通知，观察者必须将该消息通知订阅到触发事件对象上。

关系链： **目标**<— *继承* — **具体目标（发布者）**< – *订阅* – *调度观察者* — > **具体观察者（订阅者）** — *继承* —> **观察者**

具体代码实现：

//观察者列表
    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(){
      this.update = function(){
        // 自定义行为
      };
    }

# 发布-订阅模式 #

发布订阅模式：观察者模式也可以说是发布订阅模式，然而发布订阅模式与观察者模式不同之处就在于，**添加了一个中介（调度中心）来避免发布者和订阅者之间产生依赖关系。**

关系链： **订阅者（数量不限）** —*订阅* —> **调度中心** <— *发布* — **发布者（不直接发布）**

两种模式的区别： **观察两种模式其实发现，模式的基本思想是一致的，仅仅是在调度是否是直接调度上有所不同。** 观察者模式是由具体目标直接调度的（eg: dom操作）；而发布订阅模式是在调度中心调度，发布者与订阅者不产生依赖。

具体代码实现：

参考文献：[《Learning JavaScript Design Patterns》][Learning JavaScript Design Patterns]

[Learning JavaScript Design Patterns]: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript