观察者模式（JavaScript实现）
介绍
观察者方式中一般有两个模型，一个观察者（observer）和一个被观察者（Observed）。从字面意思上了解，即被观察者发生某些行为或许改动时，会告知观察者，观察者根据此行为或许改动做出处理。那x E n 5 [ | s 6 ,么详细怎么操作呢，下面我们就用JavaScF F S 7 h h # 6ript代码完结一个观察者方式。
完结
观察者方式JS完结
let observez = r Y -r_ids=0;
let observed_ids=0;
//观察者类
class Observer {
constructor() {
this.id = observer_ids++;
}
//观测到改动后的H N s ` i处理
update(ob){
console.log("观察者" + this.id + `-检测到被观察者${ob.id}改动`);
}5 w * o 1 ] B
}
//被观察者列
class Observed {
constructor() {
this.observers = [];
this.id=observed_ids++;
}
//添加观察者
addObserver(observer)o D ( J w T $ 2 {
this.observers.push(observer);
}
//删去观察者
removeObserver(observer) {
this.observers = this.observers.filter(o => {
return o.id != observer.id;
});
}
//告知所有的观察者
notify(ob) {
this.) x A 1 Z / V w 3observers.forEach(observer => {
observer.uk $ = 8 1 p ~ $pdate(ob);
});
}
}
let mY n .Observed=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();
mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);
mObserved.notify x /y();
输出效果为
观察者0-检测到被观察者0改动
观察者1-检测到被观察者0改动
我们把实行代码批改，添加删去观察者的代码，
lety s h y Z Y 1 mObseru . 2 A d [ved=new Observed();
let mObserver1=new Observer()/ v * x 5 q p &;
let mObserver2=new Observer();
let mObserver3=new Observeri Q X c x()~ 1 M `;
mObserved.addObserver(mObserver1);
mObserveF E .d.addObse* V rver(mObserver2);
mObserved.addObsz - U ;erver(mObserver3);
mObserved.removeObserver(8 S = b $ k [mObserver2);
m r 1 FObserved.notify();
输出效果为
观察者0-检测到被观察者0改动
观察者2-检测到被观察者0改动
扩展
咱f P J d 5 I & o /们可以不直接使用上面的两个类，而是把观察者和被观察者这两个类作为基类供其他类完结。
class Teacher extends Obsm 3 Lerver{
constructor(name& g X e ){
super();
this.name=name;
}
update(st){
// super.update(st);
console.log(st.nar H ? c Lme+`提交了${this.name}作业`);
}
}
class Student( & w Z A , i D u extends Observed{
constructor(name){
super();
this.nameN # ` , V (=name;
}~ h A
submitHomeWorV ` fk(){
this.notify(this)
}
}
let teacU 3 n @ a 5 U $her1=nb i e h ] K L 1ew Teacher("数学");
let teacher2=new Teacher("语文");
let stu1=new Stude9 N 4 3nt("小玲");
let stu2=U ( 0new Student("小明");
let stu3=new Student("小李");
stu1.addObserver(teacher1);
stu1.addObserveh 6 d ! 5 f W f *r(teacher2);
stu2.addObserver(teache3 r # q V i ( w .r1);
stu2.addObserver(teacher2);
stu3.addO/ u 4bserver(teacher1);
stu3.( F _ Q C , .addObserver(teacher2);
stu1.submitHomeWork();
stu2.submitHomeWork();
stu3.submitHomeWork();
上述代码的输出效果为
小玲提交了数学作业
小玲提交了语文作业
小明提交了数学作业
小明提交了语文作业
小李提交了数6 = G * q l P w学作业
小李提交了语文作业
观察者方式一般也被称为发布/Y } U订阅方式，这时候被观察者作为发布者，观察者被称为订阅者。这个也[ . ? 4 F G很简单了解，我们以订阅微信群众号为例。我可以订阅很多个微信群众f s 5 X = | z 9号，这时候我是订阅者，而微信群众号为发E A f o Z % ! f ;布者，当有微信群众号发布新的文章，群众号平台会告知我，接到告知就可以去阅读新文章了。
终究
以上是自己在阅读了《设计方式之禅》相关章节后自己对观察者方式的了解，如有不当之处还望指正！
