はじめに
React.jsやVue.jsのようなJSフレームワークを使用してない案件で、オブジェクトのプロパティの変化を監視しないといけないことがあったので、生のJavaScriptで実装しました。
今時のフロントエンド開発では、あまりなさそうな気もしますが。。。
サンプルプログラム
sample.js
//オブジェクトのプロパティの変化を監視する関数
let watchProp = function(obj, propName) {
let value = obj[propName];
Object.defineProperty(obj, propName, {
get: () => value,
set: newValue => {
const oldValue = value;
value = newValue;
consoleOut(oldValue,value);
}
});
}
//プロパティが変化した時に呼び出す関数
let consoleOut = function(oldValue,value){
document.getElementById("outTime").innerHTML = oldValue+"⇒"+value;
}
//監視させるオブジェクトとプロパティを定義
let timeKeeper = {"count_time" : 0};
watchProp(timeKeeper, "count_time");
//1秒ごとにプロパティをカウントアップ
setInterval("countup()", 1000);
let countup = function(){
timeKeeper["count_time"] += 1;
console.log(timeKeeper["count_time"]);
}
サンプルプログラムはこんな感じで、以下のようなhtmlで読み込ませてあげると、1秒毎に<ｐ>タグのテキストが変化します。
sample.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="outTime">0</p>
<script type="text/javascript" src="sample.js"></script>
</body>
</html>
【ブラウザ表示】
Object.definePropertyでプロパティの変化を監視
let watchProp = function(obj, propName) {
let value = obj[propName];
Object.defineProperty(obj, propName, {
get: () => value,
set: newValue => {
const oldValue = value;
value = newValue;
consoleOut(oldValue,value);
}
});
}
サンプルプログラムでは、この「watchProp」という関数がプロパティの変化を監視して、変化した時に「consoleOut」という関数を呼び出しているのですが、 Object.defineProperty() というメソッドを使用しています。
詳しくは、リンクのMDNや他の方の記事が参考になるかと思います｡
Object.defineProperty() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty「[JavaScript] 6. Object.defineProperty/ies でプロパティ/メソッド定義」
https://qiita.com/Koizumi-Greenwich/items/1b827b4304538f2f8e37