如何实现一个简单的mobx?

这是我的代码:

/** 依赖管理 */
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;
阅读 850
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题