html
<!--
* @Autor: CQJ
* @Date: 2022-05-23 14:59:59
* @LastEditors: CQJ
* @LastEditTime: 2022-05-23 15:09:49
* @Description:
-->
<!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>Document</title>
</head>
<body>
<!-- 要引入一个类的话 script需要声明引入的文件类型为module -->
<script type="module">
import { Observer } from './observer.js';
let obj = new Observer({
name: 'cqj',
age: 18,
demo: {
a: '111',
b: 2
},
arr:[1,2,3,4,5]
});
console.log(obj.value.demo.a);
obj.value.demo.b = 23456
obj.value.arr.push(12)
console.log(obj.value.arr)
</script>
</body>
</html>
observer
export class Observer {
constructor(value) {
this.value = value;
if (Array.isArray(value)) {
this.observeArray(value);
} else {
this.walk(value);
}
}
walk(obj) {
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]);
}
}
observeArray(items) {
console.log("items: ", items);
for (let i = 0; i < items.length; i++) {
observe(items[i]);
}
}
}
function observe(value) {
if (!value || typeof value !== "object") {
return;
}
return new Observer(value);
}
function defineReactive(obj, key, val) {
if (arguments.length === 2) {
val = obj[key];
}
if (typeof val === "object") {
new Observer(val);
}
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
console.log(`你访问了${key}`);
return val;
},
set(newVal) {
console.log(`你设置了${key},新值为${newVal}`);
newVal === val;
},
});
}