car_deal_util/code/web/car_dealer/vue/keypath.html

102 lines
2.0 KiB
HTML
Raw Normal View History

2022-11-02 10:02:22 +00:00
<!--
* @Author: Kane
* @Date: 2022-11-02 11:22:37
* @LastEditors: Kane
2022-11-03 09:53:04 +00:00
* @LastEditTime: 2022-11-03 14:44:57
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>
<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() { }
}
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>