2016-07-17 16 views
2

私はこのようないくつかの(簡単な)key: valueペア含むオブジェクトがあります。オブジェクトの値の変更を検出し、変更された値のキーを取得するのに、どのようなイベントを使用できますか?

var things = { 
    "0": "apple", 
    "1": "mango", 
    "2": "pear" 
    // ect... 
}; 

はありますが、私は、オブジェクトの値の変化をリッスンするために使用することができますObject.prototypeで関数やメソッドに建てられましたか?

たぶん、このような何か:私はjQueryとブラウザのサポートを使用して気にしない

things.onchange = function() { 
    alert(things[Key_Of_Value_That_Changed]); 
}; 

は方法も歓迎されている大きな優先順位ので非標準および/または習慣ではありません。

+0

[オブジェクトが変更されたかどうかを追跡する]の複製の可能性があります(http://stackoverflow.com/questions/5952542/track-whether-object-changed) –

+0

古くなった優れた機能:https://developer.mozilla。 org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/observe –

+1

@Slaytherリンクに感謝しますが、私の質問には答えません。 –

答えて

0

を使用し、最終的な製品です、およびSlaytheranswerの修正版:

var things = { 
    "0": "apple", 
    set: function(key, val) { 
    var old = (this[key]) ? this[key] : null; 
    this["OLD_" + key] = old; 
    this[key] = val; 
    this.onchange(key, val, old); 
    }, 
    onchange: function(key, value, old) { 
    // handle "onchange" business here 
    } 
}; 

things.set("0", "pear"); 

Slaytherにもう一度感謝します。これを実際に見たい人は、Codependemoがあります。

1

より一般的なセッター機能を使用できます(該当する場合は設定値を制御します)。

var things = { 
    "0": "apple", 
    "1": "mango", 
    "2": "pear", 
    // ect... 

    set_val: function (key, val) { 
    this[key] = val; 
    this.onchange(key); 
    }, 

    onchange: function() {} 
}; 

things.onchange = function(key) { 
    alert(key); 
}; 
+0

ありがとうございます。それが私の目標でした。 "まあ、**私が必要とするもののために**複雑すぎる**" –

+1

答えをくれてありがとう、正しい方向に私を助けてください、あなたのコードを少し修正して、大いに感謝します。 –

1

通常は、あなたはProxyを使用することができ、値を設定するための機能を使用して、それがそこから呼び出されていますが、あなたは確認する必要があります場合は、この変更に呼び出される可能性があります。これにより、プロパティが設定されるたびに関数を呼び出すことができます。

var trueThings = new Proxy(things, { 
    set: // your function here 
}); 

EDIT 2016年10月3日:

機能を通過することを強制し、それがclosureを使用して、メインオブジェクトにアクセスし、シェルのオブジェクトを作っているのがより広くサポートされている方法があります。 Proxyのように、それはオブジェクト(プライベートに保たれます)をラップし、それを操作するためのツールを提供します。あなたはそれを作成するには、次の機能を使用することができます。

function makeShell(obj) { 
    function setCallback(k, v, obj) { 
     // your callback here 
    } 

    return { 
     get: function(k) { 
      return obj[k]; 
     }, 
     set: function(k, v) { 
      setCallback(k, v); 
      obj[k] = v; 
     } 
    } 
} 
0

あなたは要素を作成することができ、セットの要素がオブジェクトプロパティに属性、ここでMutationObserver

var things = { 
 
    "prop-0": "apple", 
 
    "prop-1": "mango", 
 
    "prop-2": "pear" 
 
    // ect... 
 
}; 
 

 
var obj = document.createElement("div"); 
 

 
for (var prop in things) { 
 
    obj.setAttribute(prop, things[prop]) 
 
}; 
 

 
var target = obj; 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    things[mutation.attributeName] = obj.getAttribute(mutation.attributeName); 
 
    console.log(obj.getAttribute(mutation.attributeName) 
 
       , things); 
 
    }); 
 
}); 
 

 
var config = { 
 
    attributeFilter: Object.keys(things) 
 
}; 
 

 
observer.observe(target, config); 
 

 
obj.setAttribute("prop-0", "abc");

+0

答えと助けをありがとう、その非常に感謝します。 –

関連する問題