フロントエンドJS観察者モード(投稿者--予約者モード)

観察者モード
利点:より結合し、ラジオ通信をサポートする
短所:多くの観察者、放送は性能の問題があります.
最も簡単な例を挙げると、bodyはリリース者であり、コールバック関数functionは観察者である.

document.body.onclick = function(){
	console.log('       ');
}
document.body.addEventListener('click',function(){
	console.log('        ')
})

購読の注意
変更のお知らせ
Observer観察者
Subjectの発表者
Observer(購読者、観察者)

function Observer(name){
	this.name = name;
	this.update = function(context){
		// do something
	}
}

Subject(発表者)

function Subject(name){
	this.name = name;
	this.observers = [];
}
//      
Subject.prototype.addObserver = (observer) => {
	this.observers.push(observer)
}
//      
Subject.prototype.removeObserver = (observer) => {
	var index = this.observers.indexOf(observer);
	this.observers.splice(index, 1);
}
//      
Subject.prototype.notify = (context) => {
	var len = this.observers.length;
	for (var i = 0; i < len; i++){
		this.observers[i].update(context);
	}
}

プレゼンテーション

var ob1 = new Observer('ob1');
var ob2 = new Observer('ob2');
var sub = new Subject('sub');
sub.addObserver(ob1);
sub.addObserver(ob2);
sub.notify('some context');
sub.removeObserver(ob1);