JavaScript 如何实现一个响应式系统

JavaScript 如何实现一个响应式系统

第一阶段目标

1. 数据变化重新运行依赖数据的过程

第一阶段问题

1. 如何知道数据发生了变化
2. 如何知道哪些过程依赖了哪些数据

第一阶段问题的解决方案

1. 我们可用参考现有的响应式系统（vue）
   1. vue2 是通过 Object.defineProperty实现数据变化的监控，详细查看 Vue2官网。
   2. vue3 是通过Proxy实现数据变化的监控，详细查看 Vue3官网。
2. 本次示例使用Proxy实现数据监控,Proxy详细信息查看官网。
3. 根据解决方案，需要改变第一阶段目标为-> Proxy对象变化重新运行依赖数据的过程
4. 问题变更->如何知道Proxy发生了变化
5. 问题变更->如何知道哪些函数依赖了哪些Proxy

如何知道 Proxy 对象发生了变化，示例代码

//这里传入一个对象，返回一个Proxy对象，对Proxy对象的属性的读取和修改会触发内部的get，set方法
function relyOnCore(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  return new Proxy(obj, {
    get(target, key, receiver) {
      return target[key];
    },
    set(target, key, value, receiver) {
      //这里需要返回是否修改成功的Boolean值
      return Reflect.set(target, key, value);
    },
  });
}

数据监控初步完成，但是这里只监控了属性的读取和设置，还有很多操作没有监控，以及数据的 this 指向，我们需要完善它

//完善后的代码
export function relyOnCore(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  return new Proxy(obj, {
    get(target, key, receiver) {
      if (typeof target[key] === "object" && target[key] !== null) {
        //当读取的值是一个对象，需要重新代理这个对象
        return relyOnCore(target[key]);
      }
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      return Reflect.set(target, key, value, receiver);
    },
    ownKeys(target) {
      return Reflect.ownKeys(target);
    },
    getOwnPropertyDescriptor(target, key) {
      return Reflect.getOwnPropertyDescriptor(target, key);
    },
    has(target, p) {
      return Reflect.has(target, p);
    },
    deleteProperty(target, key) {
      return Reflect.deleteProperty(target, key);
    },
    defineProperty(target, key, attributes) {
      return Reflect.defineProperty(target, key, attributes);
    },
  });
}

如何知道哪些函数依赖了哪些 Proxy 对象

问题：依赖 Proxy 对象的函数要如何收集

在收集依赖 Proxy 对象的函数的时候出现了一个问题： 无法知道数据在什么环境使用的，拿不到对应的函数

解决方案

既然是因为无法知道函数的执行环境导致的无法找到对应函数，那么我们只需要给函数一个固定的运行环境就可以知道函数依赖了哪些数据。

示例

//定义一个变量
export let currentFn;

export function trackFn(fn) {
  return function FnTrackEnv() {
    currentFn = FnTrackEnv;
    fn();
    currentFn = null;
  };
}

自此，我们的函数调用期间 Proxy 对象监听到的数据读取在 currentFn 函数内部发生的。

同样，我们的目标从最开始的 数据变化重新运行依赖数据的过程 -> Proxy 对象变化重新运行依赖收集完成的函数

完善函数调用环境

直接给全局变量赋值，在函数嵌套调用的情况下，这个依赖收集会出现问题

let obj1 = relyOnCore({ a: 1, b: 2, c: { d: 3 } });
function fn1() {
  let a = obj1.a;
  function fn2() {
    let b = obj1.b;
  }
  //这里的c会无法收集依赖
  let c = obj1.c;
}

我们修改一下函数收集

export const FnStack = [];
export function trackFn(fn) {
  return function FnTrackEnv() {
    FnStack.push(FnTrackEnv);
    fn();
    FnStack.pop(FnTrackEnv);
  };
}

第二阶段目标

1. 在合适的时机触发合适的函数

第二阶段问题

1. 在什么时间触发函数
2. 到达触发时间时，应该触发什么函数

第一个问题：在什么时间触发函数

必然是在修改数据完成之后触发函数

第二个问题：应该触发什么函数

当操作会改变函数读取的信息的时候，需要重新运行函数。因此，我们需要建立一个映射关系

{
  //对象
  "obj": {
    //属性
    "key": {
      //对属性的操作
      "handle": ["fn"] //对应的函数
    }
  }
}

在数据改变的时候，我们只需要根据映射关系，循环运行 handle 内的函数

数据读取和函数建立联系

我们可以创建一个函数用于建立这种联系

export function track(object, handle, key, fn) {}

这个函数接收 4 个参数，object(对象),handle(对数据的操作类型) key(操作了对象的什么属性)，fn(需要关联的函数)

我们现在来创建映射关系

export const ObjMap = new WeakMap();
export const handleType = {
  GET: "GET",
  SET: "SET",
  Delete: "Delete",
  Define: "Define",
  Has: "Has",
  getOwnPropertyDescriptor: "getOwnPropertyDescriptor",
  ownKeys: "ownKeys",
};

export function track(object, handle, key, fn) {
  setObjMap(object, key, handle, fn);
}

function setObjMap(obj, key, handle, fn) {
  if (!ObjMap.has(obj)) {
    ObjMap.set(obj, new Map());
  }
  setKeyMap(obj, key, handle, fn);
}

const setKeyMap = (obj, key, handle, fn) => {
  let keyMap = ObjMap.get(obj);
  if (!keyMap.has(key)) {
    keyMap.set(key, new Map());
  }
  setHandle(obj, key, handle, fn);
};

const setHandle = (obj, key, handle, fn) => {
  let keyMap = ObjMap.get(obj);
  let handleMap = keyMap.get(key);
  if (!handleMap.has(handle)) {
    handleMap.set(handle, new Set());
  }
  setFn(obj, key, handle, fn);
};
const setFn = (obj, key, handle, fn) => {
  let keyMap = ObjMap.get(obj);
  let handleMap = keyMap.get(key);
  let fnSet = handleMap.get(handle);
  fnSet.add(fn);
};

现在已经实现了数据和函数之间的关联只需要在读取数据时调用这个方法去收集依赖就可以，代码如下：

export function relyOnCore(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, handleType.GET, key, FnStack[FnStack.length - 1]);
      if (typeof target[key] === "object" && target[key] !== null) {
        return relyOnCore(target[key]);
      }
      return Reflect.get(target, key, receiver);
    },
    //....这里省略剩余代码
  });
}

接下来我们需要建立数据改变->影响哪些数据的读取之间的关联

export const TriggerToTrackMap = new Map([
  [handleType.SET, [handleType.GET, handleType.getOwnPropertyDescriptor]],
  [
    handleType.Delete,
    [
      handleType.GET,
      handleType.ownKeys,
      handleType.Has,
      handleType.getOwnPropertyDescriptor,
    ],
  ],
  [handleType.Define, [handleType.ownKeys, handleType.Has]],
]);

建立这样关联后，我们只需要在数据变动的时候，根据映射关系去寻找需要重新运行的函数就可以实现响应式。

export function trigger(object, handle, key) {
  let keyMap = ObjMap.get(object);
  if (!keyMap) {
    return;
  }
  let handleMap = keyMap.get(key);
  if (!handleMap) {
    return;
  }
  let TriggerToTrack = TriggerToTrackMap.get(handle);
  let fnSet = new Set();
  TriggerToTrack.forEach((handle) => {
    let fnSetChiren = handleMap.get(handle);
    if (fnSetChiren) {
      fnSetChiren.forEach((fn) => {
        if (fn) {
          fnSet.add(fn);
        }
      });
    }
  });
  fnSet.forEach((fn) => {
    fn();
  });
}

总结

以上简易的实现了响应式系统，只是粗略的介绍了如何实现，会存在一些 bug