淺析vue項目中的觀察者模式

一、什么是觀察者模式

　　定義

　　　　“觀察者模式是軟件設計模式的一種。在此種模式中，一個目標對象管理所有相依於它的觀察者對象，並且在它本身的狀態改變時主動發出通知。這通常透過呼叫各觀察者所提供的方法來實現。此種模式通常被用來實時事件處理系統。”　　　　-------------Wikipedia

　　

 

　　作用

• 當抽象個體有兩個互相依賴的層面時。封裝這些層面在單獨的對象內將可允許程序員單獨地去變更與重復使用這些對象，而不會產生兩者之間交互的問題。
• 當其中一個對象的變更會影響其他對象，卻又不知道多少對象必須被同時變更時。
• 當對象應該有能力通知其他對象，又不應該知道其他對象的實做細節時。

二、vue中觀察者模式淺析

　　以下代碼為vue中dep和watcher的觀察者模式示例，watcher訂閱dep，dep通知watcher執行update。

　　dep.js

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }
　　
  addSub (sub: Watcher) {　　　　　　　　//添加訂閱者
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {　　　　　　//刪除訂閱者
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {　　　　　　　　　　　　　　　//通知訂閱者
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()　　　　　　　　　//訂閱者update方法
    }
  }
}

 

　　watcher.js中的update方法

/**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update () {                                  //watcher作為訂閱者的update方法
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

 

三、優缺點淺析

　　觀察者和被觀察者之間耦合小，二者沒有十分緊密的聯系，能夠十分方便地擴展自身，但當觀察者增多的時候性能會有下降。