DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 深入理解Javascript中的觀察者模式
深入理解Javascript中的觀察者模式
編輯:JavaScript基礎知識     

簡介

觀察者模式又叫發布訂閱模式(Publish/Subscribe),它定義了一種一對多的關系,讓多個觀察者對象同時監聽某一個主題對象,這個主題對象的狀態發生變化時就會通知所有的觀察者對象,使得它們能夠自動更新自己。講道理,如果我們寫的不是稍微底層的代碼,可能不會用到它。 但是有了它會讓代碼更靈活,更加規整,減少冗余代碼,方便分模塊,分功能開發。

使用觀察者模式的好處:

  1. 支持簡單的廣播通信,自動通知所有已經訂閱過的對象。
  2. 頁面載入後目標對象很容易與觀察者存在一種動態關聯,增加了靈活性。
  3. 目標對象與觀察者之間的抽象耦合關系能夠單獨擴展以及重用。

引入

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

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函數

//這是一個工廠函數,可以創建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)

當我們需要用的時候,只需要繼承一下這個EmitterEvent類。要操作的實例就可以用on,emit方法,也就是可以用發布訂閱。比如XHR,組件…

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved