mobx 状态管理器文章来源地址https://www.toymoban.com/news/detail-517861.html
- 订阅者:
管理
变化后回调的函数列表
- 观察者:将传入的
数据监听
起来,并且在有变化时
,执行
订阅者管理的函数列表
// 订阅者的函数列表,set结构,内部是 function
const list: Set<Function> = new Set()
// 订阅者,管理函数列表
const autoRun = (fn: Function) => {
if (!list.has(fn)) {
list.add(fn)
}
}
// 观察者
const observable = <T extends object> (params: T) => {
return new Proxy(params, {
set (target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver)
// 可以自定义一些内容
// 这里需要执行订阅者的回调函数,即 list 中所有函数
list.forEach(fn => fn())
return result
}
})
}
// 通过观察者创建数据
const proxyObservable = observable({
name: '笑笑',
attr: '真好看哈哈哈'
})
console.log('-----', proxyObservable.attr)
// 订阅者中新增一个函数
autoRun(() => {
console.log('有变化了哈哈哈')
})
// 更新数据
proxyObservable.attr = '今天又好看了一点' // 有变化了哈哈哈
proxyObservable.name = 'blue' // 有变化了哈哈哈
文章来源:https://www.toymoban.com/news/detail-517861.html
到了这里,关于ts:简单实现 mobx 的观察者模式 observable的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!