速通 JavaScript 代理模式和發(fā)布訂閱模式
1. 前言
JavaScript 是一門動態(tài)語言，在實(shí)現(xiàn)設(shè)計(jì)模式的時候，往往會比 Java 等靜態(tài)語言更簡便，本文將介紹在 JavaScript 中如何實(shí)現(xiàn)代理模式和發(fā)布訂閱模式。
2. 代理模式
2.1. 定義
在介紹定義時還是以類圖為主，雖然 JavaScript 實(shí)現(xiàn)設(shè)計(jì)模式時可能不會使用到類，但是類圖提供了一種通用的設(shè)計(jì)模式實(shí)現(xiàn)思想。
代理模式定義：為其他對象提供一種代理以控制對這個對象的訪問。
其類圖如下：
圖片
類圖中的三個角色：
- Subject 抽象主題角色：定義了具體主題和代理主題的共同接口，這樣在任何使用具體主題的地方都可以使用代理主題。
- RealSubject 具體主題角色：邏輯的具體執(zhí)行者。
- Proxy 代理主題角色：實(shí)現(xiàn)了抽象主題接口，并持有對具體主題的引用。
2.2. 實(shí)現(xiàn)
在 JavaScript 中，你可以使用 Proxy 輕松實(shí)現(xiàn)代理模式，比如可以通過代理模式實(shí)現(xiàn)一個只接收 number 類型值的數(shù)組。
const arr = []
const numArr = new Proxy(arr, {
set(target, key, value, proxy) {
if (typeof value !== 'number') {
throw Error("屬性只能是 number 類型");
}
return Reflect.set(target, key, value, proxy);
}
})
numArr.push(0)
numArr.push('1') // Uncaught Error: 屬性只能是 number 類型
console.log(numArr) // Proxy(Array) {0: 0}利用 Proxy，你還可以實(shí)現(xiàn)響應(yīng)式編程。
const data = { userName: '' }
const render = (info) => {
console.log(info)
// 根據(jù)數(shù)據(jù)渲染界面
}
const proxyData = new Proxy(data, {
set(target, key, value, receiver) {
// 設(shè)置值
Reflect.set(target, key, value, receiver)
// 重新觸發(fā)渲染
render(target)
}
})
data.userName = 'xiaoming'// 控制臺輸出 { userName: 'xiaoming' }當(dāng)然你也可以利用 Proxy 來實(shí)現(xiàn)日志功能，用于跟蹤函數(shù)調(diào)用情況。
function add(a, b) {
return a + b;
}
// 日志記錄函數(shù)
function log(message) {
console.log(message);
}
// 創(chuàng)建代理對象
const proxy = newProxy(add, {
// 攔截函數(shù)調(diào)用
apply(target, thisArg, args) {
const result = Reflect.apply(target, thisArg, args);
log(`函數(shù) ${target.name} 被調(diào)用，參數(shù): [${args.join(', ')}]，返回值: ${result}`);
return result;
}
});
const sum1 = proxy(1, 2); // 輸出: 函數(shù) add 被調(diào)用，參數(shù): [1, 2]，返回值: 3
const sum2 = proxy(3, 4); // 輸出: 函數(shù) add 被調(diào)用，參數(shù): [3, 4]，返回值: 72.3. 小結(jié)
最后提一下代理模式和裝飾模式的異同點(diǎn)，兩者的共同點(diǎn)是代理類或裝飾類和原本類都具有相同的接口，不同點(diǎn)則是代理模式著重對代理過程的控制，而裝飾模式則是對類的功能進(jìn)行加強(qiáng)或減弱。
3. 發(fā)布訂閱模式
3.1. 定義
發(fā)布訂閱模式的定義：定義對象間一種一對多的依賴關(guān)系，使得每當(dāng)一個對象改變狀態(tài)，則所有依賴于它的對象都會得到通知并被自動更新。
其類圖如下：
圖片
發(fā)布訂閱模式經(jīng)常會和觀察者模式做對比，兩個設(shè)計(jì)模式廣義上設(shè)計(jì)理念是一致的，在實(shí)現(xiàn)上有些差別，本文更注重實(shí)際應(yīng)用，故不展開此內(nèi)容，借用一張圖來說明。
圖片
3.2. 實(shí)現(xiàn)
接著來完成發(fā)布訂閱模式的簡單實(shí)現(xiàn)，主要是實(shí)現(xiàn) subscribe 和 publish 方法。
const event = {
listeners: [], // 所有訂閱者集合
// 訂閱函數(shù)
subscribe: function(fn) {
this.listeners.push(fn)
},
// 發(fā)布函數(shù)
publish: function() {
for(let i = 0; i < this.listeners.length; i++) {
this.listeners[i]()
}
},
// 移除訂閱函數(shù)
unsubcribe: function(fn) {
const fns = this.listeners;
// 倒序訪問方便使用 splice 移除訂閱函數(shù)
for (let l = fns.length - 1; l >=0; l--) {
const _fn = fns[l];
if (_fn === fn){
fns.splice(l, 1);
}
}
}
}
const fn1 = () => { console.log('trigger1') }
const fn2 = () => { console.log('trigger2') }
event.subscribe(fn1)
event.subscribe(fn2)
event.publish() // 控制臺打印 trigger1, trigger2
event.unsubcribe(fn1)
event.publish() // 控制臺打印 trigger2到此我們實(shí)現(xiàn)了一個簡單版本的發(fā)布訂閱。
接下來我們基于發(fā)布訂閱模式，在 React 中實(shí)現(xiàn)一個類似 Zustand 的狀態(tài)管理功能。
首先我們需要了解一個 React 官方 Hook useSyncExternalStore，這個 Hook 可以讓你訂閱一個外部數(shù)據(jù)源，當(dāng)其中數(shù)據(jù)發(fā)生變化時，React 會觸發(fā)重新渲染。
const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)可以看到該 Hook 參數(shù)有三個，這里我們主要關(guān)注前兩個，第一個參數(shù)即訂閱函數(shù)，第二個參數(shù)為獲取數(shù)據(jù)源的函數(shù)，第三個和服務(wù)端渲染相關(guān)。
接下來我們要結(jié)合發(fā)布訂閱模式和 useSyncExternalStore 實(shí)現(xiàn)一個簡單版本的 Zustand。
const createImpl = (createState) => {
// 相比發(fā)布訂閱模式，多了個狀態(tài)值
let state
let initialState
const listeners = newSet()
// 類似發(fā)布訂閱模式中的 publish 方法，最終會觸發(fā)訂閱者
const setState = (nextState) => {
// 對比狀態(tài)值是否有變化
if (!Object.is(nextState, state)) {
const previousState = state
state = Object.assign({}, state, nextState)
// 觸發(fā)訂閱函數(shù)
listeners.forEach((listener) => listener(state, previousState))
}
}
const getState = () => state
const getInitialState = () => initialState
const subscribe = (listener) => {
listeners.add(listener)
// 返回一個取消訂閱的方法
return() => {
listeners.delete(listener)
}
}
// 清空訂閱
const destory = () => listeners.clear()
const api = {
setState,
getState,
getInitialState,
subscribe,
destory
}
// 調(diào)用 createState 方法返回初始狀態(tài)值，createState 參數(shù)為 set、get 和 api 對象
initialState = (state = createState(setState, getState, api))
return api
}
const create = (createState) => {
const api = createImpl(createState)
// 傳入訂閱方法和獲取數(shù)據(jù)方法到 useSyncExternalStore
const useStore = () => useSyncExternalStore(api.subscribe, api.getState)
// 把 api 合并到 Hook 上
Object.assign(useStore, api)
return useStore
}
exportdefault create先來看下 createImpl 函數(shù)，相比于我們實(shí)現(xiàn)的簡單版發(fā)布訂閱模式，createImpl 內(nèi)部多維護(hù)了一個狀態(tài)值，在調(diào)用發(fā)布方法（setState）時，會更新狀態(tài)值，并觸發(fā)訂閱函數(shù)，訂閱函數(shù)入?yún)樾屡f狀態(tài)值。
最后我們看下如何使用自己的狀態(tài)管理功能。
// create 方法接收一個函數(shù)參數(shù)，內(nèi)部會調(diào)用函數(shù)初始化狀態(tài)值，最終返回一個 Hook
const useStore = create((set) => ({
num: 1,
// 通過 set 方法更新狀態(tài)值，更新后觸發(fā)所有訂閱函數(shù)的調(diào)用
random: () =>set({ num: Math.round(Math.random() * 1000) }),
}))
function Counter() {
// 調(diào)用 useStore，useStore 會調(diào)用 React useSyncExternalStore
const { num, random } = useStore();
return (
<div>
<p>{`Number: ${num}`}</p>
<button onClick={random}>Random</button>
</div>
)
}create 方法接收一個函數(shù)參數(shù)，用于初始化狀態(tài)，最終 create 會返回一個 Hook。在狀態(tài)值中， random 方法會調(diào)用發(fā)布方法（setState）觸發(fā)更新，因?yàn)?nbsp;useSyncExternalStore 會使用第一個參數(shù)完成訂閱動作，所以此時它能接收到數(shù)據(jù)更新，隨后便返回最新的狀態(tài)值，并觸發(fā)重新渲染。
在線代碼示例：https://stackblitz.com/edit/react-9nvjhwhx?file=demo.tsx
至此我們實(shí)現(xiàn)了一個簡單版本 Zustand。
3.3. 小結(jié)
發(fā)布訂閱模式的優(yōu)點(diǎn)非常明顯，一為時間上的解耦，二為對象之間的解耦，但如果過度使用的話，對象和對象之間的必要聯(lián)系也將被深埋在背后，會導(dǎo)致程序難以跟蹤維護(hù)和理解。
3. 總結(jié)
設(shè)計(jì)模式大體思想是要把系統(tǒng)中不變和變化的部分分開，封裝不變的部分，根據(jù)業(yè)務(wù)靈活替換變化的部分，這樣就可以保證系統(tǒng)的健壯性和可拓展性。同時在實(shí)現(xiàn)設(shè)計(jì)模式的同時，你通常也會很好的遵守了設(shè)計(jì)模式原則，如單一職責(zé)、依賴倒置、開閉原則、迪米特原則等。
