百度前端学院学习:动态数据绑定(三)

_我已经从中二毕业了

题目地址
源代码地址

处理上个任务的问题

上个任务抛出了两个问题,一个是在初始化一个实例的时候如果传一个比较深的对象会被打平。把eachconvert做出了一些修改:

each()

each(obj, parents = []) {
  Object.keys(obj).forEach(key => {
    this.convert(key, obj[key], parents)
  })
}

convert()

convert(key, value, parents) {
  ...

  // 判断传入的 value 是否一个对象
  // 如果是一个对象的话,就在调用 each 函数
  if (Object.prototype.toString.call(value) === '[object Object]') {
    that.setData = value
    that.each(value, [...parents, key])
    that.setData = null
  }

  ...
}

上面代码多了一个parents,这个是用来实现这个任务的功能,也就是事件冒泡而用的。

实现深层次数据变化如何逐层往上传播

学习过 dom 的同学都知道,给一个元素绑定一个事件,这个元素的子元素触发这个事件,也会同样会触发它的所有父元素同样的事件。

上面用parents来存储比较深的对象,每个对象的父的 key 值,在 setter 函数里面同样做出一些修改:

...
Object.defineProperty(this.setData || this.data, key, {
  set: function (newValue) {
    ...

    // parents 存的是上一级 key
    // 循环 parents 实现逐层往上传播
    parents.forEach(item => {
      that.emit(item, that.data[item])
    })
    
    ...
  }
})
...

另外一个问题

实现了深层次数据变化如何逐层往上传播的功能后,发现一个问题。如果出事传入一个这样的对象:

let app = new Observer({
  name: {
    a: 1,
    b: {
      c: 2 
    }
  }
})

试着输出app.data的值发现:

{
  b: {
    c: 2
  },
  name: {
    a: 1,
    b: {
      c: 2 
    }
  }
}

因为我们在convert()函数里面实现深度对象处理有一些问题,只需要在添加一个判断就可以了:

convert(key, value, parents) {
  ...

  // parents 里有上级的 key 值,但是 setData 为 null 则直接跳出函数
  if (parents.length && !this.setData) {
    return
  }

  ...
}
阅读 1.8k

各种各样的学习笔记
不搞前端会死星人!

不搞前端会死星人。

7.9k 声望
235 粉丝
0 条评论

不搞前端会死星人。

7.9k 声望
235 粉丝
文章目录
宣传栏