如何用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 相关文章推荐
javascript if条件判断方法小结
May 17 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
详解TS数字分隔符和更严格的类属性检查
May 06 #Javascript
JS中一些高效的魔法运算符总结
May 06 #Javascript
react国际化react-intl的使用
LayUI+Shiro实现动态菜单并记住菜单收展的示例
如何用JavaScript实现一个数组惰性求值库
原生JS中应该禁止出现的写法
May 05 #Javascript
详解Javascript实践中的命令模式
You might like
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
js 操作符实例代码
2009/10/24 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python中运算符"=="和"is"的详解
2016/10/08 Python
零基础学python应该从哪里入手
2020/08/11 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
微型企业创业投资计划书
2014/01/10 职场文书
五年级数学教学反思
2014/02/11 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
艺术节主持词
2014/04/02 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
大学生村官入党自传
2015/06/26 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL