javascript三种观察者实现

前言

前面突然看到 Object.defineProperty，就顺道想到 Proxy，然后就想到了观察者案例，这边还没有用 javascript编写一个观察者的案例呢，顺道加入了一个 event-bus 监听事件案例，凑一起看一看不同的实现方式(仅仅一个普通案例，还有更好的实现等着大家)

ps：这也是很多平台都在使用的东西(毕竟 MVVM 对于观察者、订阅模式可是依赖的很)，另外由于js没有析构函数，所以没写自动释放逻辑，也没好的办法，只能主动释放，如果有的话，欢迎讨论

event-bus

event-bus最基础的事件监听，算是一个通知类型的，可以设置成一个单例全局使用，也可以用在局部

通过名字订阅监听，通过名字发布新消息，使用也比较简单

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)
    }

    //发布 -- data是往call中传递参数以便于使用的
    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 = "我发布消息了，内容是\"哈啊哈哈\""
    event.publish('name', content)
}

const unsubscribe = () => {
    event.unsubscribe('name')
    console.log('取消订阅了')
}

自动销毁观察者（event-bus版）

这里根据 event-bus 改变，参考 UI组件生命周期 变化，实现UI组件销毁时自动释放的监听订阅案例，实际也就多了一个上下文，方便统一销毁罢了

///------自动释放组件----
//假设组件释放调用方法为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)
    }

    //假设组件释放调用方法为destory
    registerDestory(callback: Function) {
        let desFunc = this.context[__ComponentDestoryName]
        this.context[__ComponentDestoryName] = function() {
            callback()
            desFunc()
        }
    }
}

//根据上下文context自动释放版本（
class EventBusByAutoRelease {
    events: ContextEventObj[] = []

    //订阅，context为所属上下文，当上下文对象销毁时，响应监听随机销毁
    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)
        }
    }

    //发布 -- data是往call中传递参数以便于使用的
    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 方法以实现自动监听的效果，实现方法参考了一些以前看过的其他平台的部分实现案例(实际上实现可以更简洁)

ps：自己也可以尝试写一个更好用的哈，这一主要是应用 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信息，以便于后续清理

    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部分监听
    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)
        }
    }

    //清理本观察者添加的指定监听
    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)
            }
        }
    }  

    //清理本观察者添加的指定监听
    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 = "我更改内容了，内容是\"哈啊哈哈\""
    dataModel.name = content
}

const unsubscribe = () => {
    event.unobserve(dataModel, 'name')
    console.log('取消观察了')
}

observer-proxy

本观察案例通过 Proxy 代理实现的，使用了里面的 Proxy.revocable Proxy基础参考文档，可以取消监听

唯一缺陷更改方法需要使用新的 Proxy 对象来代替之前的，否则无法实现监听功能，实际使用不是很友好，这里面已经尽量让其更加又友好了😂

ps：实际上 proxy 用在其他特殊场景才能发挥出其巨大的优势，这里面也是写出一种实现方案罢了，有更好的可以讨论哈

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 //用于取消代理
    //存放回调的数组，一个对象的监听一般不会过多(例如成百上千)，因为他存在性能可以考虑调整
    observers: ObserveObj[] = []

    //如果根据observer自动释放，可以重写observer的销毁属性，在哪里自动释放即可，由于很多组件的销毁方法不一样就不实现了

    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)))
                //调动原来的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回调，context观察者(参与观察的对象，即回调所在的类)，responseByFirst初次是否响应回调
    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 = "我更改内容了，内容是\"哈啊哈哈\""
    //由于要用代理修改，使用.ob代替原对象即可
    dataModel.o.name = content
}

const unsubscribe = () => {
    //撤销监听后，返回原对象，注意原对象没有监听
    let res = dataModel.revoke()
    console.log('取消观察了')
}

最后

最后两个本来想实现自动释放，由于一些平台存在引用计数(不只是垃圾回收)，引用会存在内存泄露问题，

由于 js 对象没有析构函数，这里即使加上 WeakMap 也不行，因为它不可遍历，所以目前对于我来说实现自动释放的监听尚有困难(当然难不住大佬)，当然这也是后续要解决的难题，大家要是有策略可以探讨，大家一起提升😂