mobx 狀態(tài)管理器文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-517861.html
- 訂閱者：
管理變化后回調(diào)的函數(shù)列表 - 觀察者：將傳入的
數(shù)據(jù)監(jiān)聽(tīng)起來(lái)，并且在有變化時(shí)，執(zhí)行訂閱者管理的函數(shù)列表
// 訂閱者的函數(shù)列表，set結(jié)構(gòu)，內(nèi)部是 function
const list: Set<Function> = new Set()
// 訂閱者,管理函數(shù)列表
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)
// 可以自定義一些內(nèi)容
// 這里需要執(zhí)行訂閱者的回調(diào)函數(shù)，即 list 中所有函數(shù)
list.forEach(fn => fn())
return result
}
})
}
// 通過(guò)觀察者創(chuàng)建數(shù)據(jù)
const proxyObservable = observable({
name: '笑笑',
attr: '真好看哈哈哈'
})
console.log('-----', proxyObservable.attr)
// 訂閱者中新增一個(gè)函數(shù)
autoRun(() => {
console.log('有變化了哈哈哈')
})
// 更新數(shù)據(jù)
proxyObservable.attr = '今天又好看了一點(diǎn)' // 有變化了哈哈哈
proxyObservable.name = 'blue' // 有變化了哈哈哈
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-517861.html
到了這里，關(guān)于ts：簡(jiǎn)單實(shí)現(xiàn) mobx 的觀察者模式 observable的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
