作为事件驱动编程方式的javascript，观察者模式在项目开发中体现了强大的灵活性和在对象一对多的应用场景中占据重要的位置 。
对于javascript来说，这种模式多用于对程序中的某个对象(具体到某个DOM元素或者某个json数据对象)的状态进行观察，并且在其状态发生改变的时候通知它的订阅者
适应场合
在javascript已经内置了许多事件，这些事件大多数是由用户的行为触发的，而应程序的数据状态即是由用户的行为或者其他应用程序逻辑导致了其状态的变化，这些状态就让观察者模式就派上用场了，例如你可以在你正在使用一个table装载的财务月结凭证的数据，此时,并且在本地多分凭证的缓存数据，并且这些凭证的数据是相互关联的，此时我们可以将当前月结凭证作为继承一个实现了Publisher的基类，而其他凭证报表即统一实现一个同一的交互接口，一旦变更的数据项同步到其他凭证当中。
观察者模式的参与成员
- 发布者(有些书本称“可观察对象”)：在计算机世界中,通常是一个具备广播消息的程序代码。
- 订阅者(有些文章称“观察者”)：在现实生活中可以是终端app或者登陆账户。
但上面两者，在js的世界中很灵活它可以是服务端,可以是同一个页面实现同一个应用的其他dom元素，甚者这两个角色可以是同一个继承类的实例。
具体实现
对于发布者当然必须具备前两个基本的功能
- 被订阅 这里subscribe
- 被退订 unsubscribe
- 消息发布 deliver_all
这里，刚开始接触设计的模式的读者，可能会问：“subscribe”不是由订阅者提供的吗？那换个角度想一下，发布者主要提供一个List维持订阅的用户队列，这个subcribe应该是有发布者提供并且实现的，unsubcribe同理。
对于众多订阅(这些订阅者之间可以毫不相关)者必须具备一个统一的应用接口,让发布者知道如何向他们通过该接口发布消息。也就是说，涉及基本两个设计原则，可以做到松耦合：
- 该接口由发布者倡导(统一接口名称)
- 由订阅者各自具体实现,发布者不参与接口的任何实现
以下是一个具体的实例
屏幕快照 2019-07-17 下午7.15.09.png
Web测试页
<!DOCTYPE html>
<html lang="en">
<head>
<title>Async JS</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/test.css') }}">
</head>
<body>
<div class="square" id="elementObjserver1">
</div>
<hr>
<button type="button" onclick="model.increment();">Increment</button>
</body>
<script src="{{ url_for('static', filename='js/business/publisher.js') }}"></script>
<script src="{{ url_for('static', filename='js/business/elementObserver.js') }}"></script>
<script src="{{ url_for('static', filename='js/business/consoleObserver.js') }}"></script>
<script src="{{ url_for('static', filename='js/business/historyObserver.js') }}"></script>
<script src="{{ url_for('static', filename='js/business/test.js') }}"></script>
</html>
发布者
class Publisher{
constructor(){
this.number=0;
this.color='红色';
this.subcribers=[];
}
increment(){
const colors=['橙色','红色','绿色','蓝色','黄色'];
this.number++;
this.color=colors[Math.floor(Math.random()*colors.length)];
this.deliver_all();
}
/**
* 订阅
* @param o
*/
subscribe(o){
this.subcribers.push(o);
}
/**
* 退订
* @param o
*/
unsubscribe(o){
for(let i=0; i<this.subcribers.length; i++){
if(this.subcribers[i]==o){
this.subcribers.splice(i,1);
}
i--;
}
}
/**
* 通知所有订阅者
*/
deliver_all(){
for(let o of this.subcribers){
o.update(this);
}
}
/**
* 通知某个订阅者
* @param i
*/
notify_one(i){
this.subcribers[i].update(this);
}
}
观察者
可以只要遵循上面说的“统一的交互接口”，这里我们创建了三个毫不相干的观察者对象,但他们都遵循了统一交互接口的update()并且各自有不同的功能实现
class Console{
update(model){
console.log('The number is '+model.number+
' and the color is '+model.color.toUpperCase());
}
}
class History{
constructor(){
this.colorHistory=[];
}
update(model){
this.colorHistory.unshift(model.color[0].toUpperCase());
let msg='The most recent 5 color mere:';
for(let i=0;i<5;i++){
if(this.colorHistory[i]) {
msg += this.colorHistory[i] + ' ';
}
}
console.log(msg);
}
}
class Elem{
constructor(elementId){
this.element=document.getElementById(elementId);
}
update(model){
this.element.innerHTML=model.number;
this.element.style.backgroundColor=model.color;
}
}
调用测试
const model=new Publisher();
const eObs1=new Elem('elementObjserver1');
const consoleOb=new Console();
const historyOb=new History();
//订阅操作
model.subscribe(eObs1);
model.subscribe(consoleOb);
model.subscribe(historyOb);
//消息发布
model.deliver_all();
网友评论