觀察者模式

中方ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

首先話題下來，我們得反問一下自己，什么是觀察者模式？

概念

觀察者模式（Observer）：通常又被稱作為發(fā)布-訂閱者模式。它定義了一種一對多的依賴關(guān)系，即當(dāng)一個對象的狀態(tài)發(fā)生改變的時候，所有依賴于它的對象都會得到通知并自動更新，解決了主體對象與觀察者之間功能的耦合。

講個故事

上面對于觀察者模式的概念可能會比較官方化，所以我們講個故事來理解它。

A：是共產(chǎn)黨派往國民黨密探，代號 001（發(fā)布者）
B：是共產(chǎn)黨的通信人員，負(fù)責(zé)與 A 進行秘密交接（訂閱者）

• A 日常工作就是在明面采集國民黨的一些情報
• B 則負(fù)責(zé)暗中觀察著 A
• 一旦 A 傳遞出一些有關(guān)國民黨的消息（更多時候需要對消息進行封裝傳遞，后面根據(jù)源碼具體分析）
• B 會立馬訂閱到該消息，然后做一些相對應(yīng)的變更，比如說通知共產(chǎn)黨們做一些事情應(yīng)對國民黨的一些動作。

適用性

以下任一場景都可以使用觀察者模式

• 當(dāng)一個抽象模型有兩個方面，其中一個方面依賴于另一方面。講這兩者封裝在獨立的對象中可以讓它們可以各自獨立的改變和復(fù)用
  
• 當(dāng)一個對象的改變的時候，需要同時改變其它對象，但是卻不知道具體多少對象有待改變
  
• 當(dāng)一個對象必須通知其它對象，但是卻不知道具體對象到底是誰。換句話說，你不希望這些對象是緊密耦合的。

以下是我對vue觀察者模式的理解:

不要對框架的偏見, 你真的了解jquery、angular、react 等等，框架是什么只是工具而已。

你用過jquery的 trigger、on、off 事件綁定的方法嗎？事實上 vue 不過也是這種模式，只不過vue 是自動調(diào)用on方法，自動觸發(fā)trigger。甚至可以不用jquery對事件監(jiān)聽觸發(fā)的實現(xiàn)。其實最終解釋就是對某種事件的callback（基礎(chǔ)原理）。

以下是源碼目錄截圖：

1... vue 實例初始化時，會對data函數(shù)返回的對象里的屬性調(diào)用以下方法，代碼注釋如下:

// 這個是 vue 綁定自動綁定事件的方法和觸發(fā)事件方法, 會把data函數(shù)返回的對象變量屬性，重寫對應(yīng)屬性的 賦值 和獲取的操作。具體查看 （mdn Object.defineProperty api）
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   const value = getter ? getter.call(obj) : val
   // watcher 對象， 如果存在
   if (Dep.target) {
    // 把Watcher 實例 推入 Dep 實例的 subs 數(shù)組里， 這個就相當(dāng)于 on
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
     if (Array.isArray(value)) {
      dependArray(value)
     }
    }
   }
   return value
  },
  set: function reactiveSetter (newVal) {
   const value = getter ? getter.call(obj) : val
   /* eslint-disable no-self-compare */
   if (newVal === value || (newVal !== newVal && value !== value)) {
    return
   }
   /* eslint-enable no-self-compare */
   if (process.env.NODE_ENV !== 'production' && customSetter) {
    customSetter()
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   childOb = !shallow && observe(newVal)
   // 通知 Dep 實例 中subs 里數(shù)組 中所有 Watcher 實例, 然后調(diào)用Watcher實例里的 update方法(), 這個就相當(dāng)于 trigger。
   dep.notify()
  }
 })

// Watcher 構(gòu)造函數(shù) 
 constructor (
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: ?Object,
  isRenderWatcher?: boolean
 )

2...Watcher初始化時，會調(diào)用Dep.pushTarget方法, 把 Wathcer實例賦值到dep.js 里的Dep.target, 接著會根據(jù) exporFn，運行exporFn 所代表的方法。這個方法里基本上包含調(diào)用 1...里的getter方法(想想render鉤子里的操作基本有獲取vue實例屬性data里的值或者獲取vue實例的計算屬性的值)。

var vm = new Vue({
  data () {
    return {msg: '找個小姐姐！'}
  },
  // 相當(dāng)于 exporFn
  render(h) {
    return h('h4', {},
     // 這里面就會調(diào)用 msg 對應(yīng)的 getter方法
     this.msg
    )
  }
})

所以就會使 render 函數(shù) 與 Vue 實例 的 數(shù)據(jù) data屬性 和觀察屬性等產(chǎn)生聯(lián)系，這就形成一個閉環(huán)。當(dāng)其中的屬性變化，就會自動調(diào)用 setter 方法，從而觸發(fā)dep.notify 方法，進而又會觸發(fā) dep.subs 里的 Watcher 實例調(diào)用 update方法，進而更新。
（這部分代碼不知如何說，故此沒寫, 具體查看源碼）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。