JS中的觀察者模式(發佈訂閱)

觀察者模式

簡介

觀察者模式又稱發佈訂閱模式，是一種最經常使用的設計模式之一了。講道理，若是咱們寫的不是稍微底層的代碼，可能不會用到它。 可是有了它會讓代碼更靈活，更加規整，減小冗餘代碼，方便分模塊，分功能開發。

引入

在前端業務中，可能用的比較多的地方可能就是自定義事件了。
其實瀏覽器的事件也是觀察者模式

div.onclick = function click() {
    console.log('click')
}

這裏function click 訂閱了 div 的click 事件，當咱們的鼠標點擊操做，事件發佈，對應的function就會執行。這個function click 就是一個觀察者。

具象化理解

其實單純的看代碼實現，也能夠理解。可是萬物都是有聯繫的，這些編程模式設計之初也是來源於生活經驗吧，因此，具象的理解也是很重要的體驗。

咱們舉一個結婚辦酒席的例子。好比你的一個好朋友要結婚了，'結婚'這件事情不是每天發生，一生就那麼一... 兩次(maybe more)，因此咱們的'去參加他的婚禮'確定不是每天發生，只是在特定的時候。我確定不能每天去問他，'今天你結婚嗎，我來參加酒席啊'。一次兩次還行，每天問，sb啊。假如是一個找不到對象的單身汪，被你每天這麼問，還不得殺了你。。

那這裏就須要有一個事件發佈了，也就是'通知你'。

我做爲一個觀察者，去訂閱他'結婚' 的這個事件，就是咱們是好朋友，他的婚禮我確定去，咱們已經說好了。那麼我就是觀察者，'我去參加婚禮'就是對應而來的動做。當我訂閱了'結婚' 這個事件，我就不須要每天去問他了，我該幹嗎幹嗎，該去泡妞，約飯，看電影，約... 就幹嗎。

當他發佈'結婚' 這個事件，通知到我了，我就在特定的時候，去do'參加婚禮酒席'這個行爲function ...

//模擬代碼

//我訂閱了'marry' 事件
wo.on('marry',function(){
    //去參加婚禮酒席
})

//而後他發佈。好比瀏覽器的點擊
// 對應的個人 function就會執行

解耦/模塊/功能

其實在代碼中是須要一個相似於中間服務的,管理髮布訂閱的中間者。
好比瀏覽器中的事件處理程序，他提供了訂閱的接口，而後接收'事件' 信號 發佈給你。讓js代碼跟瀏覽器之間有了聯繫，互動。而原本是兩個不一樣的東西。

在我看來，觀察者模式最大的好處就是在於解耦，會讓咱們一鍋端的代碼，分功能，分模塊的抽離開，更加清晰，開發成本變低，也容易維護。
好比：

• 咱們項目裏的view 展現層跟model(數據處理)邏輯層，最開始寫頁面，ajax，字符串拼接，請求回一個接口拼一下，而後給dom。可能咱們一個js文件，一個function裏面又請求了接口，又去負責 view 的展現。

  var xhr = new XMLHttpRequest ()
   xhr.open('get',url)
   xhr.onreadystatechange = function () {
     if(this.readyState !== 4) return
     if(this.status === 200) {
       divs.innerHTML = '<p>' + this.response + '</p>'
       //
     }
   }
   xhr.responseType = 'json'
   xhr.send(null)

其實應該是請求跟 展現渲染分開的。

//請求
 function getData () {
      var xhr = new XMLHttpRequest ()
    xhr.open('get',url)
    xhr.onreadystatechange = function () {
      if(this.readyState !== 4) return
      if(this.status === 200) {
        this.emit('渲染')
        // 發佈
      }
    }
    xhr.responseType = 'json'
    xhr.send(null)
 }
 
    
 //渲染
 function view () {}
 
 xhr.on('渲染',view)

直接在狀態碼200那裏放個callback，也能作到。可是，若是我有兩個甚至渲染函數，處理不一樣的東西，我每次還要改爲不一樣的函數嗎。 這個相同請求的過程是否是還要寫一遍。
用觀察者的話

function view1 () {}
function view2 () {}
function view3 () {}
function view4 () {}

if(我要渲染view1) {
    xhr.on('渲染',view1) //訂閱
    xhr.on('渲染',view2)
}else{
    xhr.on('渲染',view3)
    xhr.on('渲染',view4)
}

好處就在於個人getData這個功能，方法就只負責請求數據，而後他會暴露一個接口，供我去添加方法。這樣個人getData 就相對來講是比較完整的功能模塊，就算我有再多的狀況，個人getData 裏面的代碼是不會改動的了。

有時候咱們常常爲了實現業務，添加一個新的功能，而去更改咱們以前寫好的代碼，致使咱們原本的功能模塊被改的面目全非。
並且會有好多的重複代碼。
過程？ or 模塊？

固然封好一個 好的完整的功能模塊是挺難的一件事情，但咱們起碼要有個開始。

訂閱去添加方法，發佈了事件池就執行。

• MV* 類框架

  MVC也是一種設計模式，這裏面也都應用了觀察者。

他內部也都是各類發佈訂閱，好像是一個觀察者模型，從而實現了一個模擬的內存中的dom改變，計算出那個DOM節點應該改變。固然具體實現要作好多事情...就不...

• redux

簡單實現一個createstore函數

//這是一個工廠函數，能夠建立store

const  createStore = (reducer) => {
   let state; // 定義存儲的state
   let listeners = [];
   
  //  getState的做用很簡單就是返回當前是state
  const  getState = ()=> state;
  
    //定義一個派發函數
    //當在外界調用此函數的時候，會修改狀態
  const dispatch = (action)=>{
      //調用reducer函數修改狀態，返回一新的狀態並賦值給這個局部狀態變量
      state = reducer(state,action);
      //依次調用監聽函數，通知全部的監聽函數
      listeners.forEach(listener => listener());
  }
   //訂閱此狀態的函數，當狀態發生變化的時候記得調用此監聽函數
  const subscribe = function(listener){
      //先把此監聽 加到數組中
      listeners.push(listener);
      
      //返回一個函數，當調用它的時候將此監聽函數從監聽數組移除
      return function(){
          listeners = listeners.filter(l => l != listener);
      }
  }
    //默認調用一次dispatch給state賦一個初始值
   dispatch();
  return {
      getState,
      dispatch,
      subscribe
  }
}
let store = createStore(reducer);

//把數據渲染到界面上
const render = () => {
    document.body.innerText = store.getState();
}

// 訂閱狀態變化事件，當狀態變化時用監聽函數
store.subscribe(render);
render();
var INCREASE_ACTION = {type: 'INCREMENT'};
document.addEventListener('click', function (e) {
    //觸發一個Action
    store.dispatch(INCREASE_ACTION);
})

• 在node 中的做用 大多數時候咱們不會直接使用 EventEmitter，而是在對象中繼承它。包括fs、net、 http 在內的，只要是支持事件響應的核心模塊都是 EventEmitter 的子類。

實現一個能夠發佈訂閱的類

'use strict'
class EmitterEvent {
  constructor() {
  //構造器。實例上建立一個事件池
    this._event = {}
  }
  //on 訂閱
  on (eventName, handler) {
  // 根據eventName，事件池有對應的事件數組，
  就push添加，沒有就新建一個。
  // 嚴謹一點應該判斷handler的類型，是否是function
    if(this._event[eventName]) {
      this._event[eventName].push(handler)
    } else {
      this._event[eventName] = [handler]
    }
  }
  emit (eventName) {
  // 根據eventName找到對應數組
    var events = this._event[eventName];
  //  取一下傳進來的參數，方便給執行的函數
    var otherArgs = Array.prototype.slice.call(arguments,1)
    var that = this
    if(events) {
      events.forEach((event) => {
        event.apply(that, otherArgs)
      })
    }
  }
  // 解除訂閱
  off (eventName, handler) {
    var events = this._event[eventName]
    if(events) {
      this._event[eventName] = events.filter((event) => {
        return event !== handler
      })
    }
  }
  // 訂閱之後，emit 發佈執行一次後自動解除訂閱
  once (eventName, handler) {
    var that = this
    function func () {
      var args = Array.prototype.slice.call(arguments,0)
      handler.apply(that, args)
      this.off(eventName,func)
    }
    this.on(eventName, func)
  }
}

var event = new EmitterEvent()
function a (something) {
  console.log(something,'aa-aa')
}
function b (something) {
  console.log(something)
}
 event.once('dosomething',a)
 event.emit('dosomething', 'chifan')
 
 //event.emit('dosomething')

// event.on('dosomething',a)
// event.on('dosomething',b)
// event.emit('dosomething','chifan')
// event.off('dosomething',a)
// setTimeout(() => {
//   event.emit('dosomething','hejiu')
// },2000)

當咱們須要用的時候，只須要繼承一下這個EmitterEvent類。要操做的實例就能夠用on,emit方法，也就是能夠用發佈訂閱。好比XHR，組件...