博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单写一个MVVM的实现
阅读量:6348 次
发布时间:2019-06-22

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

观察者:对象 用的语法:Object.defineProperty 实现方式:递归

defineProperty是es6新的对象属性,主要是观察对象中某个属性的值是否发生变化。

写一个简单的例子

let obj = {}val = newVallet val = 3.14Object.defineProperty(obj,'PI',{    get(){        return val    }    set(newVal){        console.log("set")        val = newVal    }})复制代码

现在改变obj的中的PI值 obj.PI = 3.15 这时就会打印出"set"写入

假如现在有一个现成的对象,要怎么实现一个多层级的监听呢?

let obj = { name: { name: '张三' }, age: 2 };复制代码

首先涉及到多层级监听,就会想到递归,还有循环。我们需要最终实现一个函数observer(obj)来实现监听

function observer(obj){    if(obj != 'object'){        return obj    }    for (let key in obj) {        defineReactive(obj, key, obj[key]);    }}function defineReactive(obj,key,value){    //此处递归    observer(value)    Object.defineProperty(obj,key,{        get(){            return value        }        set(val){            //处理数据重新定义后的工作            setMessage()            value=val        }    })}function setMessage(){    console.log("数据更新了")}observer(obj)复制代码

这样改变obj里的属性就会打印“数据更新了”

转载于:https://juejin.im/post/5bf7ab4ce51d45507630959b

你可能感兴趣的文章
20文件
查看>>
Android开发Intent应用概述
查看>>
【Go】并发编程
查看>>
VMware虚拟化NSX-Manager命令行更改admin用户密码
查看>>
悦纳自己
查看>>
python字符串函数
查看>>
ORM框架Hibernate (四)MyEclipse Hibernate Tool 逆向生成实体类
查看>>
js中substr与substring的区别
查看>>
去掉iphone连接电脑时会出现的弹出窗口
查看>>
【python】-- web开发之HTML
查看>>
vs2015 去除 git 源代码 绑定
查看>>
解决firefox的button按钮文字不能垂直居中
查看>>
网络协议端口号详解
查看>>
大话数据结构读后感——第一章
查看>>
各种排序
查看>>
ts 格式化日期输出
查看>>
Optional
查看>>
sed 命令编辑文本
查看>>
LRUCache 具体解释
查看>>
Activity调用isDestroyed()方法报出,java.lang.NoSuchMethodError
查看>>