如何用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 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
浅析JavaScript动画
Jun 10 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 #Javascript
JS中一些高效的魔法运算符总结
May 06 #Javascript
react国际化react-intl的使用
LayUI+Shiro实现动态菜单并记住菜单收展的示例
如何用JavaScript实现一个数组惰性求值库
原生JS中应该禁止出现的写法
May 05 #Javascript
详解Javascript实践中的命令模式
You might like
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
领导班子自我剖析材料
2014/08/16 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
作弊检讨书
2015/01/27 职场文书
新闻稿标题
2015/07/18 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers