JavaScript监听对象属性的改变

JavaScript监听对象属性的改变

作者:稚子 时间:2019-12-02 分类:BS架构后台语言 评论:0条 浏览:696

目前监听JS中的变量变化的方法很多,流行的MVVM的JS库/框架的共同特点就是数据绑定, 在数据变更后响应式的自动进行相关计算并变更DOM展现

常见的监听方法

1. 基于ES5的getter和setter

在ES5中新增了一个Object.defineProperty, 直接在一个对象上定义一个新属性, 或者修改一个已存在的属性,并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

参数
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

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

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

    obj.data=5;//set: 5

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

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

 var obj = {};
Object.defineProperties(obj, {
    a: {
        configurable: true, //表示该属性描述符可以被改变(默认为false)
        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)
        }
    }
})
2. 脏值检测

脏值检测原理就是比较新值和旧值, 当值真的发生改变时再去更改DOM,目前Angular使用脏值检测

缺点是如果不注意,每次脏值检测会检测大量的数据, 而很多数据是没有检测的必要的,容易影响性能。

3. ES6的Proxy

类似HTTP中的代理:

let p = new Proxy(target, handler);

target
用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler
一个对象,其属性是当执行一个操作时定义代理的行为的函数。

示例:当对象中不存在属性名时,缺省返回数为37

let handler = {
    get: function(target, name){
        return name in target ? target[name] : 37;
    }
};

let p = new Proxy({}, handler);

p.a = 1;
p.b = undefined;

console.log(p.a, p.b);    // 1, undefined

console.log('c' in p, p.c);    // false, 37

示例:通过代理,验证向一个对象的传值

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age); 
// 100

person.age = 'young'; 
// 抛出异常: Uncaught TypeError: The age is not an integer

person.age = 300; 
// 抛出异常: Uncaught RangeError: The age seems invalid

(来源于:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

标签:

相关推荐
更多

发表评论

邮箱地址不会被公开。 必填项已用*标注

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。