检测js对象发生变化

时间 2019-11-12
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>

    <div>
        <p class="box"></p>
        <ul class="hobby"></ul>
    </div>

    <script>

        var box = document.querySelector('.box');
        var hobby = document.querySelector('.hobby')
        class Observer{
            constructor(data){
                this.data = data
                this.filterObj(data)
            }

            // 判断传入的参数的数据类型是否是一个对象
            static isObject(obj){
                if(Object.prototype.toString.call(obj) === '[object Object]'){
                    return true
                }else{
                    return false
                }
            }

            
            filterObj(data){
                // 若是不是对象则结束
                if(!Observer.isObject(data)){
                    return
                }
                for(const key in data){
                    // 过滤对象上面的属性
                    if(data.hasOwnProperty(key)){
                        const value = data[key]
                        // 若是data的属性值为对象
                        if(Observer.isObject(data[key])){
                            new Observer(data[key])
                        }
                        this.watch(key,value)
                    }
                }
            }

            watch(k,v){
                Object.defineProperty(this.data,k,{
                    enumerable:true,
                    configurable:true,
                    get:function(){
                        console.log(`${k}`, ' -- 被访问')
                        return v
                    },
                    set:function(newval){
                        console.log(`${k}`,'-- 发生变化')
                        console.log('新值为 ： ',JSON.stringify(newval))
                        // 当值发生改变时候修改页面元素中的内容
                        box.innerHTML = newval
                        // 先清空元素中的内容
                        hobby.innerHTML=''
                        createLi(newval)
                        // 是不是一个对象
                        if(Observer.isObject(newval)){
                            new Observer(newval)
                        }
                        v = newval
                    }
                })
            }
        }
    
        let obj = {
            num:2048,
            hobby:['唱歌','睡觉','打豆豆'],
            equipment:{
                arms:'kuku',
                armgurd:'lobg'
            }
        }
        
        box.innerHTML = obj.num;
        hobby.innerHTML = ''
        function createLi (arr){
            for(let i in arr){
                hobby.innerHTML += `<li>${arr[i]}</li>`
            }
        }
        createLi(obj.hobby)
        let ss = new Observer(obj)
        console.log(ss);
        
        
       
    </script>
    
</body>
</html>