javascript事件偵聽器用於更改對象變量

Question

我有一個具有多個屬性的對象變量。

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

如何編寫偵聽任何屬性更改的事件偵聽器。

感謝您的建議。

Answer 1

隨着ES5你必須制定者：

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

Answer 2

我知道這是一個老問題，但如果你是爲了調試這樣建議，您可以添加使用debugging tool at your browser相同的方式，調試腳本的監聽器。

個人，我在Firefox中使用Firebug，一旦打開，去DOM標籤，搜索你的變量，那麼（類似於增加一個斷點腳本）添加breakpoints。它會中斷並滾動到將要處理變量變化的特定代碼行。

檢查了這一點 - >火狐FIREBUG或谷歌瀏覽DEVELOPER TOOL

Answer 3

如果你想斷火的事件當一個對象變量的變化，您可以設置爲OBJ小Observer模式。

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