当前位置:
首页 > 网站开发 > JavaScript >
-
监听数组Array变化或Obj属性变化
工作中经常会遇到监听数组发生变化时执行相应的回调触发逻辑,客户应用场景中需要实现对象变量的动态监听,当变量发生变化时触发回调函数,实现事件发送等应用场景。
通常由以下两种方式实现需求
一.通过改变对象原型prototype方法实现回调监听
//创建一个数组原型对象
var arrayProtoType = Object.create(Array.prototype);
var ArrayProto = [];
//重构原型里的方法,同时将重构后的方法赋值给自定义好的数组
Object.getOwnPropertyNames(Array.prototype).forEach(function (key) {
// console.log(key)
if (typeof arrayProtoType[key] === "function") {
ArrayProto[key] = function () {
listenProtoMethods(key);
return arrayProtoType[key].apply(this, arguments);
};
} else {
listenProps(key);
ArrayProto[key] = arrayProtoType[key];
}
});
function listenProtoMethods(method) {
console.log("".concat(method, "\u89E6\u53D1\u4E86"));
//当监听到数组函数变化时执行回调逻辑callback
dataChanged();
}
function listenProps(prop) {
console.log("".concat(prop, "\u89E6\u53D1\u4E86"));
//当监听到数组属性变化时执行回调逻辑callback
dataChanged();
}
//监听到属性发生变化时执行以下方法
function dataChanged(){
console.log('arry data has changed...')
}
var arryWatched = [];
//将被监听的数组原型链指向新构造的原型对象
arryWatched.__proto__ = ArrayProto;
//执行以下函数时将触发回调函数
arryWatched.push();
arryWatched.join();
二.利用Proxy对象将监听对象与配置的监听函数进行关联绑定,实现监听属性变化
此种方法存在兼容性问题,低版本浏览器不支持Proxy函数
const array = [];
//定义监听配置条件
const changeHandler = {
get(target, property) {
return target[property];
},
set(target, property, value) {
target[property] = value;
console.log('数组发生变化:', target);
return true;
},
deleteProperty(target, property) {
delete target[property];
console.log('数组发生变化:', target);
return true;
}
};
//new一个代理对象将监听配置挂接到数组对象实现监听数组变化
const proxyArray = new Proxy(array, changeHandler);
proxyArray.push("data1")
proxyArray.push("data2")
出处:https://www.cnblogs.com/yangzhihui/p/watch_object_property.html
栏目列表
最新更新
求1000阶乘的结果末尾有多少个0
详解MyBatis延迟加载是如何实现的
IDEA 控制台中文乱码4种解决方案
SpringBoot中版本兼容性处理的实现示例
Spring的IOC解决程序耦合的实现
详解Spring多数据源如何切换
Java报错:UnsupportedOperationException in Col
使用Spring Batch实现批处理任务的详细教程
java中怎么将多个音频文件拼接合成一个
SpringBoot整合ES多个精确值查询 terms功能实
数据库审计与智能监控:从日志分析到异
SQL Server 中的数据类型隐式转换问题
SQL Server中T-SQL 数据类型转换详解
sqlserver 数据类型转换小实验
SQL Server数据类型转换方法
SQL Server 2017无法连接到服务器的问题解决
SQLServer地址搜索性能优化
Sql Server查询性能优化之不可小觑的书签查
SQL Server数据库的高性能优化经验总结
SQL SERVER性能优化综述(很好的总结,不要错
uniapp/H5 获取手机桌面壁纸 (静态壁纸)
[前端] DNS解析与优化
为什么在js中需要添加addEventListener()?
JS模块化系统
js通过Object.defineProperty() 定义和控制对象
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比