一、现在的开发方式

1、现实中的开发，很少使用原声JS，不是因为JS不强大，主要是因为操作比较繁琐，几乎所有的公司都在使用框架，比如vue、react

2、特点：数据驱动视图。也就是数据发生变化以后，视图跟着变化

所以现在我们更加关注的是我们的数据了

二、数据劫持

1、含义：对原有数据的复刻，就是复制一份原有的数据出来，但是复刻出来的数据不允许修改，但是这个数据是从原有的数据中复刻出来的

2、语法：Object.defineProperty(给那一个对象,属性名,{配置项})

在配置项中包含着属性名的值
配置项中的内容:

=> value:该属性名对应的值

=> writable:该属性是否可以被重写(就是重新设置值)

-> 默认是 false 不允许被重写 , 也就是只读

-> 选填是 true 表示允许被重写 , 也就是可以被修改

=> enumerable: 表示该属性是否可以不枚举(遍历)

-> 默认是 false 不可以枚举

-> 选填是 true 表示可以遍历

=> get: 是一个函数 , 叫做getter获取器

-> 可以用来获取该属性的值

-> get属性的返回值就是这个属性的值

-> 注意: 不能和 value 和 writable 一起使用 , 会报错
=> set: 是一个函数 , 叫做setter设置器

-> 当你需要修改该属性值的时候 , 会触发该函数

// 设置
Object.defineProperty(obj,'age',{value:18,writable:true,enumerable:true,get () {// 该函数的返回值就是这个属性的值// 上面设置了value 和 writable 这里就不能返回了return 20},set (val) {console.log('你想要修改age的值,修改为:',val);}
})
console.log(obj); // 打印结果: {age: 18}
// 之后我们尝试修改
// 修改我们之前的普通设置
obj.name = 'Rose'
console.log(obj); // 没有问题可以修改
// 修改通过Object.defineProperty设置的值
obj.age = 30
console.log(obj); // 打印出来的结果还是18 , 这个时候是不允许被修改的
// 在没有书写 enumerable 之前是不可以遍历出age的 , 书写了enumerable:true 以后是可以的
for (let k in obj) {console.log(k);
}
// 测试get函数的返回值不能和 value 和 writable一起使用
console.log(obj)

3、数据劫持的简单封装

function observer (origin,fn) {// origin : 原始数据 , 也就的你给我的数据// fn : 我想要做的事情// 定义一个劫持目标const target = {}// 我们循环拿到传递进来的数据for (let k in origin) {// 开始劫持Object.defineProperty(target, k,{// 返回的数据get () {return origin[k];},set (val) {// 修改的是origin内的数据origin[k] = val// 修改完毕要执行一下我的功能函数fn(target)}})}// 初始的时候我们也要执行一下我们的功能函数fn(target)// 返回一个被劫持后的数据return target
}
// 获取元素
const box = document.querySelector('.box')
// 将来我们使用的时候
const app = observer({name:'Rose',age:30},result => {// 箭头函数中是我想要做的事情box.innerHTML =`我是${result.name},今年${result.age}岁了`
})
console.log(app);
// 获取元素
const inp = document.querySelector('input')
inp.oninput = () => {app.age = inp.value
}

4、数据劫持升级

语法：

Object.defineProperties(对象,{

哪一个属性:{配置项},

哪一个属性:{配置项},

....

}

缺点：（1）就是只能劫持当前以前的数据

（2）如果劫持过后 , 后期动态插入的数据不好使(也就的不能再被劫持到)

// 数据劫持
const obj = {name:'Jack',age:30}
console.log('原始obj:',obj);
// 开始劫持 把obj劫持到obj身上
// 拿到obj中的所有的key
for (let k in obj) {// 开始劫持Object.defineProperties(obj,{// 这样操作会报错// 一旦 obj.name 被修改// 不停的获取不停的该 , 不停的该不停的获取// 就会造成栈溢出// name:{//     get () {//         return obj.name//     }// }// 步骤1: 我们需要复制一份属性出来(也就是备份一份)// 这里需要拼接一个变量出来// 假设:之前的属性是name , 我们复制出来的属性叫做:_name// 语法: ['_' + 属性名] : {}['_' + k] : {value: obj[k],writable: true },// 步骤2: 正式开始劫持(劫持的是我们备份的)[k] : {get () {return this['_' + k]},set (val) {this['_' + k] = val// 渲染页面操作console.log('你尝试修改 ' + k + ' 属性, 你要修改为 : ', val)}}})
}
console.log('劫持后obj',obj);
// 尝试修改
obj.age = 66

三、数据代理

1、这个行为也是一个劫持行为，是 ES6 提供的语法 , 是一个内置构造函数，但是在社区里大家还是都叫数据劫持

2、语法：const 变量名 = new Proxy(要代理的原始对象,{ 配置项 })

3、返回值: 一个实例对象 , 就是代理结果数据

// 定义一个对象
const obj = {name: 'Jack', age:25}
// 开始代理
const result = new Proxy(obj, {// 配置get来进行代理设置get (target,property) {// target:就是你要代理的目标对象 , 我们这个案例中就是obj// prototype: 是该对象内的每一个属性 , 自动遍历return target[prototype]},// 配置set来进行修改set (target,property,val) {// target: 就是你要代理的目标对象// prototype: 就是对象内你要修改的那个属性// val: 就是你要修改的那个属性的值target[prototype] = valconsole.log('你尝试修改'+ prototype + '属性,想要修改为:'+ val + ',我要根据你修改的内容渲染页面');// 注意: 简单代理需要返回 true 让程序正常执行return true }
})
console.log('原始数据:',obj);
console.log('代理数据:',result);
console.log('代理结果 name:',result.name);// 尝试修改
result.name = 'Rose'
console.log('代理结果 name:',result.name);// 动态插入数据
result.gender = '男'

第二十七章数据劫持相关推荐

程序员编程艺术第二十七章：不改变正负数相对顺序重新排列数组(无解?)
第二十七章:不改变正负数之间相对顺序重新排列数组.时间O(N),空间O(1) 前言本文开始之前,顺道说个事:CSDN最近开始评选10大博客专栏,投票地址为:http://event.blog.csd ...
spi收发时的寄存器sr不变_「正点原子Linux连载」第二十七章SPI实验（一）
1)实验平台:正点原子Linux开发板 2)摘自<正点原子I.MX6U嵌入式Linux驱动开发指南> 关注官方微信号公众号,获取更多资料:正点原子第二十七章SPI实验同I2C一样,SP ...
【正点原子FPGA连载】第二十七章DS18B20数字温度传感器实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1
1)实验平台:正点原子新起点V2开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609758951113 2)全套实验源码+手册+视频下载地址:ht ...
【正点原子MP157连载】第二十七章 DHT11数字温湿度传感器实验-摘自【正点原子】STM32MP1 M4裸机CubeIDE开发指南
1)实验平台:正点原子STM32MP157开发板 2)购买链接:https://item.taobao.com/item.htm?&id=629270721801 3)全套实验源码+手册+视频 ...
【正点原子Linux连载】第二十七章 SPI实验 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...
SPI 读取不同长度寄存器_正点原子Linux第二十七章SPI实验
1)资料下载:点击资料即可下载 2)对正点原子Linux感兴趣的同学可以加群讨论:935446741 3)关注正点原子公众号,获取最新资料更新第二十七章SPI实验同I2C一样,SPI是很常用的通信 ...
【正点原子STM32连载】第二十七章 RTC实时时钟实验摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
第二十七章：五姓七望
第二十七章:五姓七望现在皇宫外面送给李丽质的东西已经不少了,甚至已经相当的多了,都已经在屋内堆满了.不过李丽质还是继续堆着,因为李丽质知道,现在民心已经开始向着自己转变了. 他还时不时的想着,这李淳 ...
第二十七章数论——快速幂与逆元
第二十七章快速幂与扩展欧几里德算法一.快速幂 1.使用场景 2.算法思路 (1)二进制优化思想 (2)模运算法则 3.代码实现 (1)问题 (2)代码二.快速幂求逆元 1.什么是逆元? (1)同 ...

第二十七章数据劫持

一、现在的开发方式

二、数据劫持

第二十七章数据劫持相关推荐

最新文章

热门文章

第二十七章 数据劫持

一、现在的开发方式

二、数据劫持

第二十七章 数据劫持相关推荐

最新文章

热门文章

第二十七章数据劫持

第二十七章数据劫持相关推荐