如何用JS实现简单的数据监听


Posted in Javascript onMay 06, 2021

概述

主要是用Object.defineProperty实现类似vue的数据绑定。

第一步

const data = {
  name: "tom",
  age: 14
}
Object.defineProperty(data, "name", {
  get(){
    return "name被读取了"
  },
 set(val){
   console.log(‘我被赋值了‘,val)
 }
})
//将此代码放到浏览器控制台查看效果
console.log(data.name )

输出的data.name并不是tom,而是name被读取了,因为defineProperty对data的name字段进行的监听劫持,修改了,name字段本应该返回的值。

第二步

const _data = { ...data }
for(let i in data){
  Object.defineProperty(data, i, {
    get(){
      return _data[i]+"经过了js的修改"
    },
    set(val){
      _data[i] = val;
    }
  })
}

为什么需要单独的_data?

回答:监听了data的字段,并修改了字段的返回属性,导致的影响就是,每次获取data内监听的字段时候,浏览器都会调用get返回的值,如果你get里直接返回return data[i]的话,就会导致浏览器不停的调用get方法,从而进入到一个死循环当中。

给data多添加一点数据

const data = {
  name: "tom",
  age: 14,
  friend: {
        "name1": "张三",
        "name2": "李四",
        "name3": "王五",
        "name4": "赵六"
  },
}

格式化初始值

const createNewWatch = (val, path, parentKey, event) => {
       //如果值不是object类型,那么直接返回此值
       if(typeof val != ‘object‘) return val;
       //反之如果是object类型,那么调用WatchObject,在进行子元素的遍历及监听
       //WatchObject会在下面的代码中进行创建
       return WatchObject(val,path.concat(parentKey), event)
    }
广州品牌设计公司https://www.houdianzi.com

格式化object对象,监听值

const WatchObject = (data, path, event) => {
  function WatchObject(){
    for(var key in data){
        //调用之前创建的函数,格式化val
        data[key] = createNewWatch(data[key], path, key, event)
        //创建对数据key的监听
        defineProperty(this, key, data[key], path.concat(key), event)
    }
  }
  return new WatchObject()
}

最后执行代码,一个简单的数据监听就完成了。

const b = WatchObject(data,[],{ 
    set(path,val){ 
      console.log(path,val) 
    } 
})

以上就是如何用JS实现简单的数据监听的详细内容,更多关于JS数据监听的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
js生成随机数的过程解析
Nov 24 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 #Javascript
JS中一些高效的魔法运算符总结
May 06 #Javascript
react国际化react-intl的使用
LayUI+Shiro实现动态菜单并记住菜单收展的示例
如何用JavaScript实现一个数组惰性求值库
原生JS中应该禁止出现的写法
May 05 #Javascript
详解Javascript实践中的命令模式
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
详解Python中类的定义与使用
2017/04/11 Python
Python 自动化表单提交实例代码
2017/06/08 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python实现KNN分类算法
2019/10/16 Python
Python坐标线性插值应用实现
2019/11/13 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
PyQt5实现画布小程序
2020/05/30 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
英文求职信结束语大全
2013/10/26 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
党员先进事迹材料
2014/12/19 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers