观察者模式(JavaScript 实现)
介绍
观察者模式中通常有两个模型,一个观察者(observer
)和一个被观察者(Observed
)。从字面意思上理解,即被观察者发生某些行为或者变化时,会通知观察者,观察者根据此行为或者变化做出处理。那么具体如何操作呢,接下来我们就用JavaScript
代码实现一个下图????所示的观察者模式。
实现
观察者模式JS实现
let observer_ids=0;
let observed_ids=0;
//观察者类
class Observer {
constructor() {
this.id = observer_ids++;
}
//观测到变化后的处理
update(ob){
console.log("观察者" + this.id + `-检测到被观察者${ob.id}变化`);
}
}
//被观察者列
class Observed {
constructor() {
this.observers = [];
this.id=observed_ids++;
}
//添加观察者
addObserver(observer) {
this.observers.push(observer);
}
//删除观察者
removeObserver(observer) {
this.observers = this.observers.filter(o => {
return o.id != observer.id;
});
}
//通知所有的观察者
notify() {
this.observers.forEach(observer => {
observer.update(this);
});
}
}
let mObserved=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();
mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);
mObserved.notify();
输出结果为
观察者0-检测到被观察者0变化
观察者1-检测到被观察者0变化
我们把执行代码修改,添加删除观察者的代码,
let mObserved=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();
let mObserver3=new Observer();
mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);
mObserved.addObserver(mObserver3);
mObserved.removeObserver(mObserver2);
mObserved.notify();
输出结果为
观察者0-检测到被观察者0变化
观察者2-检测到被观察者0变化
扩展
我们可以不直接使用上面的两个类,而是把观察者和被观察者这两个类作为基类供其他类实现。
class Teacher extends Observer{
constructor(name){
super();
this.name=name;
}
update(st){
// super.update(st);
console.log(st.name+`提交了${this.name}作业`);
}
}
class Student extends Observed{
constructor(name){
super();
this.name=name;
}
submitHomeWork(){
this.notify(this)
}
}
let teacher1=new Teacher("数学");
let teacher2=new Teacher("语文");
let stu1=new Student("小玲");
let stu2=new Student("小明");
let stu3=new Student("小李");
stu1.addObserver(teacher1);
stu1.addObserver(teacher2);
stu2.addObserver(teacher1);
stu2.addObserver(teacher2);
stu3.addObserver(teacher1);
stu3.addObserver(teacher2);
stu1.submitHomeWork();
stu2.submitHomeWork();
stu3.submitHomeWork();
上述代码的输出结果为
小玲提交了数学作业
小玲提交了语文作业
小明提交了数学作业
小明提交了语文作业
小李提交了数学作业
小李提交了语文作业
发布订阅者模式
观察者模式通常也被称为发布/订阅模式,这时候被观察者作为发布者,观察者被称为订阅者。这个也很容易理解,我们以订阅微信公众号为例。我可以订阅很多个微信公众号,这时候我是订阅者,而微信公众号为发布者,当有微信公众号发布新的文章,公众号平台会通知我,接到通知就可以去阅读新文章了。
注意:上面关于发布订阅者模式的描述并不正确,下面进行更正。
发布订阅者模式与观察者模式类似,但是两者并不完全相同,发布订阅者模式与观察者相比多了一个中间层的调度中心,用来对发布者发布的信息进行处理再发布到订阅者,大致过程如下图所示。
那么问题来了,为什么要加一个中间层的调度中心呢?通过上面????对观察者模式的实现,我们的observed
类中是持有observer
对象的,因此并没有实现两个类的完全解耦。通过添加中间层的调度中心类,我么可以将订阅者和发布者完全解耦,两者不再有直接的关联,而是通过调度中心关联起来。下面我们继续实现一个发布订阅者模式。
//发布者
class Pub{
constructor(dispatcher){
this.dispatcher=dispatcher;
this.id=observed_ids++;
}
/**
* @description: 发布方法
* @param {type} 通知类型
*/
publish(type){
this.dispatcher.publish(type,this)
}
}
//订阅者
class Subscriber{
constructor(dispatcher){
this.dispatcher=dispatcher;
this.id=observer_ids++;
}
subscribe(type){
this.dispatcher.subscribe(type,this);
}
doUpdate(type,arg){
console.log("接受到消息"+arg)
}
}
//调度中心
class Dispatcher{
constructor(){
this.dispatcher={};
}
//订阅
subscribe(pub,subscriber){
if(!this.dispatcher[pub.id]){
this.dispatcher[pub.id]=[];
}
this.dispatcher[pub.id].push(subscriber);
}
//退订
unsubscribe(pub, subscriber) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
this.dispatcher[type] = subscribers.filter(item =>{
return item.id !== subscriber.id
});
}
//发布
publish(type, args) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
subscribers.forEach(subscriber=>{
subscriber.doUpdate(type,args);
});
}
}
class Reader extends Subscriber{
constructor(name,dispatcher){
super(dispatcher);
this.name=name;
}
doUpdate(type,st){
// super.update(st);
console.log(this.name+`阅读了--${type}--公众号的文章`);
}
}
class WeiX extends Pub{
constructor(name,dispatcher){
super(dispatcher);
this.name=name;
}
publishArticle(type){
this.publish(type)
}
}
let dispatcher=new Dispatcher();
//公众号
let wei1=new WeiX("前端",dispatcher);
let wei2=new WeiX("数据库",dispatcher);
//读者们
let reader1=new Reader("小玲",dispatcher);
let reader2=new Reader("小明",dispatcher);
let reader3=new Reader("小李",dispatcher);
//读者订阅公众号
reader1.subscribe("前端");
reader2.subscribe("数据库");
reader3.subscribe("数据库");
//公众号发布文章
wei1.publishArticle("前端");
wei1.publishArticle("数据库");
运行结果如下:
小玲阅读了--前端--公众号的文章
小明阅读了--数据库--公众号的文章
小李阅读了--数据库--公众号的文章
通过上面的代码我们的确实现了一个简单的发布订阅模式,但是我们发现Pub
类好像并不必要,因为这个类实际上只是单纯的调用了调度中心Dispatcher
的publish
方法。因此我们可以对上述代码进行简化。
let ids=0;
let observer_ids=0;
//订阅者
class Subscriber{
constructor(dispatcher){
this.dispatcher=dispatcher;
this.id=observer_ids++;
}
subscribe(type){
this.dispatcher.subscribe(type,this);
}
doUpdate(type,arg){
console.log("接受到消息"+arg)
}
}
//调度中心
class Dispatcher{
constructor(){
this.dispatcher={};
this.id=ids++;
}
//订阅
subscribe(type,subscriber){
if(!this.dispatcher[type]){
this.dispatcher[type]=[];
}
this.dispatcher[type].push(subscriber);
}
//退订
unsubscribe(type, subscriber) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
this.dispatcher[type] = subscribers.filter(item =>{
return item.id !== subscriber.id
});
}
//发布
publish(type, args) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
subscribers.forEach(subscriber=>{
subscriber.doUpdate(type,args);
});
}
}
class Reader extends Subscriber{
constructor(name,dispatcher){
super(dispatcher);
this.name=name;
}
doUpdate(type,st){
// super.update(st);
console.log(this.name+`阅读了--${type}--公众号的文章`);
}
}
class WeiX extends Dispatcher{
constructor(name){
super();
this.name=name;
}
publishArticle(type){
this.publish(type)
}
}
//微信公众号平台
let wx1=new WeiX();
//读者们
let reader1=new Reader("小玲",wx1);
let reader2=new Reader("小明",wx1);
let reader3=new Reader("小李",wx1);
//读者订阅公众号
reader1.subscribe("前端");
reader2.subscribe("数据库");
reader3.subscribe("数据库");
//公众号发布文章
wx1.publishArticle("前端");
wx1.publishArticle("数据库");
最后
以上是自己在阅读了《设计模式之禅》相关章节后自己对观察者模式的理解,如有不当之处还望指正!
感谢fengwei对文中我对观察者模式和发布订阅者模式描述错误的指正!
上一篇: 数学不仅仅是计算 pdf
推荐阅读
-
JavaScript 实现自动填写和提交问卷的方法
-
向过去学习的 JavaScript - 绑定方法的实现
-
设计模式学习笔记 - 项目实践 2:设计和实现通用接口闲置框架(实现) - 重构最小原型代码
-
贪婪算法在 Python、JavaScript、Java、C++ 和 C# 中的多种实现及其在硬币变化、分数骑士、活动选择和使用哈夫曼编码的最小生成树问题中的应用实例
-
Django-admin 单例模式和懒加载 - django-admin 如何实现单例模式和懒加载
-
设计模式] 12,观察者观察者模式
-
HTML + CSS + JavaScript 实现注册页面信息验证(表单验证)
-
二十一点的 javascript 实现
-
一种结构设计模式,允许在对象中动态添加新行为。它通过创建一个封装器来实现这一目的,即把对象放入一个装饰器类中,然后把这个装饰器类放入另一个装饰器类中,以此类推,形成一个封装器链。这样,我们就可以在不改变原始对象的情况下动态添加新行为或修改原始行为。 在 Java 中,实现装饰器设计模式的步骤如下: 定义一个接口或抽象类作为被装饰对象的基类。 公共接口 Component { void operation; } } 在本例中,我们定义了一个名为 Component 的接口,该接口包含一个名为 operation 的抽象方法,该方法定义了被装饰对象的基本行为。 定义一个实现基类方法的具体装饰对象。 公共类 ConcreteComponent 实现 Component { public class ConcreteComponent implements Component { @Override public void operation { System.out.println("ConcreteComponent is doing something...") ; } } 定义一个抽象装饰器类,该类继承于基类,并将装饰对象作为一个属性。 公共抽象类装饰器实现组件 { protected Component 组件 public Decorator(Component component) { this.component = component; } } @Override public void operation { component.operation; } } } 在这个示例中,我们定义了一个名为 Decorator 的抽象类,它继承了 Component 接口,并将被装饰对象作为一个属性。在操作方法中,我们调用了被装饰对象上的同名方法。 定义一个具体的装饰器类,继承自抽象装饰器类并实现增强逻辑。 公共类 ConcreteDecoratorA extends Decorator { public ConcreteDecoratorA(Component 组件) { super(component); } } public void operation { super.operation System.out.println("ConcreteDecoratorA 正在添加新行为......") ; } } 在本例中,我们定义了一个名为 ConcreteDecoratorA 的具体装饰器类,它继承自装饰器抽象类,并实现了操作方法的增强逻辑。在操作方法中,我们首先调用被装饰对象上的同名方法,然后添加新行为。 使用装饰器增强被装饰对象。 公共类 Main { public static void main(String args) { Component 组件 = new ConcreteComponent; component = new ConcreteDecoratorA(component); 组件操作 } } 在这个示例中,我们首先创建了一个被装饰对象 ConcreteComponent,然后通过 ConcreteDecoratorA 类创建了一个装饰器,并将被装饰对象作为参数传递。最后,调用装饰器的操作方法,实现对被装饰对象的增强。 使用场景 在 Java 中,装饰器模式被广泛使用,尤其是在 I/O 中。Java 中的 I/O 库使用装饰器模式实现了不同数据流之间的转换和增强。 让我们打开文件 a.txt,从中读取数据。InputStream 是一个抽象类,FileInputStream 是专门用于读取文件流的子类。BufferedInputStream 是一个支持缓存的数据读取类,可以提高数据读取的效率,具体代码如下: @Test public void testIO throws Exception { InputStream inputStream = new FileInputStream("C:/bbb/a.txt"); // 实现包装 inputStream = new BufferedInputStream(inputStream); byte bytes = new byte[1024]; int len; while((len = inputStream.read(bytes)) != -1){ System.out.println(new String(bytes, 0, len)); } } } } 其中 BufferedInputStream 对读取数据进行了增强。 这样看来,装饰器设计模式和代理模式似乎有点相似,接下来让我们讨论一下它们之间的区别。 第三,与代理模式的区别: 代理模式的目的是控制对对象的访问,它在对象外部提供一个代理对象来控制对原对象的访问。代理对象和原始对象通常实现相同的接口或继承相同的类,以确保两者可以相互替换。 装饰器模式的目的是动态增强对象的功能,而这是通过对象内部的包装器来实现的。在装饰器模式中,装饰器类和被装饰对象通常实现相同的接口或继承自相同的类,以确保两者可以相互替代。装饰器模式也被称为封装器模式。 在代理模式中,代理类附加了与原类无关的功能。
-
Print.js javascript 库实现页面打印