摘要:觀察者模式簡介觀察者模式又稱發布訂閱模式,是一種最常用的設計模式之一了。其實瀏覽器的事件也是觀察者模式這里訂閱了的事件,當我們的鼠標點擊操作,事件發布,對應的就會執行。包括在內的,只要是支持事件響應的核心模塊都是的子類。
觀察者模式
簡介
觀察者模式又稱發布訂閱模式,是一種最常用的設計模式之一了。講道理,如果我們寫的不是稍微底層的代碼,可能不會用到它。 但是有了它會讓代碼更靈活,更加規整,減少冗余代碼,方便分模塊,分功能開發。
引入
在前端業務中,可能用的比較多的地方可能就是自定義事件了。
其實瀏覽器的事件也是觀察者模式
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 = "" + this.response + "
" // } } 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,組件...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86639.html
摘要:概念觀察者模式被廣泛地應用于客戶端編程中。所有的瀏覽器事件,等都是使用觀察者模式的例子。在觀察者模式中,一個對象訂閱另一個對象的指定活動并得到通知,而不是調用另一個對象的方法。此外,觀察者模式還可用于實現數據綁定。 概念 觀察者模式被廣泛地應用于JavaScript客戶端編程中。所有的瀏覽器事件(mouseover,keypress等)都是使用觀察者模式的例子。這種模式的另一個名字叫自...
摘要:解決命名空間問題暫不管,刪除訂閱問題這個用處不大目前我們先著手解決這個問題對應的消息么有被人訂閱沒有傳入具體的回調函數表示取消對應的所有訂閱反向遍歷刪除訂閱回調函數這個對象,能夠解決大部分事件模擬的問題。 訂閱發布模式如果按數學翻譯其實就是.一對多的映射關系.怎么解釋呢? 就是一個開關,同時并聯幾個燈泡(在不同房間),觸發的時候,幾個燈泡都會得到指令,然后執行發光的行為。 訂閱發布模式...
摘要:發布者注冊發布訂閱者自動打印消息消息觀察者模式與發布訂閱模式類似。在此種模式中,一個目標物件在它本身的狀態改變時主動發出通知,觀察者收到通知從而使他們的狀態自動發生變化。 做為非科班出身的前端er,每次聽到設計模式都感覺很高大上,總感覺這些東西是造火箭原子彈用的,距離我們這些造螺絲釘很遙遠。但是最近在做一個聊天消息的業務時,發現貌似用上發布訂閱模式業務就很清晰了。創建一個消息類當作發布...
摘要:最近被人問到設計模式,觀察者模式和發布訂閱模式二者有什么區別。觀察者模式觀察者模式,目標和觀察者是基類,目標提供維護觀察者的一系列方法,觀察者提供更新接口。 最近被人問到設計模式,觀察者(Observer)模式和發布(Publish)/訂閱(Subscribe)模式二者有什么區別。其實這兩種模式還是有些許差異的,本質上的區別是調度的方式不同。 觀察者模式 觀察者模式,目標和觀察者是基類...
閱讀 2861·2021-10-14 09:50
閱讀 1218·2021-10-08 10:21
閱讀 3646·2021-10-08 10:16
閱讀 3063·2021-09-27 14:02
閱讀 3135·2021-09-23 11:21
閱讀 2109·2021-09-07 10:17
閱讀 407·2019-08-30 14:00
閱讀 2105·2019-08-29 17:26