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

概述

主要是用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数据监听的资料请关注我们其它相关文章!

(0)

相关推荐

  • js 实现watch监听数据变化的代码

    1.js /** * @desc 属性改变监听,属性被set时出发watch的方法,类似vue的watch * @author Jason * @study https://www.jianshu.com/p/00502d10ea95 * @data 2018-04-27 * @constructor * @param {object} opts - 构造参数. @default {data:{},watch:{}}; * @argument {object} data - 要绑定的属性 * @

  • javascript事件监听与事件委托实例详解

    本文实例讲述了javascript事件监听与事件委托.分享给大家供大家参考,具体如下: 事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id=&qu

  • JavaScript 监听组合按键思路及代码实现

    JavaScript监听组合按键 1. 思路 如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现, 当按下的组合键包含Ctrl键时,ctrlKey键会显示为true; 当按下的组合键包含Shift键.或者按键之前开启大写时,shiftkey键会显示为true; 当按下的组合键包含Alt键时,altKey键会显示为true; 当按下的组合键包含meta键(Mac电脑上 是 [⌘].command键,非mac电脑为 是win键时,metaKey键会显示为true 另外,按下键时,可通

  • JS如何监听div的resize事件详解

    需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用canvas绘制了一个chart,当canvas的size发生变化的时候,需要重新绘制里面的内容,这个时候就需要监听resize事件做处理. window上虽然可以添加resize事件监听,但这并不能满足我们的需求,因为很多时候,div的size发生了变化,但是window的size并没有改变. 不过我们可以间接利用window的resize事件监听来实现对于某个div的resize事件监听,请看下面具体实现. 对

  • 使用JS监听键盘按下事件(keydown event)

    1.监听全局键盘按下事件,例如监听全局回车事件 $(document).keydown(function(event){ if(event.keyCode == 13){ alert('你按下了Enter'); } }); 2.监听某个组件键盘按下事件,例如监听id为btn的button组件的回车按下事件 $("#btn").keydown(function(event){ if(event.keyCode==13){ alert('你按下了Enter'); } }); 3.如果是要监

  • JavaScript监听键盘事件代码实现

    在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧. 监听方式 键盘事件往往是全局监听,设监听的函数为keyboard(). keyup事件类型.该类型触发条件为按键按下去并松开. //长按并松开只触发一次 document.addEventListener('keyup', keyboard); document.onkeyup = keyboard; //记得不要加括号! keydown事件类型.该类型触发条件为按键按下去. //长按可以触发多次 document.addEvent

  • js实现无刷新监听URL的变化示例代码详解

    无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

  • NodeJS多种创建WebSocket监听的方式(三种)

    WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. WebSocket是一个通信的协议,分为服务器和客户端.服务器放在后台,保持与客户端的长连接,完成双方通信的任务.客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接.

  • JavaScript如何实现监听键盘输入和鼠标监点击

    实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结. Keyboard​Event KeyboardEvent 对象描述了键盘的交互方式. 每个事件都描述了一个按键(Each event describes a key):事件类型keydown, keypress 与 keyup 可以确定是哪种事件在活动. KeyboardEvent 表示刚刚发生在按键上的事情. 当你需要处理文本输入的时候,使用 HTML5 input 事件代替.例如,用户使用手持系统如平板

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

    概述 主要是用Object.defineProperty实现类似vue的数据绑定. 第一步 const data = { name: "tom", age: 14 } Object.defineProperty(data, "name", { get(){ return "name被读取了" }, set(val){ console.log('我被赋值了',val) } }) //将此代码放到浏览器控制台查看效果 console.log(data

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • 浅析Proxy可以优化vue的数据监听机制问题及实现思路

    我们首先来看vue2.x中的实现,为简单起见,我们这里不考虑多级嵌套,也不考虑数组 vue2.x中的实现 其本质是new Watcher(data, key, callback)的方式,而在调用之前是先将data中的所有属性转化成可监听的对象, 其主要就是利用Object.defineProperty,. class Watcher{ constructor(data, key, cb){ } } //转换成可监听对象 function observe(data){ new Observer(d

  • Vue3使用Proxy实现数据监听的原因分析

    vue 数据双向绑定原理,而这个方法有缺点,并且不能实现数组和对象的部分监听情况;具体也可以看我之前写的一篇博客: 关于 Vue 不能 watch 数组 和 对象变化的解决方案,最新的 Proxy,相比 vue2 的 Object.defineProperty,能达到速度加倍.内存减半的成效.具体是怎么实现.以及对比旧的实现方法为啥能有速度加倍.内存减半的特性,下面我们来聊聊: Vue 初始化过程 Vue 的初始化过程,分别有Observer.Compiler和Watcher,当我们 new V

  • 浅谈vue实现数据监听的函数 Object.defineProperty

    在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) @param  obj  要配置属性的某个对象 @param propname

  • Android开发之CheckBox的简单使用与监听功能示例

    本文实例讲述了Android开发之CheckBox的简单使用与监听功能.分享给大家供大家参考,具体如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_

  • Android开发之RadioGroup的简单使用与监听示例

    本文实例讲述了Android RadioGroup的简单使用与监听.分享给大家供大家参考,具体如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_pa

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

随机推荐