当前位置: 首页 > article >正文

【设计模式】工厂模式、单例模式、观察者模式、发布订阅模式

1.工厂模式

class Factory{
    createProduct(name){
        return new Product(name);
    }
}
class Product{
    constructor(name){
        this.name=name;
    }
    display(){
        console.log(`product:${this.name}`);
    }
}

//使用
const factory=new Factory();
const p1=factory.createProduct('P1');
const p2=factory.createProduct('P2');
p1.display()
p2.display()

2.单例模式

class Singleton{
    static instance=null;
    constructor(){
        if(Singleton.instance){
            return Singleton.instance
        }
        Singleton.instance=this;
    }
}

//使用
const instance1=new Singleton()
const instance2=new Singleton()

3.观察者模式

class Subject{
    constructor(){
        this.observers=[];
    }
    addObserver(observer){
        this.observers.push(observer);
    }
    removerObserver(observer){
        this.observers=this.observers.filter(obs=>obs!==observer);
    }
    notifyObserver(){
        this.observers.forEach(obs=>obs.update());
    }
}

class Observer{
    constructor(name){
        this.name=name;
    }
    update(){
        console.log(`Observer ${this.name} has been notified`);
    }
}
//使用
const subject=new Subject();
const observer1=new Observer('1');
const observer2=new Observer('2');
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObserver();

4.发布订阅模式

class Broker{
    constructor(){
        this.subscribers=[];
        this.state=0;
    }
    subscribe(subscriber){
        this.subscribers.push(subscriber);
    }
    setState(state){
        this.state=state;
        this.publish();
    }
    getState(){
        return this.state;
    }
    publish(){
        this.subscribers.forEach(sub=>sub.update());
    }
}

class Publisher{
    constructor(){}
    changeState(broker,state){
        broker.setState(state);
    }
}

class Subscriber{
    constructor(name,broker){
        this.name=name;
        this.broker=broker;
        this.broker.subscribe(this);
    }
    update(){
        console.log(`${this.name}:${this.broker.getState()}`);
    }
}
//使用
const broker=new Broker();
const publish=new Publisher();
const subscribe1=new Subscriber('s1',broker);
const subscribe2=new Subscriber('s2',broker);
publish.changeState(broker,1);

http://www.kler.cn/news/316107.html

相关文章:

  • C++_继承详解
  • 构建智能化直播美颜工具:视频美颜SDK的开发指南
  • 灯塔:JavaScript
  • C++:多态(协变,override,final,纯虚函数抽象类,原理)
  • 10 vue3之全局组件,局部组件,递归组件,动态组件
  • 博睿谷IT认证-订阅试学习
  • 利用H5无插件播放RTSP流的实现方案
  • Vue3 路由传参:玩转 params,让页面交互更流畅!
  • 什么是堡垒机?运维为什么需要堡垒机?
  • ES 索引或索引模板
  • 【图像匹配】基于SIFT算法的图像匹配,matlab实现
  • ECMAScript与JavaScript的区别:深入解析与代码实践
  • 出厂非澎湃OS手机解BL锁
  • STM32篇:通用输入输出端口GPIO
  • 智谱清影的魅力:使用CogVideoX-2b生成6秒视频的真实体验!
  • 信息安全工程师(10)网络信息安全法律与政策文件
  • jvm中的程序计数器、虚拟机栈和本地方法栈
  • Spring8-事务
  • git安装geographiclib失败解决办法
  • GPT对话知识库——编写IIC驱动的过程
  • 位图与布隆过滤器
  • docker minio启动命令
  • ARM/Linux嵌入式面经(三六):中科曙光
  • Docker:安装Apache Pulsar 消息队列的详细指南
  • Python 课程16-Pygame
  • LabVIEW软件维护的内容是什么呢?
  • [2025]基于微信小程序慢性呼吸系统疾病的健康管理(源码+文档+解答)
  • 【数据结构与算法 | 灵神题单 | 栈基础篇】力扣155, 1472, 1381
  • 微信小程序03-页面交互
  • vue3中使用iframe不成功的问题