前回
スマートだと思っていたらスマートじゃなかった
https://qiita.com/angeart/items/c1ec1c59b66d5b57773a
やりたいこと
javascriptでMVVMのObservableのような通知を送る実装を書きたい
継承を利用してもっとスマートに
前回は利用クラスのconstructorの中でObservableクラスに包みましたが
よくよく考えたらinstanceofが利用出来ないですし、別物のクラスとして実体化してしまうのでスマートじゃないです
なので継承で利用できるようにしました。
実装
var $ = require('jquery');
class Observable {
constructor() {
return new Proxy(this, {
set: function(obj, prop, value) {
if (obj[prop] === value) return true;
obj[prop] = value;
$(obj).trigger("onchanged", {
prop: prop
});
return true;
}
});
}
}
class Test extends Observable {
constructor() {
super();
$(this).on("onchanged", function(e, data) {
console.log("changed : " + this[data.prop]);
});
}
}
var tester = new Test();
tester.hoge = "hoge";
tester.hoge = "hoge";
tester.hoge = "fuga";
if (tester instanceof Test) {
console.log("ok");
}
イベントの設定にjQueryを用いています
実行結果
changed : hoge
changed : fuga
ok
#repl.it
https://repl.it/@Angeart/Observable-on-Javascript-2