🐸 js数据监听升级版的实现

在上一篇文章里，我们已经实现了对object值得监听，但是却有一个很严重得问题，就是如果我们给他添加一个新的key，新的key却没有被监听，加下来的这篇我们就来解决下这个问题。

大家有没有注意到第一篇文章里的WatchObject函数，每次如果值是object对象，都会调用此方法来给遍历子值

在WatchObject函数的内部，我们初始化了一个对象，我们就可以给WatchObject添加一个prorotype方法，来进行添加新值得操作。

const WatchObject = (data, path, event) => {
    function WatchObject(){
        for(var key in data){
            //调用原型链上的set来实现数据监听
            this.set(key, data[key])
        }
    }
    //为object添加一个set方法
    WatchObject.prototype.set =  function(key,val){
        //调用之前创建的函数，格式化val
        data[key] = createNewWatch(val, path, key, event)
        //创建对数据key的监听
        defineProperty(this, key, data[key], path.concat(key), event)
    }
    return new WatchObject()
}

然后我们测试一下代码

const b = WatchObject(data,[],{ 
        set(path,val){ 
            console.log(path,val) 
        } 
})
//调用set添加一个key和value
b.set("ss",22)
//然后我们修改添加得这个key
b.ss = 33;
//这时候你会发现，WatchObject里传入的set也调用了，这说明也被监听到了

如果我们监听的是数组，那么set方法显然不够有好了，而数组的pust，unshift等根本就无法监听数据的变化，因此我们就需要重写数组的那些方法了

接下来我们创建一个数组对象，来实现方法的重写

const WatchArray = (data, path, event) => {
    function WatchArray(){
        data.forEach(v => this.push(v))
    }
    //让函数拥有array的方法
    WatchArray.prototype = []
    //将函数的constructor指向Array
    WatchArray.prototype.constructor = Array;
    //重写函数的push方法
    WatchArray.prototype.push = function(val){
        //读取当前得到长度
        const key = this.length
        //调用之前创建的函数，格式化val
        val = createNewWatch(val, path, key, event)
        //将值添加进数组中
        Array.prototype.push.call(this,val)
        //创建对数据key的监听
        defineProperty(this, key, val, path.concat(key), event)
    }
    return WatchArray();
}

这个数组对象暂时实现了push方法，让我们将其加入到之前写的val格式化的函数中去

const createNewWatch = (val, path, parentKey, event) => {
    //如果值不是object类型，那么直接返回此值
    if(typeof val != 'object') return val;
    //反之如果是object类型，那么调用WatchObject，在进行子元素的遍历及监听
    //WatchObject会在下面的代码中进行创建
    if(val instanceof Array){
        //是个是数组的话就走刚才创建的数组对象
        return WatchArray(val,path.concat(parentKey), event)
    }
    return WatchObject(val,path.concat(parentKey), event)
}

让我们来进行一下测试

//调用push填充一个值看看
b.school.push('ddd')
//然后修改填充的下标
b.school[2]=44
//这时候你会发现，WatchObject里传入的set也调用了，这说明也被监听到了
//😊完美

然后捏，再添加一个unshift方法

//unshift和push类似
//都是先获取到现有数组的长度，然后格式化val值，调用Array的unshift将值添加进数组中
//不过需要注意的是，因为咱们咱们是在数组的首位添加了值，然后咱们监听时候就需要监听数组最后一个值的下标，并传入最后一个值的val
WatchArray.prototype.unshift = function(val){
    const key = this.length
    val = createNewWatch(val, path, key, event)
    Array.prototype.unshift.call(this,val)
    defineProperty(this, key, this[key], path.concat(key), event)
}

现在数组的push，unshift，的数组追加功能也都实现了，大家可以放到浏览器里试试了，

如果此时你进行for遍历就会发现，我们添加到prototype的方法也被遍历出来了，这肯定是不对的，这是我就需要在调用defineProperty在进行以下方法的处理

//添加进WatchObject的函数内
Object.defineProperty(WatchObject.prototype,'set',{ enumerable: false })
//添加进WatchArray的函数内
Object.defineProperty(WatchArray.prototype,'push',{ enumerable: false })
Object.defineProperty(WatchArray.prototype,'unshift',{ enumerable: false })
Object.defineProperty(WatchArray.prototype,'constructor',{ enumerable: false })

WatchArray也同样加到指定位置中

const WatchObject = (data, path, event) => {
    function WatchObject(){
        for(var key in data){
            this.set(key, data[key])
        }
    }
    WatchObject.prototype.set =  function(key,val){
        //调用之前创建的函数，格式化val
        data[key] = createNewWatch(val, path, key, event)
        //创建对数据key的监听
        defineProperty(this, key, data[key], path.concat(key), event)
    }
    Object.defineProperty(WatchObject.prototype,'set',{ enumerable: false })
    return new WatchObject()
}

发一个传送门，一个完整的dome--(˙<>˙)/--

然后大功告成

image.png