如何使用 rxjs 5 观察对象变化

2024-02-23

我想监视一个对象,这样所有订阅者都会收到它的任何更改。

我看到已经是了之前问过 https://stackoverflow.com/questions/32683488/rxjs-observing-object-updates-and-changes, 但答案是无关紧要的,因为 RXjs 版本 5 不包括对象变化不再在它的 API 中了。

我研究了一些“黑客”,比如创建一个返回函数的观察者:

let myObservable =  new Observable((observer) => {
  return (data) => {
    observer.next(data)
  }
}) 
//...
myObservable.subscribe()('someData')

但是,我确信有更优雅的方法来做到这一点。 有任何想法吗?


ES6 观察对象的方式是Proxies https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Proxy。您创建一个包装原始对象的代理并对其进行工作。您可以使用它来创建类似的东西Observable.ofObjectChanges。这里是部分实现(仅set。你需要实现另一个traps https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Proxy#A_complete_traps_list_example):

Observable.ofProxyChanges = (target) => {
  let subject = new Subject
  let proxy = new Proxy(target, {
    set(target, key, val) {
      let oldValue = target[key]
      target[key] = val
      subject.next({
        type: oldValue === undefined ? "add" : "change",
        object: target,
        name: key,
        oldValue: oldValue
      })
    }
  })
  return [proxy, subject.asObservable()]
}

let [obj, objChange$] = Observable.ofProxyChanges({})
objChange$.subscribe(console.log)

obj.bar = 1 // logs { type: "add", name: "bar", object: { bar: 1 } }
obj.foo = 2 // logs { type: "add", name: "foo", object: { bar: 1, foo: 2 } }
obj.foo = 3 // logs { type: "change", name: "foo", object: { bar: 1, foo: 3 }, oldValue: 2 }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 rxjs 5 观察对象变化 的相关文章

随机推荐