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

changfeng1050 发布于2019-08-20 14:39 / 2029人阅读

摘要：在中添加一个用来存储回调函数的变量实现和函数存储的回调函数做法我是用一个对象去处理的，为属性名，则是回调函数。

题目地址
源代码地址

处理深度对象

题目有个要求是如果传入的对象是比较深的对象，也就是 value 可以能是另外一个新的对象，也是要给那个对象的属性加上 getter 和 setter 的，我的做法就是判断每一个值是否是对象，然后在做一次递归处理。

each(obj) {
  Object.keys(obj).forEach(key => {
    // 如果值是一个对象的话
    if (Object.prototype.toString.call(obj[key]) === "[object Object]") {
      // 递归自身
      this.each(obj[key])
    } else {
      this.convert(key, obj[key])
    }
  })
}

这里用了Object.prototype.toString.call()来判断值是什么类型，因为使用typeof的话，object、array 和 null 都会返回 object，不是我想要的结果。

实现 $watch

题目还有另外一个要求就是实现$watch的功能，用过 Vue 的同学都知道，我们可以用这个函数去监听一个值的变化，并且传入一个回调函数，如果值发生变话的话，就执行回调函数。

在constructor中添加一个用来存储回调函数的变量：

...
this.watchProperties = {}
...

实现$watch和emit函数：

存储 watch 的回调函数做法我是用一个对象去处理的，key 为属性名，value 则是回调函数。

$watch(name, fn) {
  this.watchProperties[name] = fn
}

emit(name, val) {
  if (this.watchProperties[name] && typeof this.watchProperties[name] === "function") {
    this.watchProperties[name](val)
  }
}

在convert中添加：

convert(key, value) {
    ...
    Object.defineProperty(this.setData || this.data, key, {
      ...
      set: function (newValue) {
        ...
        // 调用 emit 执行 watchProperties 里的回调函数
        // key 为属性名
        // newValue 为新设置的值
        that.emit(key, newValue)
        ...
      }
    })
  }

最后一步，暴露$watch方法：

constructor(json) {
    ...
    return {
      ...
      // 这里要注意，修改一下上下文的环境
      $watch: this.$watch.bind(this)
    }
  }

这里需要使用bind去修改执行的时候上下的环境，否则无法访问watchProperties。

还没完成的功能

$watch函数不能够监听比较深的对象的属性。

新建一个示例的时候，如果传入一个深对象，会被打平：

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

console.log(app.data)
// 会输出
/*
  [object Object] {
    a: 1,
    b: 2
  }
*/

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

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

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

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

摘要：实现深层次数据变化如何逐层往上传播学习过的同学都知道，给一个元素绑定一个事件，这个元素的子元素触发这个事件，也会同样会触发它的所有父元素同样的事件。题目地址源代码地址处理上个任务的问题上个任务抛出了两个问题，一个是在初始化一个实例的时候如果传一个比较深的对象会被打平。把each和convert做出了一些修改： each()： each(obj, parents = []) { ...

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

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

Gilbertat 2019-08-20 14:50 评论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