博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度前端技术学院---vue动态数据绑定-3
阅读量:4326 次
发布时间:2019-06-06

本文共 2252 字,大约阅读时间需要 7 分钟。

回调中如何实现冒泡?

/*通过将记录每个属性的父级,当属性值变化,逐级寻找回调最开始,打算在data上附加父级信息,后来感觉头快爆炸了,实现太麻烦,无法通过属性来获取父级对象名字,最后想到元素的parentNode , 不需要做成链式的,每个子属性,只需要记住它的父元素就行了.*/    (function(){        window.Observer = function(data){            this.data=data;            this.makeObserver();        };        var oP = Observer.prototype;        oP.watchArr = {};        //保存父级信息        oP._parentNode = {};        //父级初始化为空        oP._parent = '';        oP.makeObserver = function(){            for(var key in this.data){                  if(!this.data.hasOwnProperty(key))return;                var val = this.data[key];                //设置父级表                this._parentNode[key] = this._parent;                if(typeof val === 'object'){                    oP._parent = key;                    //递归时将当前key设置为父级                    new Observer(val);                };                this.setObserver(val,key);            };        };        oP.setObserver = function(val,key){            var that = this;            Object.defineProperty(that.data,key,{                enumerable: true,                configurable: true,                get:function(){                    return val;                },                set:function(newValue){                    if(typeof newValue === 'object'){                        new Observer(newValue);                    };                    if(val === newValue)return;                    //触发set时,执行冒泡                    oP.bubbleWatch(key,newValue,val);                    val = newValue;                }            });         };        oP.bubbleWatch = function(key,newValue,val){                if(this.watchArr[key]){            //如果监听表存在key,执行一次                this.implementWatch(key,newValue,val);            //如果冒泡选项为false,则return                if(!this.watchArr[key].options.bubble)return;            };            //剩下冒泡为true的,递归调用父级属性的回调            parentKey = this.getParent(key);            if(parentKey)this.bubbleWatch(parentKey,newValue,val);        };        oP.getParent = function(key){            var parent = this._parentNode[key];                 return parent;        };        oP.implementWatch = function(key,newValue,val){                     for(var i = 0;i

转载于:https://www.cnblogs.com/LiangHuang/p/6498337.html

你可能感兴趣的文章
机器学习基石笔记2——在何时可以使用机器学习(2)
查看>>
POJ 3740 Easy Finding (DLX模板)
查看>>
MySQL 处理重复数据
查看>>
关于typedef的用法总结(转)
查看>>
【strtok()】——分割字符串
查看>>
Linux下安装rabbitmq
查看>>
曹德旺
查看>>
【转】判断点在多边形内(matlab)
查看>>
java基础之集合:List Set Map的概述以及使用场景
查看>>
Python 线程 进程 协程
查看>>
iOS语言中的KVO机制
查看>>
excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法
查看>>
响应式web设计之CSS3 Media Queries
查看>>
实验三
查看>>
机器码和字节码
查看>>
环形菜单的实现
查看>>
【解决Chrome浏览器和IE浏览器上传附件兼容的问题 -- Chrome关闭flash后,uploadify插件不可用的解决办法】...
查看>>
34 帧动画
查看>>
二次剩余及欧拉准则
查看>>
Centos 7 Mysql 最大连接数超了问题解决
查看>>