reactive

VaJoy · VaJoy · commit feea478bd07d · 2022-05-01T13:52:04.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dist-remote
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.txt
diff --git a/1-reactive/1/example.html b/1-reactive/1/example.html
@@ -0,0 +1,28 @@
+<body>
+  <div></div>
+  <p></p>
+</body>
+
+<script type="module">
+  import { setViewEffect, reactive } from './reactive.js';
+  const div = document.querySelector('div');
+  const p = document.querySelector('p');
+
+  const obj = reactive({
+    divMsg: 'div is waiting',
+    pMsg: 'p is waiting'
+  });
+
+  setViewEffect(() => {
+    div.innerText = obj.divMsg;
+  })
+
+  setViewEffect(() => {
+    p.innerText = obj.pMsg;
+  })
+  
+  setTimeout(() => {
+    obj.divMsg = 'divMsg changes';
+    obj.pMsg = 'pMsg changes';
+  }, 2000);
+</script>
diff --git a/1-reactive/1/reactive.js b/1-reactive/1/reactive.js
@@ -0,0 +1,65 @@
+const proxyMap = new WeakMap();
+const targetMap = new WeakMap();
+
+let viewEffect = () => { };
+
+export const setViewEffect = (fn) => {
+    viewEffect = fn;
+    fn();
+}
+
+export function reactive(target) {
+    const existingProxy = proxyMap.get(target);
+    if (existingProxy) {
+        // 已被代理过，直接返回缓存的代理对象
+        // 避免重复被代理
+        return existingProxy
+    }
+
+    const proxy = new Proxy(
+        target,
+        baseHandlers
+    );
+
+    proxyMap.set(target, proxy);
+    return proxy
+}
+
+const baseHandlers = {
+    get(target, key, receiver) {
+        const res = Reflect.get(target, key, receiver);
+        track(target, key);
+        return res;
+    },
+    set(target, key, value, receiver) {
+        const res = Reflect.set(target, key, value, receiver);
+        trigger(target, key, value);
+        return res;
+    }
+}
+
+// 追踪
+const track = (target, key) => {
+    let depsMap = targetMap.get(target)
+    if (!depsMap) {
+        targetMap.set(target, (depsMap = new Map()))
+    }
+    let dep = depsMap.get(key)
+    if (!dep) {
+        depsMap.set(key, (dep = new Set()));
+        dep.add(viewEffect);
+        console.log(`Key "${key}" is traced...`);
+    }
+}
+
+// 触发
+const trigger = (target, key, value) => {
+    const depsMap = targetMap.get(target);
+    if (!depsMap) {
+        // 未被追踪过
+        return
+    }
+    const viewEffects = depsMap.get(key);
+    console.log(`Trggering effects Functions of key "${key}"...`);
+    viewEffects.forEach(effectFn => effectFn());
+}
