簡介
觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己。講道理，如果我們寫的不是稍微底層的代碼，可能不會用到它。 但是有了它會讓代碼更靈活，更加規整，減少冗余代碼，方便分模塊，分功能開發。
使用觀察者模式的好處：
引入
在前端業務中，可能用的比較多的地方可能就是自定義事件了。
其實瀏覽器的事件也是觀察者模式
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代碼跟瀏覽器之間有了聯系，互動。而本來是兩個不同的東西。
在我看來，觀察者模式最大的好處就是在于解耦，會讓我們一鍋端的代碼，分功能，分模塊的抽離開，更加清晰，開發成本變低，也容易維護。
比如：
1、我們項目里的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 模塊？
當然封好一個 好的完整的功能模塊是挺難的一件事情，但我們起碼要有個開始。
訂閱去添加方法，發布了事件池就執行。
2、MV* 類框架
MVC也是一種設計模式，這里面也都應用了觀察者。
他內部也都是各種發布訂閱，好像是一個觀察者模型，從而實現了一個模擬的內存中的dom改變，計算出那個DOM節點應該改變。當然具體實現要做好多事情…就不…
3、redux
簡單實現一個createstore函數
//這是一個工廠函數，可以創建storeconst 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);})4、在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，組件…
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
