经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
监听数组Array变化或Obj属性变化
来源:cnblogs  作者:辉兔子  时间:2023/9/13 16:53:56  对本文有异议

工作中经常会遇到监听数组发生变化时执行相应的回调触发逻辑,客户应用场景中需要实现对象变量的动态监听,当变量发生变化时触发回调函数,实现事件发送等应用场景。      
通常由以下两种方式实现需求

一.通过改变对象原型prototype方法实现回调监听

  1. //创建一个数组原型对象
  2. var arrayProtoType = Object.create(Array.prototype);
  3. var ArrayProto = [];
  4. //重构原型里的方法,同时将重构后的方法赋值给自定义好的数组
  5. Object.getOwnPropertyNames(Array.prototype).forEach(function (key) {
  6. // console.log(key)
  7. if (typeof arrayProtoType[key] === "function") {
  8. ArrayProto[key] = function () {
  9. listenProtoMethods(key);
  10. return arrayProtoType[key].apply(this, arguments);
  11. };
  12. } else {
  13. listenProps(key);
  14. ArrayProto[key] = arrayProtoType[key];
  15. }
  16. });
  17. function listenProtoMethods(method) {
  18. console.log("".concat(method, "\u89E6\u53D1\u4E86"));
  19. //当监听到数组函数变化时执行回调逻辑callback
  20. dataChanged();
  21. }
  22. function listenProps(prop) {
  23. console.log("".concat(prop, "\u89E6\u53D1\u4E86"));
  24. //当监听到数组属性变化时执行回调逻辑callback
  25. dataChanged();
  26. }
  27. //监听到属性发生变化时执行以下方法
  28. function dataChanged(){
  29. console.log('arry data has changed...')
  30. }
  31. var arryWatched = [];
  32. //将被监听的数组原型链指向新构造的原型对象
  33. arryWatched.__proto__ = ArrayProto;
  34. //执行以下函数时将触发回调函数
  35. arryWatched.push();
  36. arryWatched.join();

二.利用Proxy对象将监听对象与配置的监听函数进行关联绑定,实现监听属性变化

        此种方法存在兼容性问题,低版本浏览器不支持Proxy函数

  1. const array = [];
  2. //定义监听配置条件
  3. const changeHandler = {
  4. get(target, property) {
  5. return target[property];
  6. },
  7. set(target, property, value) {
  8. target[property] = value;
  9. console.log('数组发生变化:', target);
  10. return true;
  11. },
  12. deleteProperty(target, property) {
  13. delete target[property];
  14. console.log('数组发生变化:', target);
  15. return true;
  16. }
  17. };
  18. //new一个代理对象将监听配置挂接到数组对象实现监听数组变化
  19. const proxyArray = new Proxy(array, changeHandler);
  20. proxyArray.push("data1")
  21. proxyArray.push("data2")

 

原文链接:https://www.cnblogs.com/yangzhihui/p/watch_object_property.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号