41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
// watch.js
|
||
|
||
const observe = (obj, key, watchFun, deep, page) => {
|
||
let oldVal = obj[key]
|
||
// 如果监听对象是object类型并且指定deep（深度监听）
|
||
if (oldVal !== null && typeof oldVal === 'object' && deep) {
|
||
// 递归子集，依次执行observe()
|
||
Object.keys(oldVal).forEach(item => {
|
||
observe(oldVal, item, watchFun, deep, page)
|
||
})
|
||
}
|
||
// 使用Object.defineProperty()劫持数据的写操作，在监听对象改变后执行传入的watchFun
|
||
Object.defineProperty(obj, key, {
|
||
configurable: true,
|
||
enumerable: true,
|
||
set(value) {
|
||
if (value === oldVal) return
|
||
watchFun.call(page, value, oldVal)
|
||
oldVal = value
|
||
},
|
||
get() {
|
||
return oldVal
|
||
}
|
||
})
|
||
}
|
||
|
||
export const setWatcher = (page) => {
|
||
// 页面里的data字段
|
||
const data = page.data
|
||
// 页面里的watch字段
|
||
const watch = page.watch
|
||
// 对watch里列举的每一个字段（需要监听的字段）执行observe()
|
||
Object.keys(watch).forEach(key => {
|
||
let targetData = data
|
||
const targetKey = key
|
||
// 支持deep深度监听，使用deep时需要配合handler使用，否则直接编写函数
|
||
const watchFun = watch[key].handler || watch[key]
|
||
const deep = watch[key].deep
|
||
observe(targetData, targetKey, watchFun, deep, page)
|
||
})
|
||
} |