觀察者模式又稱發布訂閱模式，是一種最常用的設計模式之一了。以下這篇文章主要給大家深入的介紹了Javascript中觀察者模式的相關資料考借鏡。
簡介
觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態改變時就會通知所有的觀察者對象，使得它們能夠自動更新自己。講道理，如果我們寫的不是稍微底層的程式碼，可能就不會用到它。但有了它會讓程式碼更靈活，更規整，減少冗餘程式碼，方便分模組，分功能開發。
使用觀察者模式的好處：
#支援簡單的廣播通信，自動通知所有已經訂閱過的物件。
頁面載入後目標物件很容易與觀察者存在一種動態關聯，增加了靈活性。
目標物件與觀察者之間的抽象耦合關係能夠單獨擴展以及重複使用。
引入
在前端業務中，可能用的比較多的地方可能就是自訂事件了。
其實瀏覽器的事件也是觀察者模式
p.onclick = function click() {
console.log('click')
}這裡function click 訂閱了p 的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) {
ps.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函数
//这是一个工厂函数，可以创建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);
})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)上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是深入講解Javascript中的觀察者模式（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
