feat: add 响应系统的作用与实现

cycleccc · cycleccc · commit c4c09efd2d40 · 2024-01-15T18:18:33.000+08:00
diff --git a/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/index.html b/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+</body>
+<script src="./响应式数据与副作用函数.js"></script>
+
+</html>
diff --git a/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/interfaces/reactive.interface.js b/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/interfaces/reactive.interface.js
@@ -0,0 +1 @@
+"use strict";
diff --git a/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/interfaces/reactive.interface.ts b/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/interfaces/reactive.interface.ts
@@ -0,0 +1,9 @@
+interface Options {
+    immediate?: boolean;
+    lazy?: boolean;
+    flush?: string;
+    scheduler?: (effectFn: EffectFn) => void;
+    // 其他可能的字段...
+}
+
+type EffectFn = (() => Object | Number | String | Boolean) & { options?: Options, deps: Set<EffectFn>[] }
diff --git a/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/响应式数据与副作用函数.js b/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/响应式数据与副作用函数.js
@@ -0,0 +1,241 @@
+"use strict";
+// 用一个全局变量存储当前激活的 effect 函数
+let activeEffect;
+// effect 栈
+const effectStack = []; // 新增
+function effect(fn, options) {
+    const effectFn = () => {
+        cleanup(effectFn);
+        // 当调用 effect 注册副作用函数时，将副作用函数赋值给 activeEffect
+        activeEffect = effectFn;
+        // 在调用副作用函数之前将当前副作用函数压栈
+        effectStack.push(effectFn);
+        // 将 fn 的执行结果存储到 res 中
+        const res = fn(); // 新增
+        // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并把 activeEffect 还原为之前的值
+        effectStack.pop();
+        activeEffect = effectStack[effectStack.length - 1];
+        return res;
+    };
+    // 将 options 挂载到 effectFn 上
+    effectFn.options = options; // 新增
+    // activeEffect.deps 用来存储所有与该副作用函数相关的依赖集合
+    effectFn.deps = [];
+    // 只有非lazy的时候，才执行
+    if (options && !options.lazy) {
+        // 执行副作用函数
+        effectFn();
+    }
+    return effectFn;
+}
+function cleanup(effectFn) {
+    // 遍历 effectFn.deps 数组
+    for (let i = 0; i < effectFn.deps.length; i++) {
+        // deps 是依赖集合
+        const deps = effectFn.deps[i];
+        // 将 effectFn 从依赖集合中移除
+        deps.delete(effectFn);
+    }
+    // 最后需要重置 effectFn.deps 数组
+    effectFn.deps.length = 0;
+}
+const bucket = new WeakMap();
+function track(target, key) {
+    // 没有 activeEffect，直接 return
+    if (!activeEffect)
+        return;
+    let depsMap = bucket.get(target);
+    if (!depsMap) {
+        bucket.set(target, (depsMap = new Map()));
+    }
+    let deps = depsMap.get(key);
+    if (!deps) {
+        depsMap.set(key, (deps = new Set()));
+    }
+    // 把当前激活的副作用函数添加到依赖集合 deps 中
+    deps.add(activeEffect);
+    // deps 就是一个与当前副作用函数存在联系的依赖集合
+    // 将其添加到 activeEffect.deps 数组中
+    activeEffect.deps.push(deps); // 新增
+}
+// 在 set 拦截函数内调用 trigger 函数触发变化
+function trigger(target, key, type) {
+    const depsMap = bucket.get(target);
+    if (!depsMap)
+        return;
+    const effects = depsMap.get(key);
+    const effectsToRun = new Set();
+    effects && effects.forEach((effectFn) => {
+        if (effectFn !== activeEffect) {
+            effectsToRun.add(effectFn);
+        }
+    });
+    effectsToRun.forEach((effectFn) => {
+        var _a;
+        // 如果一个副作用函数存在调度器，则调用该调度器，并将副作用函数作为参数传递
+        if ((_a = effectFn.options) === null || _a === void 0 ? void 0 : _a.scheduler) {
+            effectFn.options.scheduler(effectFn);
+        }
+        else {
+            // 否则直接执行副作用函数（之前的默认行为）
+            effectFn();
+        }
+    });
+    if (type === 'ADD') {
+        const iterateEffects = depsMap.get(ITERATE_KEY);
+        iterateEffects && iterateEffects.forEach((effectFn) => {
+            if (effectFn !== activeEffect) {
+                effectsToRun.add(effectFn);
+            }
+        });
+        effectsToRun.forEach((effectFn) => {
+            var _a;
+            if ((_a = effectFn === null || effectFn === void 0 ? void 0 : effectFn.options) === null || _a === void 0 ? void 0 : _a.scheduler) {
+                effectFn.options.scheduler(effectFn);
+            }
+            else {
+                effectFn();
+            }
+        });
+    }
+}
+function computed(getter) {
+    // value 用来缓存上一次计算的值
+    let value;
+    // dirty 标志，用来标识是否需要重新计算值
+    let dirty = true;
+    // 把 getter 作为副作用函数，创建一个 lazy 的 effect
+    const effectFn = effect(getter, {
+        lazy: true,
+        scheduler() {
+            if (!dirty) {
+                dirty = true;
+                // 当计算属性依赖的响应式数据变化时，手动调用 trigger 函数触发响应
+                trigger(obj, 'value');
+            }
+        }
+    });
+    const obj = {
+        get value() {
+            if (dirty) {
+                value = effectFn();
+                dirty = false;
+            }
+            track(obj, 'value');
+            return value;
+        }
+    };
+    return obj;
+}
+function traverse(value, seen = new Set()) {
+    // 如果要读取的数据是原始值，或者已经被读取过了，那么什么都不做
+    if (typeof value !== 'object' || value === null || seen.has(value))
+        return;
+    // 将数据添加到 seen 中，代表遍历地读取过了，避免循环引用引起的死循环
+    seen.add(value);
+    // 暂时不考虑数组等其他结构
+    // 假设 value 就是一个对象，使用 for...in 读取对象的每一个值，并递归地调用 traverse 进行处理
+    for (const k in value) {
+        traverse(value[k], seen);
+    }
+    return value;
+}
+function watch(source, cb, options) {
+    let getter;
+    if (typeof source === 'function') {
+        getter = source;
+    }
+    else {
+        getter = () => traverse(source);
+    }
+    let oldValue, newValue;
+    // cleanup 用来存储用户注册的过期回调
+    let cleanup;
+    // 定义 onInvalidate 函数
+    function onInvalidate(fn) {
+        // 将过期回调存储到 cleanup 中
+        cleanup = fn;
+    }
+    const job = () => {
+        newValue = effectFn();
+        // 在调用回调函数 cb 之前，先调用过期回调
+        if (cleanup) {
+            cleanup();
+        }
+        // 将 onInvalidate 作为回调函数的第三个参数，以便用户使用
+        cb(newValue, oldValue, onInvalidate);
+        oldValue = newValue;
+    };
+    const effectFn = effect(
+    // 执行 getter
+    () => getter(), {
+        lazy: true,
+        scheduler: () => {
+            if (options.flush === 'post') {
+                const p = Promise.resolve();
+                p.then(job);
+            }
+            else {
+                job();
+            }
+        }
+    });
+    if (options.immediate) {
+        job();
+    }
+    else {
+        oldValue = effectFn();
+    }
+}
+const obj = {
+    foo: 1,
+    get bar() {
+        // 现在这里的 this 为代理对象 p
+        return this.foo;
+    }
+};
+const ITERATE_KEY = Symbol();
+// 代理对象
+const p = new Proxy(obj, {
+    // 拦截读取操作，接收第三个参数 receiver
+    get(target, key, receiver) {
+        track(target, key);
+        // 使用 Reflect.get 返回读取到的属性值
+        return Reflect.get(target, key, receiver);
+    },
+    // 拦截设置操作
+    set(target, key, newVal, receiver) {
+        // 如果属性不存在，则说明是在添加新属性，否则是设置已有属性
+        const type = Object.prototype.hasOwnProperty.call(target, key) ? 'SET' : 'ADD';
+        // 设置属性值
+        const res = Reflect.set(target, key, newVal, receiver);
+        // 把副作用函数从桶里取出并执行
+        trigger(target, key, type);
+        return res;
+    },
+    // 拦截 in 操作
+    has(target, key) {
+        track(target, key);
+        return Reflect.has(target, key);
+    },
+    // 拦截 for...in 操作
+    ownKeys(target) {
+        // 使用ITERATE_KEY 代替 key，forin迭代操作针对对象，使用symbol作为唯一标识
+        track(target, ITERATE_KEY);
+        return Reflect.ownKeys(target);
+    },
+    // 拦截 delete 操作
+    deleteProperty(target, key) {
+        // 删除属性
+        const res = Reflect.deleteProperty(target, key);
+        // 触发删除操作
+        trigger(target, key, 'DELETE');
+        return res;
+    },
+});
+effect(() => {
+    // obj 是原始数据，不是代理对象，这样的访问不能够建立响应联系
+    for (const key in p) {
+        console.log(key);
+    }
+});
diff --git a/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/响应式数据与副作用函数.ts b/第5章 响应系统的作用与实现 copy/5.1　理解Proxy 和 Reflect/响应式数据与副作用函数.ts
