快捷導(dǎo)航

JavaScript中三種觀察者實現(xiàn)案例分享

更新時間：2023年08月08日 08:39:40 作者：剪刀石頭布啊

前面突然看到 Object.defineProperty,就順道想到 Proxy,然后就想到了觀察者案例,這邊還沒有用 javascript編寫一個觀察者的案例呢,順道加入了一個 event-bus 監(jiān)聽事件案例,湊一起看一看不同的實現(xiàn)方式,需要的朋友可以參考下

event-bus

event-bus最基礎(chǔ)的事件監(jiān)聽，算是一個通知類型的，可以設(shè)置成一個單例全局使用，也可以用在局部

通過名字訂閱監(jiān)聽，通過名字發(fā)布新消息，使用也比較簡單

export default class EventBus {
    events: Record<string, Array<Function>> = {}
    //訂閱
    subscribe(name: string, callback: Function) {
        if (!this.events[name]) {
            this.events[name] = []
        }
        this.events[name].push(callback)
    }
    //發(fā)布 -- data是往call中傳遞參數(shù)以便于使用的
    publish(name: string, data?: any) {
        let event = this.events[name]
        if (event) {
            event.forEach(callback => callback(data))
        }
    }
    //取消訂閱,y
    unsubscribe(name: string, callback?: Function) {
        let event = this.events[name]
        if (!callback) {
            this.events[name] = []
        }else if (event) {
            this.events[name] = event.filter(e => e !== callback)
        }
    }
}

測試案例

const event = new EventBus()
const subscribe = () => {
    event.subscribe('name', (value: any) => {
        console.log(value)
    })
    console.log('已訂閱')
}
const publish = () => {
    let content = "我發(fā)布消息了，內(nèi)容是\"哈啊哈哈\""
    event.publish('name', content)
}
const unsubscribe = () => {
    event.unsubscribe('name')
    console.log('取消訂閱了')
}

自動銷毀觀察者（event-bus版）

這里根據(jù) event-bus 改變，參考 UI組件生命周期 變化，實現(xiàn)UI組件銷毀時自動釋放的監(jiān)聽訂閱案例，實際也就多了一個上下文，方便統(tǒng)一銷毀罷了

///------自動釋放組件----
//假設(shè)組件釋放調(diào)用方法為onDestory
const __ComponentDestoryName = 'onDestory'
class EventObj {
    key: string
    fn: Function[] = []
    constructor(key: string, fn: Function) {
        this.key = key
        this.fn.push(fn)
    }
}
class ContextEventObj<T = EventObj> {
    context: any
    events: T[] = []
    constructor(context: any, event: T) {
        this.context = context
        this.events.push(event)
    }
    //假設(shè)組件釋放調(diào)用方法為destory
    registerDestory(callback: Function) {
        let desFunc = this.context[__ComponentDestoryName]
        this.context[__ComponentDestoryName] = function() {
            callback()
            desFunc()
        }
    }
}
//根據(jù)上下文context自動釋放版本（
class EventBusByAutoRelease {
    events: ContextEventObj[] = []
    //訂閱，context為所屬上下文，當(dāng)上下文對象銷毀時，響應(yīng)監(jiān)聽隨機銷毀
    subscribe(name: string, callback: Function, context: any = null) {
        let contextObj = this.events.find(e => e.context === context)
        if (contextObj) {
            let event = contextObj.events.find(e => e.key === name)
            event?.fn.push(callback)
        }else {
            let event = new EventObj(name, callback)
            contextObj = new ContextEventObj(context, event)
            contextObj.registerDestory(() => {
                this.events = this.events.filter(e => e.context !== context)
            })
            this.events.push(contextObj)
        }
    }
    //發(fā)布 -- data是往call中傳遞參數(shù)以便于使用的
    publish(name: string, data?: any) {
        this.events.forEach(item => 
            item.events.forEach(e =>  
                e.key === name && 
                e.fn.forEach(fn => fn(data))
            )
        )
    }
    //取消訂閱
    unsubscribe(context?: any, name?: string) {
        if (context) {
            let ctx = this.events.find(e => e.context === context)
            if (!ctx) return
            if (name) {
                ctx.events = ctx.events.filter(e => e.key !== name)
            }else {
                this.events = this.events.filter(e => e.context !== context)
            }
        }else {
            this.events.length = 0
        }
    }
}

observer

這個觀察者模式是通過Object.defineProperty方法，沖定義指定對象的 set、get 方法以實現(xiàn)自動監(jiān)聽的效果，實現(xiàn)方法參考了一些以前看過的其他平臺的部分實現(xiàn)案例(實際上實現(xiàn)可以更簡潔)

ps：自己也可以嘗試寫一個更好用的哈，這一主要是應(yīng)用 Object.defineProperty

const symbol_observe = '__obs_map'
const canObserve = (obj: any) => obj !== null && typeof obj === 'object'
class ObserveObj {
    target: any
    key: string
    fn: Function[] = []
    val: any
    constructor(target: any, key: string, fn: Function, val: any) {
        this.target = target
        this.key = key
        this.fn.push(fn)
        this.val = val
        this.defineProperty()
    }
    defineProperty() {
        let that = this
        Object.defineProperty(that.target, that.key, {
            get() {
                return that.val
            },
            set(newVal) {
                that.notify(newVal)
            },
            enumerable: true, // 可枚舉
        })
    }
    notify(val: any) {
        this.val = val
        this.fn.forEach(e => e(val))
    }
    removeObserver() {
        delete this.target[this.key]
        this.target = null
    }
}
class TargetObs {
    target: any
    observes: Array<Record<'key' | 'fn', string | Function>> = []
    constructor(target: any) {
        this.target = target
    }
}
export default class Observer {
    targets: TargetObs[] = [] //用于保存target和callback信息，以便于后續(xù)清理
    observe(target: any, key: string, callback: Function) {
        if (!canObserve(target)) return
        let targetObs = this.targets.find(e => e.target === target)
        if (!targetObs) {
            targetObs = new TargetObs(target)
            targetObs.observes.push({
                key,
                fn: callback
            })
            this.targets.push(targetObs)
        }
        if (!target[symbol_observe]) {
            target[symbol_observe] = new Map<string, ObserveObj>()
        }
        let observeMap: Map<string, ObserveObj> = target[symbol_observe]
        let observeObj = observeMap.get(key)
        if (observeObj) {
            observeObj.fn.push(callback)
        }else {
            observeObj = new ObserveObj(target, key, callback, target[key])
            observeMap.set(key, observeObj)
        }
    }
    //清理某個target部分監(jiān)聽
    unobserve(target: any, key: string, callback?: Function) {
        if (!canObserve(target)) return
        let observeMap: Map<string, ObserveObj> = target[symbol_observe]
        if (!observeMap) return
        let obj = observeMap.get(key)
        if (!obj) return
        let targetObs = this.targets.find(e => e.target = target)
        if (callback) {
            if (targetObs) {
                targetObs.observes = targetObs.observes.filter(e => e.fn !== callback)
            }
            obj.fn = obj.fn.filter(e => e !== callback)
        }else {
            let fns
            if (targetObs) {
                fns = targetObs.observes.filter(e => e.key === key)
            }
            fns?.forEach(item => {
                obj!.fn = obj!.fn.filter(e => e !== item.fn)
            })
        }
        if (obj.fn.length < 1) {
            obj.removeObserver()
            observeMap.delete(key)
        }
    }
    //清理本觀察者添加的指定監(jiān)聽
    unobserveTarget(target: any) {
        if (!canObserve(target)) return
        let observeMap: Map<string, ObserveObj> = target[symbol_observe]
        if (!observeMap) return
        let targetObs = this.targets.find(e => e.target = target)
        for (let key in observeMap) {
            let fns
            if (targetObs) {
                fns = targetObs.observes.filter(e => e.key === key)
            }
            let obj = observeMap.get(key)
            if (!obj) continue
            fns?.forEach(item => {
                obj!.fn = obj!.fn.filter(e => e !== item.fn)
            })
            if (obj.fn.length < 1) {
                obj.removeObserver()
                observeMap.delete(key)
            }
        }
    }  
    //清理本觀察者添加的指定監(jiān)聽
    unobserveAll(target?: any) {
        if (target) {
            this.unobserveTarget(target)
        }else {
            this.targets.forEach(e => {
                this.unobserveTarget(e.target)
            })
            this.targets.length = 0
        }
    }
}

測試案例

const event = new Observer()
const subscribe = () => {
    event.observe(dataModel, 'name', (value: any) => {
        console.log(value)
    })
    console.log('已訂閱')
}
const publish = () => {
    let content = "我更改內(nèi)容了，內(nèi)容是\"哈啊哈哈\""
    dataModel.name = content
}
const unsubscribe = () => {
    event.unobserve(dataModel, 'name')
    console.log('取消觀察了')
}

observer-proxy

本觀察案例通過 Proxy 代理實現(xiàn)的，使用了里面的 Proxy.revocable Proxy基礎(chǔ)參考文檔，可以取消監(jiān)聽

唯一缺陷更改方法需要使用新的 Proxy 對象來代替之前的，否則無法實現(xiàn)監(jiān)聽功能，實際使用不是很友好，這里面已經(jīng)盡量讓其更加又友好了??

ps：實際上 proxy 用在其他特殊場景才能發(fā)揮出其巨大的優(yōu)勢，這里面也是寫出一種實現(xiàn)方案罷了，有更好的可以討論哈

class ObserveObj {
    observer: string
    key: string
    fn: Function[] = []
    constructor(key: string, observer: any, fn: Function) {
        this.key = key
        this.observer = observer
        this.fn.push(fn)
    }
}
export default class ObserverProxy<T extends Object> {
    target: any //用于回退原來對象  ori = proxy.target
    o: T
    rk: Function //用于取消代理
    //存放回調(diào)的數(shù)組，一個對象的監(jiān)聽一般不會過多(例如成百上千)，因為他存在性能可以考慮調(diào)整
    observers: ObserveObj[] = []
    //如果根據(jù)observer自動釋放，可以重寫observer的銷毀屬性，在哪里自動釋放即可，由于很多組件的銷毀方法不一樣就不實現(xiàn)了
    constructor(target: T) {
        this.target = target
        let that = this
        const {proxy, revoke} = Proxy.revocable(target, {
            //注意里面的 this 都會指向 target
            get: function (target, propKey, receiver) {
                return Reflect.get(target, propKey, receiver);
            },
            //這里攔截set方法即可
            set: function (target: any, propKey: string, value: any, receiver: any) {
                let observers = that.observers.filter(e => e.key === propKey)
                observers.forEach(e => e.fn.forEach(fn => fn(value)))
                //調(diào)動原來的set方法賦值
                return Reflect.set(target, propKey, value, receiver);
            },
        })
        this.o = proxy
        this.rk = revoke
    }
    revoke() {
        this.rk()
        this.removeObserve()
        let target = this.target
        this.target = null
        return target
    }
    //callback回調(diào)，context觀察者(參與觀察的對象，即回調(diào)所在的類)，responseByFirst初次是否響應(yīng)回調(diào)
    addObserve(key: string, callback: Function, observer: any, responseByFirst = false) {
        let observerObj = this.observers.find(
            e => e.observer === observer && e.key === key
        )
        if (!observerObj) {
            observerObj = new ObserveObj(key, observer, callback)
            this.observers.push(observerObj)
        }else {
            observerObj.fn.push(callback)
        }
        responseByFirst && callback(this.target[key])
    }
    removeObserve(observer?: any, key?: string) {
        if (observer) {
            if (key) {
                this.observers = this.observers.filter(e => e.observer !== observer || e.key !== key)
            }else {
                this.observers = this.observers.filter(e => e.observer !== observer)
            }
        }else {
            this.observers.length = 0
        }
    }
}

測試案例

const dataModel = new ObserverProxy(new DataModel())
const subscribe = () => {
    dataModel.addObserve('name', (value: any) => {
        console.log(value)
    }, this)
    console.log('已訂閱')
}
const publish = () => {
    let content = "我更改內(nèi)容了，內(nèi)容是\"哈啊哈哈\""
    //由于要用代理修改，使用.ob代替原對象即可
    dataModel.o.name = content
}
const unsubscribe = () => {
    //撤銷監(jiān)聽后，返回原對象，注意原對象沒有監(jiān)聽
    let res = dataModel.revoke()
    console.log('取消觀察了')
}