数据劫持 / defineProperty / mvvm模式
数据响应式: 是指当数据改变后,会通知到使用该数据的代码
例如: 视图渲染中依赖的数据,数据发生改变的时候,视图也自动更新
数据劫持
模拟vue 中的双向数据绑定实现原理( 基于数据劫持实现的 )
需要在 设置 / 获取 数据对象属性的同时,做些其他的事情
- $ + 属性名
加$ 表示其他名字即便重名也不能覆盖 该变量名
let obj1 = {
// 加$ 表示其他名字即便重名也不能覆盖 该变量名
// 但是没有私有的意思
$point : "爱好",
get point(){
console.log("我得到了point")
return this.$point
},
set point(val){
console.log("拿到了新的point数据" + val )
return this.$point = val;
}
}
console.log(obj1.point) // => 爱好
// 设置属性值,同时触发 console
obj1.point = "厌恶"; // => 拿到了新的point数据 厌恶
// 同时输出两个内容 (查看值是否被修改)
console.log(obj1.point); // => 我得到了point
// => (获取对象属性值,并没有被修改)爱好
defineProperty
基于Object去调用
- get 是一种获得属性值的方法,负责查询值,它不带任何参数
- set是一种设置属性值的方法,负责设置键值,值是以参数的形式传递
- 参数设置 Object.defineProperty ( obj , “name” , { } )
obj : 指定的操作对象
"name" : 指定对象的指定属性(这里可以是已有的属性值。也可以是新来的,用做添加新属性)
{ } : 对指定属性的 相关设置
Object.defineProperty(obj,"name",{
//1. 配置是否允许被删除 true(默认)可以被删除,false 不可以删除
// 允许增删
configurable : true,
//2. 配置是否允许被枚举 true(默认)可以被遍历,false 不可以遍历
// 是否允许被枚举 === 是否允许被遍历访问
enumerable : true,
//3. 配置是否允许被修改,true ( 默认值 ) 允许, false 不允许
// 默认值为 true,没有业务需要,不需要设置
// writable 会对set方法造成影响: 默认值 true 时(不填写,即为默认) 没有影响
// 设置为 true 时, 发生冲突
// writable: false
//4. value: 本身就存在,用于指定属性的赋值,获取 默认为 undefined
// 自身自带value 值
set(newVal){
console.log("设置的新值" + newVal)
// 允许增删
// configurable : true
// 否则 不能使用 value
value = newVal;
},
get(){
return value // value 本身就存在
}
})
delete obj.name; // 修改 configurable 属性 查看不同的结果
console.log(obj.name)
数据实时改变
- 前端html准备
<input type="text" id="ipt">
<div class="cl"></div>
- 后端JS代码
let obj = {
name : "秦",
age : 24
}
// 省略 ... Object.defineProperty(obj,"name",{配置信息})
let ipt = document.querySelector("#ipt");
let c = document.querySelector(".cl");
ipt.onchange = function(){
console.log("数据改变"+ ipt.value)
console.log(ipt.value)
obj.name = ipt.value;
c.innerHTML = obj.name;
}
mvvm模式
遵循的基本原则: 数据驱动视图的方式
- mvc 模式
之前的市面是很常见很流行的一个概念,一个编程规范。 - mvvm 模式
model(模型-数据) + view(视图) + viewModel(视图模型)
可以看作是 mvc 的升级版
本质上,就是mvc的改进版,mvvm 就是将其中的 view的状态和行为 抽象化
ViewModel 的任务:将视图和数据区分开,并通过vm来建立连接
它可以取出 model 中的数据,同时帮忙处理 view 中需要展示的内容所需的业务逻辑