保存进度！

2022-11-02 18:02:22 +08:00
parent 3aa898fee8
commit 0c392ee354
2 changed files with 205 additions and 0 deletions
--- a/code/web/car_dealer/vue/keypath.html
+++ b/code/web/car_dealer/vue/keypath.html
@@ -0,0 +1,102 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-02 11:22:37
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-02 14:47:32
+ * @FilePath: \car_dealer\vue\keypath.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>keypath测试</title>
+</head>
+
+<body></body>
+<script>
+    const keypathReg = /[^\w.$]/;
+
+    let a = {
+        b: {
+            c: {
+                d: 100,
+            },
+        },
+    };
+
+    function parsePath(path) {
+        if (keypathReg.test(path)) {
+            return;
+        }
+
+        const segments = path.split(".");
+
+        return function (obj) {
+            console.log(segments);
+            for (let i = 0; i < segments.length; i++) {
+                // console.log(segments.length);
+
+                if (!obj) {
+                    //如果obj没有值，就返回
+                    return;
+                }
+
+                obj = obj[segments[i]];
+            }
+
+            return obj;
+        };
+    }
+
+    let obj = parsePath("b.c.d");
+
+    console.log(obj.call(a, a));
+</script>
+<script>
+    class Dep {
+        constructor() { }
+
+        depend() { }
+
+        notify() { }
+    }
+
+    /** 
+     * data 要添加响应式的对象
+     * key 要设置为响应式的属性
+     * val 属性的值
+    */
+    function defineReactive(data, key, val) {
+        if (typeof val === "Object ") {
+        }
+
+        let dep = new Dep();
+
+        Object.defineProperty(data, key, {
+            enumerable: true,
+            configurable: true,
+            get: function () {
+                dep.depend();
+
+                return val;
+            },
+            set: function (newVal) {
+                if (val === newVal) {
+                    return;
+                }
+
+                val = newVal;
+
+                dep.notify();
+            },
+        });
+    }
+</script>
+
+</html>