js监听一个变量的变化

原创 2018年04月14日 23:58:59

监听一个变量的变化

目前主流的前端框架(例如:react、vue)都有的共同特点是数据绑定,他们通过对一个变量的监听,来实现变量变化时候的动态响应。当网页中的数据发生了变化,便立即调用相关的回调函数来更变dom节点中的内容,来实现数据视图的更新。

在智库这个项目中,由于种种原因,我们并没有用react和vue等框架,所以我们就需要使用其他的方法来实现数据流的绑定。

现在常用的数据绑定的方式有很多比如说ES5的getter和setter、脏数值检查以及ES6中的proxy,在项目中我们用到的是ES5的getter和setter

ES5的getter和setter

在ES5中,有一个Object.defineProperty的方法,这个方法可以直接在对象上创建一个新属性或者修改已经存在的属性。

来自MDN的官方文档
Object.defineProperty(obj, prop, descriptor)
参数
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

我们会发现属性描述符有一下几种:
属性描述
其中,get和set的描述就是我们现在需要对对象绑定的方法,这两个属性就像是对这个对象的某一个键名的监听,当我们读取这个键名的时候,会自动调用get方法,当我们改写set的时候,会自动调用set

下面我们来一个实例:

var obj={};
Object.defineProperty(obj,'data',{
    get:function(){
        return data;
    },
    set:function(newValue){
        data=newValue;
        console.log('set :',newValue);
        //需要触发的渲染函数可以写在这...
    }
})

这样,当我们给obj的data赋值的时候,就会触发set 的方法

    obj.data=1;//set: 1

这样,在每次更改数值的时候,我们无需手动多次调用渲染函数,只需要在defineProporty 中调用一次即可。

同时,如果你想一下子定义多个变量的getter和setter,你可以使用Object.defineProperties(obj,props)

参数
obj
要在其上定义属性的对象。
props
要定义其可枚举属性或修改的属性描述符的对象。

话不多说,直接上代码:

    var obj = {};
Object.defineProperties(obj, {
    a: {
        configurable: true,
        get: function() {
            console.log('get: ',a)
            return a
        },
        set: function(newValue) {
            a = newValue;
            console.log('set: ',a)
        }
    },
    b: {
        configurable: true,
        get: function() {
            console.log('get: ',b)
            return b;
        },
        set: function(newValue) {
            b = newValue;
            console.log('set: ',b)
        }
    }
})
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wengqt/article/details/79945851

JS 对象与数组的变化监听

MVVM重要一环的M到V的变化监听。研究了一些MVVM的框架。发现很多框架写的太过多复杂。 而且有些框架,把对象直接赋加很多它的私有属于,kendo 它把私有以_前缀来区分,knockout 和vue...
  • long5305350
  • long5305350
  • 2016-06-03 16:06:53
  • 8356

js 实时监听input中值变化

RunJS 实时监测input中值的变化
  • spy19881201
  • spy19881201
  • 2014-05-11 11:13:55
  • 217597

js监听一个变量的变化

监听一个变量的变化 目前主流的前端框架(例如:react、vue)都有的共同特点是数据绑定,他们通过对一个变量的监听,来实现变量变化时候的动态响应。当网页中的数据发生了变化,便立即调用相关的回调函数...
  • wengqt
  • wengqt
  • 2018-04-14 23:58:59
  • 27

实现对象属性的"监控" - 修改数据后自动更新页面

index.js:var God = { version:'1.0', extends(name, obj){ // 调用初始化函数 this.init(...
  • github_26672553
  • github_26672553
  • 2017-01-05 13:54:22
  • 527

[Java学习小记]使用PropertyChangeSupport来监听变量的变化

最近开始要着手写一个
  • yoier
  • yoier
  • 2014-05-15 16:21:04
  • 4458

Android监听——变量的变化

这是对上一篇的补充: 如何合理的监听程序中一个变量的变化。 有时候,我们在程序中会设定一个变量作为标志,而程序需要监听这个标志,当这个标志发生改变时,程序做出相应的处理。 主要的代码解释如下: ...
  • yangzhaomuma
  • yangzhaomuma
  • 2016-03-25 01:16:09
  • 4395

Vue监听数据变化

浅度监听 自定义键盘信息
  • H1069495874
  • H1069495874
  • 2017-02-17 09:58:35
  • 7218

Jquery/Javascript动态获取JS变量名/对象

有一个项目做连动,数据是通过JS写好的。
  • programmer_sir
  • programmer_sir
  • 2014-06-06 16:14:52
  • 24778

使用PropertyChangeSupport监听变量变化

今天要处理的问题是:监听一个变量,当该变量的值出现变化时能够获知,并进行相应处理。 使用java.bean.PropertyChangeSupport类。看如下的构造方法,其实就是将你要控制的对...
  • Small__Snail
  • Small__Snail
  • 2015-11-30 16:47:26
  • 1074

原生js实现检测对象变化

最近这段时间,前端开发开始逐渐模块化,一些MVC、MVVM等框架比较流行,比如angular、vue、react;这三个框架比较相似的有一点就是数据的双向绑定,视图的更新导致相应数据变化,数据的改变引...
  • qq_34829112
  • qq_34829112
  • 2017-07-29 18:01:24
  • 1805
收藏助手
不良信息举报
您举报文章:js监听一个变量的变化
举报原因:
原因补充:

(最多只允许输入30个字)