这是我的代码:
/** 依赖管理 */
class DependenceManager {
static Dep = null; // 存放依赖
_store = {}; // 存放obid和依赖操作的映射关系
beginCollect(handler) {
DependenceManager.Dep = handler;
}
collect(obid) {
if (DependenceManager.Dep) {
this._store[obid] = this._store[obid] || [];
this._store[obid].push(DependenceManager.Dep);
}
}
endCollect() {
DependenceManager.Dep = null;
}
tigger(obid) {
if (this._store[obid]) {
this._store[obid].forEach((watcher) => {
watcher();
});
}
}
}
const dependencer = new DependenceManager();
let globalObId = 0;
/** 被观察者 */
class Observable {
/** 全局Observable唯一ID */
_obId = 0;
/** 被观察的值 */
_val = null;
constructor(val) {
this._obId = globalObId++;
this._val = val;
}
set(newVal) {
this._val = newVal;
// 在赋值的时候触发依赖
dependencer.tigger(this._obId);
}
get() {
// 在取值的时候收集依赖
dependencer.collect(this._obId);
return this._val;
}
}
function autorun(handler) {
dependencer.beginCollect(handler);
handler(); // 触发Observable的get,以便依赖收集
dependencer.endCollect();
}
function _createObservable(_target) {
if (typeof _target === "object") {
const _val = {};
const keys = Object.keys(_target);
for (let i of keys) {
const item = _createObservable(_target[i]);
_val[i] = item;
}
return new Proxy(new Observable(_val), {
get(target, name) {
console.log(name)
return target.get()[name];// ???
},
set(target, name, newVal) {
target.get()[name].set(newVal);// ???
return true;
},
});
}
return new Observable(_target);
}
function observable(_target) {
return _createObservable(_target);
}
在实现对象深度递归包装的时候不知道该怎么写了?求教大佬_createObservable
方法里该怎么写才能正确取值?
测试例子:
let test = observable({ a: 1, b: { c: 2, d: { e: 3 } } });
autorun(() => {
console.log("test2", test.b.d.e);// 打印Observable {} 这个值错误
});
test.b.d.e = 4;