摘要：觀察者模式簡(jiǎn)介觀察者模式又稱發(fā)布訂閱模式，是一種最常用的設(shè)計(jì)模式之一了。其實(shí)瀏覽器的事件也是觀察者模式這里訂閱了的事件，當(dāng)我們的鼠標(biāo)點(diǎn)擊操作，事件發(fā)布，對(duì)應(yīng)的就會(huì)執(zhí)行。包括在內(nèi)的，只要是支持事件響應(yīng)的核心模塊都是的子類。

簡(jiǎn)介

觀察者模式又稱發(fā)布訂閱模式，是一種最常用的設(shè)計(jì)模式之一了。講道理，如果我們寫的不是稍微底層的代碼，可能不會(huì)用到它。 但是有了它會(huì)讓代碼更靈活，更加規(guī)整，減少冗余代碼，方便分模塊，分功能開(kāi)發(fā)。

引入

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

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

這里function click 訂閱了 div 的click 事件，當(dāng)我們的鼠標(biāo)點(diǎn)擊操作，事件發(fā)布，對(duì)應(yīng)的function就會(huì)執(zhí)行。這個(gè)function click 就是一個(gè)觀察者。

具象化理解

其實(shí)單純的看代碼實(shí)現(xiàn)，也可以理解。但是萬(wàn)物都是有聯(lián)系的，這些編程模式設(shè)計(jì)之初也是來(lái)源于生活經(jīng)驗(yàn)吧，所以，具象的理解也是很重要的體驗(yàn)。

我們舉一個(gè)結(jié)婚辦酒席的例子。比如你的一個(gè)好朋友要結(jié)婚了，"結(jié)婚"這件事情不是天天發(fā)生，一輩子就那么一... 兩次(maybe more)，所以我們的"去參加他的婚禮"肯定不是天天發(fā)生，只是在特定的時(shí)候。我肯定不能天天去問(wèn)他，"今天你結(jié)婚嗎，我來(lái)參加酒席啊"。一次兩次還行，天天問(wèn)，sb啊。假如是一個(gè)找不到對(duì)象的單身汪，被你天天這么問(wèn)，還不得殺了你。。

那這里就需要有一個(gè)事件發(fā)布了，也就是"通知你"。

我作為一個(gè)觀察者，去訂閱他"結(jié)婚" 的這個(gè)事件，就是我們是好朋友，他的婚禮我肯定去，我們已經(jīng)說(shuō)好了。那么我就是觀察者，"我去參加婚禮"就是對(duì)應(yīng)而來(lái)的動(dòng)作。當(dāng)我訂閱了"結(jié)婚" 這個(gè)事件，我就不需要天天去問(wèn)他了，我該干嘛干嘛，該去泡妞，約飯，看電影，約... 就干嘛。

當(dāng)他發(fā)布"結(jié)婚" 這個(gè)事件，通知到我了，我就在特定的時(shí)候，去do"參加婚禮酒席"這個(gè)行為function ...

//模擬代碼

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

//然后他發(fā)布。比如瀏覽器的點(diǎn)擊
// 對(duì)應(yīng)的我的 function就會(huì)執(zhí)行

解耦/模塊/功能

其實(shí)在代碼中是需要一個(gè)類似于中間服務(wù)的,管理發(fā)布訂閱的中間者。
比如瀏覽器中的事件處理程序，他提供了訂閱的接口，然后接收"事件" 信號(hào) 發(fā)布給你。讓js代碼跟瀏覽器之間有了聯(lián)系，互動(dòng)。而本來(lái)是兩個(gè)不同的東西。

在我看來(lái)，觀察者模式最大的好處就是在于解耦，會(huì)讓我們一鍋端的代碼，分功能，分模塊的抽離開(kāi)，更加清晰，開(kāi)發(fā)成本變低，也容易維護(hù)。
比如：

我們項(xiàng)目里的view 展示層跟model(數(shù)據(jù)處理)邏輯層，最開(kāi)始寫頁(yè)面，ajax，字符串拼接，請(qǐng)求回一個(gè)接口拼一下，然后給dom。可能我們一個(gè)js文件，一個(gè)function里面又請(qǐng)求了接口，又去負(fù)責(zé) view 的展示。

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

其實(shí)應(yīng)該是請(qǐng)求跟 展示渲染分開(kāi)的。

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

直接在狀態(tài)碼200那里放個(gè)callback，也能做到。但是，如果我有兩個(gè)甚至渲染函數(shù)，處理不同的東西，我每次還要改成不同的函數(shù)嗎。 這個(gè)相同請(qǐng)求的過(guò)程是不是還要寫一遍。
用觀察者的話

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

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

好處就在于我的getData這個(gè)功能，方法就只負(fù)責(zé)請(qǐng)求數(shù)據(jù)，然后他會(huì)暴露一個(gè)接口，供我去添加方法。這樣我的getData 就相對(duì)來(lái)說(shuō)是比較完整的功能模塊，就算我有再多的情況，我的getData 里面的代碼是不會(huì)改動(dòng)的了。

有時(shí)候我們經(jīng)常為了實(shí)現(xiàn)業(yè)務(wù)，添加一個(gè)新的功能，而去更改我們之前寫好的代碼，導(dǎo)致我們本來(lái)的功能模塊被改的面目全非。
而且會(huì)有好多的重復(fù)代碼。
過(guò)程？ or 模塊？

當(dāng)然封好一個(gè) 好的完整的功能模塊是挺難的一件事情，但我們起碼要有個(gè)開(kāi)始。

訂閱去添加方法，發(fā)布了事件池就執(zhí)行。

MV* 類框架

MVC也是一種設(shè)計(jì)模式，這里面也都應(yīng)用了觀察者。

他內(nèi)部也都是各種發(fā)布訂閱，好像是一個(gè)觀察者模型，從而實(shí)現(xiàn)了一個(gè)模擬的內(nèi)存中的dom改變，計(jì)算出那個(gè)DOM節(jié)點(diǎn)應(yīng)該改變。當(dāng)然具體實(shí)現(xiàn)要做好多事情...就不...

redux

簡(jiǎn)單實(shí)現(xiàn)一個(gè)createstore函數(shù)

//這是一個(gè)工廠函數(shù)，可以創(chuàng)建store

const  createStore = (reducer) => {
   let state; // 定義存儲(chǔ)的state
   let listeners = [];
   
  //  getState的作用很簡(jiǎn)單就是返回當(dāng)前是state
  const  getState = ()=> state;
  
    //定義一個(gè)派發(fā)函數(shù)
    //當(dāng)在外界調(diào)用此函數(shù)的時(shí)候，會(huì)修改狀態(tài)
  const dispatch = (action)=>{
      //調(diào)用reducer函數(shù)修改狀態(tài)，返回一新的狀態(tài)并賦值給這個(gè)局部狀態(tài)變量
      state = reducer(state,action);
      //依次調(diào)用監(jiān)聽(tīng)函數(shù)，通知所有的監(jiān)聽(tīng)函數(shù)
      listeners.forEach(listener => listener());
  }
   //訂閱此狀態(tài)的函數(shù)，當(dāng)狀態(tài)發(fā)生變化的時(shí)候記得調(diào)用此監(jiān)聽(tīng)函數(shù)
  const subscribe = function(listener){
      //先把此監(jiān)聽(tīng) 加到數(shù)組中
      listeners.push(listener);
      
      //返回一個(gè)函數(shù)，當(dāng)調(diào)用它的時(shí)候?qū)⒋吮O(jiān)聽(tīng)函數(shù)從監(jiān)聽(tīng)數(shù)組移除
      return function(){
          listeners = listeners.filter(l => l != listener);
      }
  }
    //默認(rèn)調(diào)用一次dispatch給state賦一個(gè)初始值
   dispatch();
  return {
      getState,
      dispatch,
      subscribe
  }
}
let store = createStore(reducer);

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

// 訂閱狀態(tài)變化事件，當(dāng)狀態(tài)變化時(shí)用監(jiān)聽(tīng)函數(shù)
store.subscribe(render);
render();
var INCREASE_ACTION = {type: "INCREMENT"};
document.addEventListener("click", function (e) {
    //觸發(fā)一個(gè)Action
    store.dispatch(INCREASE_ACTION);
})

在node 中的作用 大多數(shù)時(shí)候我們不會(huì)直接使用 EventEmitter，而是在對(duì)象中繼承它。包括fs、net、 http 在內(nèi)的，只要是支持事件響應(yīng)的核心模塊都是 EventEmitter 的子類。

實(shí)現(xiàn)一個(gè)可以發(fā)布訂閱的類

"use strict"
class EmitterEvent {
  constructor() {
  //構(gòu)造器。實(shí)例上創(chuàng)建一個(gè)事件池
    this._event = {}
  }
  //on 訂閱
  on (eventName, handler) {
  // 根據(jù)eventName，事件池有對(duì)應(yīng)的事件數(shù)組，
  就push添加，沒(méi)有就新建一個(gè)。
  // 嚴(yán)謹(jǐn)一點(diǎn)應(yīng)該判斷handler的類型，是不是function
    if(this._event[eventName]) {
      this._event[eventName].push(handler)
    } else {
      this._event[eventName] = [handler]
    }
  }
  emit (eventName) {
  // 根據(jù)eventName找到對(duì)應(yīng)數(shù)組
    var events = this._event[eventName];
  //  取一下傳進(jìn)來(lái)的參數(shù)，方便給執(zhí)行的函數(shù)
    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 發(fā)布執(zhí)行一次后自動(dòng)解除訂閱
  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)

當(dāng)我們需要用的時(shí)候，只需要繼承一下這個(gè)EmitterEvent類。要操作的實(shí)例就可以用on,emit方法，也就是可以用發(fā)布訂閱。比如XHR，組件...