2011-05-02 122 views
7

我有一個具有多個屬性的對象變量。javascript事件偵聽器用於更改對象變量

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

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

感謝您的建議。

+0

你見過這些嗎? * http://stackoverflow.com/questions/1063813/listener-for-property-value-changes-in-a-javascript-object * http://stackoverflow.com/questions/240592/is-it-possible-爲了聽取更改爲一個對象的屬性在javascript中-an-object-creating-or-modifies-a-key-val * http://stackoverflow.com/questions/1759987/detect-variable-change-in-javascript – 2011-05-02 17:26:35

回答

12

隨着ES5你必須制定者:

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

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

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

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

5

如果你想斷火的事件當一個對象變量的變化,您可以設置爲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