2022-11-02 10:02:22 +00:00
|
|
|
|
<!--
|
|
|
|
|
|
* @Author: Kane
|
|
|
|
|
|
* @Date: 2022-11-02 11:22:37
|
|
|
|
|
|
* @LastEditors: Kane
|
2022-11-15 09:56:34 +00:00
|
|
|
|
* @LastEditTime: 2022-11-07 16:45:06
|
2022-11-02 10:02:22 +00:00
|
|
|
|
* @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>
|
|
|
|
|
|
|
2022-11-15 09:56:34 +00:00
|
|
|
|
<body>
|
|
|
|
|
|
<div>a<div>b</div>c</div>
|
|
|
|
|
|
</body>
|
2022-11-02 10:02:22 +00:00
|
|
|
|
<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() { }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-11-03 09:53:04 +00:00
|
|
|
|
/**
|
2022-11-02 10:02:22 +00:00
|
|
|
|
* data 要添加响应式的对象
|
|
|
|
|
|
* key 要设置为响应式的属性
|
|
|
|
|
|
* val 属性的值
|
2022-11-03 09:53:04 +00:00
|
|
|
|
*/
|
2022-11-02 10:02:22 +00:00
|
|
|
|
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>
|
