<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;
        }
    });
}