用于对象变量更改的javascript事件侦听器[重复]答案

【问题标题】：javascript event listener for changes in an object variable [duplicate]用于对象变量更改的javascript事件侦听器[重复]
【发布时间】：2011-08-17 03:25:20
【问题描述】：

我有一个具有多个属性的对象变量。

MyVar = {"prop1" : 0, "prop2": 0....};

如何编写一个事件监听器来监听任何属性的变化。

感谢您的建议。

【问题讨论】：

你看过这些吗？ * stackoverflow.com/questions/1063813/… * stackoverflow.com/questions/240592/… * stackoverflow.com/questions/4138189/… * stackoverflow.com/questions/1759987/…

标签： javascript jquery

【解决方案1】：

在 ES5 中你有 setter：

var MyVar = {
  _prop1: 0,
  get prop1() { return this._prop1; },
  set prop1(value) { this._prop1 = value; /*Listener code can go here*/ }
};

【讨论】：

现在还有Proxy object，这有点像getter和设置，因为消费者可以使用普通赋值（=）和属性访问object.property或@987654325 @

【解决方案2】：

我知道这是一个老问题，但如果您这样做是为了调试建议，您可以使用您的 debugging tool at your browser 添加一个侦听器，就像您调试脚本一样。

我个人在 Firefox 中使用 Firebug，打开后，转到 DOM 选项卡，搜索您的变量，然后（类似于在脚本中添加断点）添加 breakpoints。它将中断并滚动到将处理变量更改的特定代码行。

检查一下 -> Firefox FIREBUG 或 Google Chrome DEVELOPER TOOL

【讨论】：

【解决方案3】：

如果您想在对象变量更改时触发事件，您可以为该 obj 设置一个小的观察者模式。

var MyVar = {
    prop1: "Foo",
    prop2: "Bar",
    events: {},

    setProp1: function(prop1) {
        this.prop1 = prop1;
        this.notify('prop1', this.prop1);
    },

    setProp2: function(prop2) {
        this.prop2 = prop2;
        this.notify('prop2', this.prop1);
    },

    addEvent: function(name) {
        if (typeof this.events[name] === "undefined") {
            this.events[name] = [];
        }
    },

    register: function(event, subscriber) {
        if (typeof subscriber === "object" && typeof subscriber.notify === 'function') {
            this.addEvent(event);
            this.events[event].push(subscriber);
        }
    },

    notify: function(event, data) {
        var events = this.events[event];
        for (var e in events) {
            events[e].notify(data);
        }
    }
};

var Prop1 = {
    notify: function() {
        alert('prop1 changed');
    }
};

var Prop2 = {
    notify: function() {
        alert('prop2 changed');
    }
};

$(document).ready(function(){
    MyVar.register('prop1',Prop1);
    MyVar.register('prop2',Prop2);

    MyVar.setProp1('New Var');
    MyVar.setProp2('New Var');
});

使用 setter 方法而不是直接设置对象属性，然后该方法会向正在观看它的其他对象触发通知事件。

JS FIDDLE

【讨论】：