首頁  >  文章  >  web前端  >  深入講解Javascript中的觀察者模式(圖文教學)

深入講解Javascript中的觀察者模式(圖文教學)

亚连
亚连原創
2018-05-19 11:38:291284瀏覽

觀察者模式又稱發布訂閱模式,是一種最常用的設計模式之一了。以下這篇文章主要給大家深入的介紹了Javascript中觀察者模式的相關資料考借鏡。

簡介

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

使用觀察者模式的好處:

  1. #支援簡單的廣播通信,自動通知所有已經訂閱過的物件。

  2. 頁面載入後目標物件很容易與觀察者存在一種動態關聯,增加了靈活性。

  3. 目標物件與觀察者之間的抽象耦合關係能夠單獨擴展以及重複使用。

引入

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

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 = &#39;<p>&#39; + this.response + &#39;</p>&#39;
 //
 }
 }
 xhr.responseType = &#39;json&#39;
 xhr.send(null)

其實應該是請求跟 展示渲染分開的。

//请求
function getData () {
 var xhr = new XMLHttpRequest ()
 xhr.open(&#39;get&#39;,url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 this.emit(&#39;渲染&#39;)
 // 发布
 }
 }
 xhr.responseType = &#39;json&#39;
 xhr.send(null)
}
//渲染
function view () {}
xhr.on(&#39;渲染&#39;,view)

直接在狀態碼200那裡放個callback,也能做到。但是,如果我有兩個甚至渲染函數,處理不同的東西,我每次還要改成不同的函數嗎。這個相同請求的過程是不是還要寫一次。

用觀察者的話

function view1 () {}
function view2 () {}
function view3 () {}
function view4 () {}
if(我要渲染view1) {
 xhr.on(&#39;渲染&#39;,view1) //订阅
 xhr.on(&#39;渲染&#39;,view2)
}else{
 xhr.on(&#39;渲染&#39;,view3)
 xhr.on(&#39;渲染&#39;,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: &#39;INCREMENT&#39;};
document.addEventListener(&#39;click&#39;, function (e) {
 //触发一个Action
 store.dispatch(INCREASE_ACTION);
})

4、在node 中的作用 大多数时候我们不会直接使用 EventEmitter,而是在对象中继承它。包括fs、net、 http 在内的,只要是支持事件响应的核心模块都是 EventEmitter 的子类。

实现一个可以发布订阅的类

&#39;use strict&#39;
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,&#39;aa-aa&#39;)
}
function b (something) {
 console.log(something)
}
 event.once(&#39;dosomething&#39;,a)
 event.emit(&#39;dosomething&#39;, &#39;chifan&#39;)
 //event.emit(&#39;dosomething&#39;)
// event.on(&#39;dosomething&#39;,a)
// event.on(&#39;dosomething&#39;,b)
// event.emit(&#39;dosomething&#39;,&#39;chifan&#39;)
// event.off(&#39;dosomething&#39;,a)
// setTimeout(() => {
// event.emit(&#39;dosomething&#39;,&#39;hejiu&#39;)
// },2000)

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JS DOM元素常见增删改查操作详解

JS刷新页面方法总结

JS callback回调函数使用案例详解

以上是深入講解Javascript中的觀察者模式(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn