104 lines
2.0 KiB
HTML
104 lines
2.0 KiB
HTML
<!--
|
||
* @Author: Kane
|
||
* @Date: 2022-11-02 11:22:37
|
||
* @LastEditors: Kane
|
||
* @LastEditTime: 2022-11-07 16:45:06
|
||
* @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>
|
||
<div>a<div>b</div>c</div>
|
||
</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> |