JavaScriptでObserver
ベタに実装してみる。ライブラリにPrototype.jsを使用。
Observable
var Observable = Class.create();
Observable.prototype = {
observers : null,
initialize : function() {
this.observers = new Array();
},
addObserver : function(observer) {
this.observers.push(observer);
},
deleteObserver : function(observer) {
for (var i = 0, length = this.observers.length; i < length; i++) {
if (this.observers[i] == observer) {
this.observers.splice(i, 1);
break;
}
}
},
notifyObservers : function() {
this.observers.each(function(observer){
observer.update(this);
}.bind(this));
}
};Observer
var Observer = Class.create();
Observer.prototype = {
initialize : function() {
},
update : function(observable) {
}
};使い方
<html>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="observable.js"></script>
<script type="text/javascript" src="observer.js"></script>
<script>
// Observableクラス
var Timer = Class.create();
Object.extend(Timer.prototype, Observable.prototype);
Object.extend(Timer.prototype, {
executer : null,
time : null,
initialize : function() {
Observable.prototype.initialize.apply(this, arguments);
},
start : function() {
this.executer = new PeriodicalExecuter(this.run.bind(this), 1);
this.time = 0;
},
run : function() {
this.time++;
this.notifyObservers();
},
getTime : function() {
return this.time;
}
});
// Observerクラス
var TimerAlert = Class.create();
Object.extend(TimerAlert.prototype, Observer.prototype);
Object.extend(TimerAlert.prototype, {
initialize : function() {
Observer.prototype.initialize.apply(this, arguments);
},
update : function(observable) {
console.log(observable.getTime());
}
});
// ここからmainなところ
var timer = new Timer();
var timerAlert1 = new TimerAlert();
var timerAlert2 = new TimerAlert();
timer.addObserver(timerAlert1);
timer.deleteObserver(timerAlert1);
timer.addObserver(timerAlert2);
timer.start();
</script>
<body>
</body>
</html>二つのObserverを追加したけど、一つ消してるので、コンソールには一つのlogしか出てきません。
ちなみに、console.log使ってるので、要デバッグ環境です。
参考リンク
そこに3つのボタンがあるじゃろ？
どれでも好きなものを押していくといい。
どれでも好きなものを押していくといい。
Very Interesting!
Thank You!