ES6 原生实现观察者模式

motioliang2018-12-25jsProxy js

使用 Proxy 实现观察者模式

观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。

const person = observable({
    name: '张三',
    age: 22
})

function print() {
    console.log('姓名：', person.name, '年龄：', person.age)
}

observe(print)
person.name = '李四'

上面代码中，数据person是观察目标，函数print是观察者，一旦对象发生变化，print就会自动执行。

下面，使用Proxy写一个观察者模式的最简单实现，即实现observable和observe这两个函数。思路是obervable函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的各个函数。

const queuedObservers = new Set()
const observe = fn => queuedObservers.add(fn)

const observable = obj => new Proxy(obj, { set })
function set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver)
    queuedObservers.forEach(observe => observe())
    return result
}

上面代码中，先定义了一个Set集合，所有的观察者函数都放进这个集合，然后，observable函数返回原始函数对象的代理，拦截赋值操作。拦截函数set之中，会自动执行所有的观察者。

页面导航

使用 Proxy 实现观察者模式