如何用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 相关文章推荐
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 #Javascript
JS中一些高效的魔法运算符总结
May 06 #Javascript
react国际化react-intl的使用
LayUI+Shiro实现动态菜单并记住菜单收展的示例
如何用JavaScript实现一个数组惰性求值库
原生JS中应该禁止出现的写法
May 05 #Javascript
详解Javascript实践中的命令模式
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
php实现简易计算器
2020/08/28 PHP
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
python 运算符 供重载参考
2009/06/11 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
简单了解什么是神经网络
2017/12/23 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python实现Zabbix-API监控
2018/09/17 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Numpy的简单用法小结
2019/08/28 Python
python如何获取apk的packagename和activity
2020/01/10 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
介绍一下gcc特性
2012/01/20 面试题
客房主管岗位职责
2013/12/09 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
python实现过滤敏感词
2021/05/08 Python
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android