百度前端学院学习：动态数据绑定（三）

codeGoogle 发布于2019-08-20 14:42 / 1339人阅读

摘要：实现深层次数据变化如何逐层往上传播学习过的同学都知道，给一个元素绑定一个事件，这个元素的子元素触发这个事件，也会同样会触发它的所有父元素同样的事件。

题目地址
源代码地址

处理上个任务的问题

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

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
  }

  ...
}

GPU云服务器云服务器前端学院 js动态绑定数据机器学习学院 js动态绑定数据可以用吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81844.html

百度前端学院学习：动态数据绑定（四）

摘要：模板的语法解析匹配实际数据替换模板拆分成两个主要是为了解决深对象的问题，目前看过别的通过都是通过并不是一个很好的方法。最后修改一下和函数题目地址源代码地址任务分析这个任务主要是通过解析模板，替换中间出现的属性，例子：姓名：{{user.name}} 年龄：{{user.age}} 替换后：姓名：youngwind 年龄：25 实现 el...

Gilbertat 2019-08-20 14:50 评论0 收藏0
百度前端学院学习：动态数据绑定（二）

摘要：在中添加一个用来存储回调函数的变量实现和函数存储的回调函数做法我是用一个对象去处理的，为属性名，则是回调函数。题目地址源代码地址处理深度对象题目有个要求是如果传入的对象是比较深的对象，也就是 value 可以能是另外一个新的对象，也是要给那个对象的属性加上 getter 和 setter 的，我的做法就是判断每一个值是否是对象，然后在做一次递归处理。 each(obj) { ...

changfeng1050 2019-08-20 14:39 评论0 收藏0
百度前端技术学院2017学习总结

摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。一、前言百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

pkwenda 2019-08-29 12:35 评论0 收藏0
百度前端技术学院2017学习总结

摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。一、前言百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

ky0ncheng 2019-08-20 16:28 评论0 收藏0
百度前端技术学院2017学习总结

摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。一、前言百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

Jingbin_ 2019-08-01 16:49 评论0 收藏0