STUDY-响应式
2023-02-18 16:39:32 时间
响应化是MVVM模式中的一个重要组成部分,对数据的操作有了响应才有下一步根据响应做对应操作的机会
对象属性响应化处理
// 对象属性响应化处理
function reactiveObject(obj, key, val) {
// 对象的值也是对象的情况进行递归操作
observe(val);
Object.defineProperty(obj, key, {
get() {
console.log("get 属性: ", key, " 值: ", val);
return val;
},
set(newVal) {
if (newVal !== val) {
// 直接赋值对象的情况需要重新响应化处理
observe(newVal);
console.log("set 属性: ", key, " 值: ", newVal);
newVal = val;
}
},
});
}
数组响应化处理
// 数组响应化处理
function reactiveArray() {
// 获取原始数组原型
const orgArrayProto = Array.prototype;
// 备份数组原型并重写方法
const reactiveArrayProto = Object.create(orgArrayProto);
["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].forEach(
(method) => {
reactiveArrayProto[method] = function() {
// 执行数组原始方法
orgArrayProto[method].apply(this, arguments);
// 触发变更通知
console.log("数组操作: method: ", method, " arguments: ", arguments);
};
}
);
return reactiveArrayProto;
}
执行统一响应化处理
// 执行统一响应化处理
function observe(obj) {
if (typeof obj !== "object" || obj == null) {
return;
}
if (Array.isArray(obj)) {
//执行数组响应化
//覆盖array原型
obj.__proto__ = reactiveArray();
for (let i = 0; i < obj.length; i++) {
observe(obj[i]);
}
} else {
//执行对象响应化(循环遍历将每个属性都进行响应化)
Object.keys(obj).forEach((key) => reactiveObject(obj, key, obj[key]));
}
}
TEST
const person = {
name: "小明",
age: 18,
email: ["111@qq.com"],
address: { city: "bj" },
};
observe(person);
//1. 直接操作对象属性情况
//2. 操作对象嵌套对象情况
//3. 直接赋值对象给属性并读取的情况
//4. 数组7中操作情况
相关文章
- stars-one的原创工具——星之小说下载器(JavaFx应用 )
- Java对象拷贝原理剖析及最佳实践
- JavaFx出现错误Caused by: java.lang.NullPointerException: Location is required的解决方法
- Java 学习笔记 Junit4单元测试使用
- Java 学习笔记 网络编程 使用Socket传输文件 CS模式
- Java 学习笔记 使用并发包ReentrantLock简化生产者消费者模式代码
- Java 学习笔记 使用synchronized实现生产者消费者模式
- Java 学习笔记 观察者模式与适配者模式 监控文件夹
- Java 学习笔记 线程控制
- java学习笔记 线程的实现与同步
- Java 学习笔记 泛型
- Java 学习笔记 反射与迭代器
- Java 学习笔记 正则表达式
- Java 学习笔记 执行外部命令 包装类 枚举类型
- Java 学习笔记 判断一个数组是否有序
- Java 学习笔记 IO流与File操作
- Java小工具 根据文本批量修改文件名
- Java学习笔记 抽象类 接口 多态
- Java Scanner nextLine方法跳过
- Java 学习笔记 两大集合框架Map和Collection