设计模式 —— 观察者模式

设计模式 —— 观察者模式

什么叫观察？观察就是，我把目光聚焦于你，你的每一个动作都给我视觉反馈，就这么简单。观察者：Observer；被观察者：Subject；
备注：本文采用ES6类语法实现观察者模式。

理解了这句话自然也就不需要图解，梳理一下思路即可：

1. 先实例化，观察者，被观察者
2. 观察者，聚焦于，被观察者
3. 被观察者，给予，观察者，反馈
4. 有了思路就尝试，一步步实现，举一个生动又形象的例子

一、实例化对象

// 大怨种基类
class Subject {
	constructor(name) {
		this.name = name;
	}
}
// 亲爹妈基类
class Observer {
	constructor(name) {
		this.name = name;
	}
}
// 实例化
const father = new Observer('窝嫩爹');
const mother = new Observer('额滴个亲娘');
// ===========结婚生子============ >
const son = new Subject('好大儿');

二、观察者，聚焦于，被观察者

咱就是说，随着这娃的长大，不搁爹妈房间睡了，拥有了咱自己的狗窝，可以在自个屋里炫了：

// 大怨种基类
class Subject {
	constructor(name) {
		this.name = name;
		this.room = []; // 屋子
	}
}

但是，咱好大儿不晓得，他爹妈也可以进来干点啥：

• 额滴个亲娘担心好大儿熬夜玩电脑，进来屋子搞了个监控
• 但窝嫩爹早就在电脑埋入了监控脚本，只要一开机，就通知到手机

这下好了，这跟好大儿的爹妈24小时都搁他屋子里盯着他没啥区别啊！

// 大怨种基类
class Subject {
	constructor(name) {
		this.name = name;
		this.room = [];
	},
	BeiKanDeYiGanErJing(parent) {
		this.room.push(parent);
	}
}

// 亲爹妈基类
class Observer {
	constructor(name) {
		this.name = name;
	},
	seeYouEveryDay(mybitchson) {
		
	}
}

// 额滴个亲娘进好大儿屋装了个监控
son.BeiKanDeYiGanErJing(mother);
// 窝嫩爹又进屋搞了个脚本
son.BeiKanDeYiGanErJing(father);

三、被观察者，给予，观察者，反馈

咱就是说，自从额滴个亲娘和窝嫩爹进屋搞完之后，咱好大儿24小时的状况都被看得干干净净的，关键咱好大儿还不晓得啊：

// 大怨种基类
class Subject {
	constructor(name) {
		this.name = name;
		this.room = [];
		this.state = '光着靛睡觉';
	},
	BeiKanDeYiGanErJing(parent) {
		this.room.push(parent);
	}
}

然而，额滴个亲娘和窝嫩爹通过监控看到了这一幕，心里想，这大怨种是一点脸都不要啊！

// 亲爹妈基类
class Observer {
	constructor(name) {
		this.name = name;
	},
	seeYouEveryDay(mybitchson) {
		console.log(this.name + '看到了' + mybitchson.name + mybitchson.state);
	}
}

一夜无事，只是有几次，大怨种口渴醒了，起来喝了口水，爹娘俩通过监控也看到了这一幕：

// 大怨种基类
class Subject {
	constructor(name) {
		this.name = name;
		this.room = [];
		this.state = '光着靛睡觉';
	},
	BeiKanDeYiGanErJing(parent) {
		this.room.push(parent);
	},
	doSomeThing(state) {
		this.state = state;
		this.room.forEach(parent => {
			parent.seeYouEveryDay(this)
		})
	}
}

son.doSomeThing('1点起来喝水啦');
son.doSomeThing('2点起来喝水啦');
son.doSomeThing('3点起来喝水啦');

// 好大儿1点起来喝水啦 x2
// 好大儿2点起来喝水啦 x2
// 好大儿3点起来喝水啦 x2

突然！好大儿起来开电脑了！

• 额滴娘在监控里看到了他开电脑，大喊了一声：捏妈，bitchSon！
• 窝嫩爹此刻在手机里也收到了短信，他居然在看…

// 亲爹妈基类
class Observer {
	constructor(name) {
		this.name = name;
	},
	seeYouEveryDay(mybitchson) {
		console.log(this.name + '看到了' + mybitchson.name + mybitchson.state);
	}
}

son.doSomeThing('4点起来开电脑了！');

// log: 好大儿开电脑了！
// father warning: 我是云南的！云南怒江的！
// mother error: 捏妈，bitchSon！

四、完整代码

// 亲爹妈基类
class Observer {
	constructor(name) {
		this.name = name;
	}
	seeYouEveryDay(mybitchson) {
		console.log(this.name + '看到了' + mybitchson.name + mybitchson.state);
	}
}

// 大怨种基类
class Subject {
	constructor(name) {
		this.name = name;
		this.room = [];
		this.state = '光着靛睡觉';
	}
	BeiKanDeYiGanErJing(parent) {
		this.room.push(parent);
	}
	doSomeThing(state) {
		this.state = state;
		this.room.forEach(parent => {
			parent.seeYouEveryDay(this)
		})
	}
}

// 实例化
const father = new Observer('窝嫩爹');
const mother = new Observer('额滴个亲娘');
// ===========结婚生子============ >
const son = new Subject('好大儿');

// 额滴个亲娘进好大儿屋装了个监控
son.BeiKanDeYiGanErJing(mother);
// 窝嫩爹又进屋搞了个脚本
son.BeiKanDeYiGanErJing(father);

son.doSomeThing('1点起来喝水啦');
son.doSomeThing('2点起来喝水啦');
son.doSomeThing('3点起来喝水啦');
son.doSomeThing('4点起来开电脑了！');