使用Proxy实现观察者模式

es6的Proxy可以看做是在目标对象之前架设一层拦截,每次对目标对象进行操作的时候,都要经过这层拦截。常见的一般是用来拦截setget。目标对象通过setget来进行赋值和获取值,所以,在这之前,通过使用Proxy可以实现对信息的过滤或者修改等等操作。

所谓观察者模式,在之前的文章中(JavaScript自定义事件)也提到过,这里就不在赘述。

主要是通过拦截setdeleteProperty,在每次赋值和delete属性的时候,触发所有观察者事件。

const queuedObservers = new Set()
const observe = fn => queuedObservers.add(fn)
const observable = obj => (
    new Proxy(obj, {
        //拦截set,obj每次赋值都触发所有观察者事件
        set(target, name, value, receiver) {
            //确保正常赋值
            const result = Reflect.set(target, name, value, receiver)
            queuedObservers.forEach(observer => observer())
            return result
        },
        deleteProperty(target, property) {
            Reflect.deleteProperty(target, property)
            queuedObservers.forEach(observer => observer())
        }
    })
)

const person = observable({
    name: 'Jason',
    age: 10
})

const print = function () {
    console.log(`打印信息:${JSON.stringify(person)}`);
}

//添加print订阅
observe(print)

person.id = 1 //打印信息:{"name":"Jason","age":10,"id":1}
delete person.id //打印信息:{"name":"Jason","age":10}
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注