w3cSchool javascript 观察者模式
w3cSchool javascript 中介者模式
1. 顺序是这样的
- 观察者模式
- 发布订阅模式
- 中介者模式
首先要理解需求,我理解的需求是这个样子的.
执行代码是有顺序的,
比如, 第一件事, 我要起床,
第二件事, 我要洗脸,
我只有在起床之后, 才能洗脸
var isWakeUp = false;
function getUp() {
isWakeUp = true;
console.log('起床');
};
var isWashFace = false;
function washFace() {
if (isWakeUp) {
isWashFace = true;
console.log('洗脸');
}
};
getUP();
washFace();
上面的代码, 控制执行顺序是, 通过从上到下的方式, 也就是默认同步的方式
我们还可以选择用回调的方式,控制执行顺序
var isWakeUp = false;
function getUp(fn) {
isWakeUp = true;
fn();
console.log('起床');
};
var isWashFace = false;
function washFace() {
if (isWakeUp) {
isWashFace = true;
console.log('洗脸');
}
};
getUP(washFace);
刚开始, 我的感觉是这样的, 即, 先做完第一个, 然后再做第二个,
这里对所谓的状态的概念实际上比较弱, 因为是一对一的关系,
我们现在让需求变成一对多,
- 我先起床,
然后做下面三件事情, 不分优先级和前后顺序, - 洗脸
- 放音乐
- 开空调
function getUp() {
isWakeUp = true;
console.log('起床');
};
var isWashFace = false;
function washFace() {
if (isWakeUp) {
isWashFace = true;
console.log('洗脸');
}
};
var isTurnMusicOn = false;
function turnMusic() {
if (isWakeUp) {
isTurnMusicOn = true;
console.log('放音乐');
}
};
var isTurnAirconOn = false;
function turnAircon() {
if (isWakeUp) {
isTurnAirconOn = true;
console.log('开空调');
}
};
getUP();
washFace();
turnMusic();
turnAircon();
这样就发现, 状态比较重要,
并且实际上,上面最后四行代码没能显示这样一种关系,
即, getUp是其他三个行为的先决条件,
并且, 最后四行代码间接表明, 如果washFace没能完成, turnMusic是不会执行?
然后我们可以改成回调版本
var isWakeUp = false;
function getUp(fnArr) {
isWakeUp = true;
fnArr.forEach(fn => fn())
console.log('起床');
};
var isWashFace = false;
function washFace() {
if (isWakeUp) {
isWashFace = true;
console.log('洗脸');
}
};
var isTurnMusicOn = false;
function turnMusic() {
if (isWakeUp) {
isTurnMusicOn = true;
console.log('放音乐');
}
};
var isTurnAirconOn = false;
function turnAircon() {
if (isWakeUp) {
isTurnAirconOn = true;
console.log('开空调');
}
};
getUP([washFace,turnMusic,turnAircon]);
回调的使用让依赖关系比较明显,
但同时, 依赖关系太强了, 也就是需要解耦,
我们要干的事情是要强调状态.
即, 让这几个回调函数, 依赖的是个状态,
反过来讲, 这个状态, 就是一个信息, 状态改变, 就通知相关的回调函数
这个就是观察者模式的最基本的理解.
就是说, 有个地方(被观察者)是专门用来检测 某个状态的,
一帮回调函数(观察者), 如果想要监听这个状态,(比如已经起床)
就可以选择去这个地方注册一下, 说我要监听这个状态.
一旦这个状态发生变化, 就通知我, 然后回调函数就可以执行了.
var isWakeUp = false;
function getUp(doIt) {
isWakeUp = true;
doIt();
console.log('起床');
};
var isWashFace = false;
function washFace() {
if (isWakeUp) {
isWashFace = true;
console.log('洗脸');
}
};
var isTurnMusicOn = false;
function turnMusic() {
if (isWakeUp) {
isTurnMusicOn = true;
console.log('放音乐');
}
};
var isTurnAirconOn = false;
function turnAircon() {
if (isWakeUp) {
isTurnAirconOn = true;
console.log('开空调');
}
};
var observer = {
fnArr: [],
push(callback) { this.fnArr.push(callback) },
doIt() { if (isWakeUp) { this.fnArr.forEach(fn => fn()) } }
}
observer.push(washFace, turnMusic, turnAircon);
getUp(observer.doIt);
这写得很烂啊,,
不过表达的就是这个意思,
现在你会发现, 起床和后面三个动作被观察者隔离开了,
即依赖关系变弱了. 你执行getUp的时候, 不用再关心其他几个动作了.只需要通知observer
其他几个动作也不用关心getUp. 他们都只需要盯着observer,
其实现在都是同步关系, 以及这几个动作都在一起, 感觉这么写没什么用,
异步的时候就很有用了,
上面我写的是简化版本, 单位是对象和回调函数,
在博客当中这些都是被包裹在一个个的对象里, 而且都是用构造函数(类)来定义的.
以上是观察者
发布订阅是加了一个维度
比如, 上面的例子完成了一对多的通知,
如果我想监听不只是一个状态, 而是多个状态要怎么做?
第一种思路是, 创建多个observer吗, 每一个observer监听不同的状态.
另一种思路是, 这个维度用topic, 或者是event,type这种概念放进ovserver里.
比如, 一帮回调想要监听isGetUp状态, 那么注册的时候, 传一个getUp字段
想监听什么就传什么,
然后对应的状态发生变化的时候, 就会通知回调(观察者)(订阅者)
即, 订阅者(观察者)想订阅什么类型,就订阅什么类型, 发布者发布相应类型时, 就进行通知.
我的简单理解就是, 加了一个维度可以监听不同事件.
中介者模式又加了一个维度
他让事件变成了一种路径，
变成了一种树，
简单讲效果是这样的，
有如下路径（可以认为是路径， 事件， topic, 频道， 状态）
path1:'getup : washFace : washTooth'
path2:'getup : turnMusic : readBook'
getup 对应 一个被观察者， 这里挂很多回调（观察者）
getup : washFace 是一个被观察者， 这里挂很多回调（观察者）
getup : washFace : washTooth 是一个被观察者， 这里挂很多回调（观察者）
当getup发布时， 该路径起头的所有被观察者都一起发布
即 当getup 发布时,
getup : washFace,getup : washFace : washTooth
以及getup : turnMusic，getup : turnMusic : readBook
都会一起发布
而 getup : washFace : washTooth 发布时， getup上的并不会发布
大概理解成， 父发布， 子一起发布， 子发布不影响父。
跟发布订阅相比较时， 可以简单理解为， 对状态（事件，频道）做了一种树状的处理。
我的理解肯定比较浅显， 因为我对面向对象的理解很浅， 且实践较少。
不过依然觉得有所收获
