<script type="module">

import { ObserverEvent } from "./ObserverEvent.js";

let obj = new ObserverEvent({
    name: '小米',
    age: 18
});

console.log(obj.value.name)
</script>

// 监听数据变化，让每个属性都可以被观测是否改变
export class ObserverEvent {
   constructor(value) {
       this.value = value;
       if(Array.isArray(value)) {
           // 数组逻辑
       } else {
           // 对象逻辑
           this.walk(value);
       }
   }

   walk(obj) {
       // {name: '小米', age: '18'}
       const keys = Object.keys(obj);
       for(let i = 0; i < keys.length; i++) {
           defineReactive(obj, keys[i]);
       }
   }
}

function defineReactive(obj,keys,val) {
   if(arguments.length === 2) {
       val = obj[keys];
   }

   if(typeof val === 'object') {
       new ObserverEvent(val);
   }
   Object.defineProperty(obj, keys, {
       enumerable: true, // 可枚举
       configurable: true, // 可改变
       get() {
           console.log(`${keys}被读取了`)
           return val;
       },
       set(newKey) {
           console.log(`${keys}被修改了，新值是${newKey}}`)
           val = newKey;
       }
   });
}