【ife】动态数据绑定（三）自己的实现

fuyi501 发布于2019-08-20 14:41 / 3103人阅读

摘要：实现方式在动态数据绑定二中需要实现一个事件系统，我的实现是在原型链上建立一个属性保存所有需要绑定的事件名称和触发函数如下事件系统应该是能监听所有的实例化对象绑定的函数，在判断改写和深度当中都会创建一个新的实例化对象，如果写到上就无法通用了。

题目

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

let app2 = new Observer({
    name: {
        firstName: "shaofeng",
        lastName: "liang"
    },
    age: 25
});

app2.$watch("name", function (newName) {
    console.log("我的姓名发生了变化，可能是姓氏变了，也可能是名字变了。")
});

app2.data.name.firstName = "hahaha";
// 输出：我的姓名发生了变化，可能是姓氏变了，也可能是名字变了。
app2.data.name.lastName = "blablabla";
// 输出：我的姓名发生了变化，可能是姓氏变了，也可能是名字变了。

观察到了吗？firstName 和 lastName 作为 name 的属性，其中任意一个发生变化，都会得出以下结论："name 发生了变化。"这种机制符合”事件传播“机制，方向是从底层往上逐层传播到顶层。

这现象想必你们也见过，比如：“点击某一个DOM元素，相当于也其父元素和其所有祖先元素。”（当然，你可以手动禁止事件传播）所以，这里的本质是："浏览器内部实现了一个事件传播的机制"，你有信心自己实现一个吗？

我的代码

function Observer(obj) {
  this.data = obj; // 对象挂载点
  this.$p = Array.prototype.slice.call(arguments,1)[0] || "data"; // 实现事件冒泡储存父级 名字
  this.transformAll(obj); // 对obj对象进行 遍历， 然后调用convat 进行defineProperty改写
}

Observer.prototype.transformAll = function(obj) {
  var keyarr = Object.keys(obj);
  for (var i=0,len=keyarr.length;i
题目链接、我的代码、浏览地址(打开控制台查看)。

实现方式
在动态数据绑定（二）中需要实现一个事件系统，我的实现是在原型链上建立一个content属性保存所有需要绑定的事件名称和触发函数.如下：
Observer.prototype.content = {}
事件系统应该是能监听所有的实例化对象绑定的函数，在判断改写和深度convat当中都会创建一个新的实例化对象，如果写到this上就无法通用了。
还有一个痛点是如何知道父级对象的key值，好在函数里面对基本类型和对象类型的区分十分明了，只要在检测到是对象类型的哪一条路上多传入一个参数，传入当前的属性的key给下层，下层再利用这个key就好了。
想要得到冒泡，触发事件的时候就一定要携带上父级的key信息，我使用了
    new Observer(value,this.$p + "." + key); 
    set: function(newval){
      var allkey = $p+ "." + key;
      console.log("你设置了 "+ key + ", " + "新的值为 " + newval);
      self.emit(allkey, newval);  // 触发形式为 father.child    newval为传入信息
      if (newval instanceof Object ) {
        new Observer(newval, allkey);  // 如果改写为对象
      }
      val =  newval
    }
emit($p+ "." + key, newval),触发的时候就变成了data.name.firstName的形式，传入的$p一定是保存着所有上层的key值，接着再在emit函数内部解析一下 ，触发data、name、firstName即可。
有个问题，现在函数的执行顺序是由上到下了，明天写个setTimeout，刚好可以加深理解js的任务循环机制?
写的很乱，脖子和腰都在抗议了，抽空从第一个任务写起来，今天先合电脑睡觉??

GPU云服务器云服务器 webrtc实现自己的音频采集动态html的实现阿里云注册域名绑定自己的服务器阿里云买的域名绑定到自己服务器上

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

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

百度前端技术学院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
IFE JS练习(二|三) 数组的sort,forEach,slice和filter方法

摘要：返回表示保留该元素通过测试，则不保留。否则，的值在非严格模式下将是全局对象，严格模式下为。索引数组中正在处理的当前元素的索引。当执行回调函数时用作的值参考对象。是数组组所以要带，用转换为数值类型。代码块: var aqiData = [ [北京, 90], [上海, 50], [福州, 10], [广州, 50], [成都, 90], ...

Aomine 2019-08-20 15:30 评论0 收藏0
ife2018 零基础学院 day 4

摘要：类型选择器又名元素选择器类型选择器又名元素选择器在标准中，元素选择器又称为类型选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。第四天，背景边框列表链接和更复杂的选择器背景，边框，列表，链接相关属性背景 MDN 背景 W3School 背景元素的背景是指，在元素内容、内边距和边界下层的区域。属性描述 background-color 为背景设置...

shinezejian 2019-04-23 13:44 评论0 收藏0