学习js的第23天【设计模式，观察者模式，发布订阅者模式】-CSDN博客

本文链接：https://blog.csdn.net/m0_68488342/article/details/126879855

一、设计模式：以前的程序员在开发项目过程中遇到问题总结出来的一套解决方案(特定代码写法)

1.创建型模式：提供了一种在创建对象的同时隐藏创建逻辑的方式，而不是使用new运算符直接实例化对象

2.结构型模式：研究类和对象

3.行为型模式：关注对象之间的通信

单例模式：确保整个应用程序中只有一个实例存在

 class CreateDiv {
            static getInstance() {
                if (this.instance == null) {
                    this.instance = new CreateDiv()   //不存在就创建一个
                }
                return this.instance
            }
            constructor() {
                this.divEle = document.createElement('div') //创建div
                document.body.appendChild(this.divEle) //添加div到body
            }
            init(context) { //显示内容
                this.divEle.innerHTML = context
            }
        }
        let d1 = CreateDiv.getInstance()
        d1.init('hello') //调用内容，显示

观察者模式：研究的是对象与对象之间的关系

当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新

 class Star{
            constructor(name){
                this.list=[]    //存储粉丝对象
                this.name=name
            }
            //添加粉丝对象
            add(obj){
                this.list.push(obj)   //把粉丝push到list数组中存储
            }
            //更新状态
            updateState(message){
                this.list.forEach(function(obj){
                    obj.receive(message)        //每个粉丝都能接收到
                })
            }
        } 
        //粉丝类，观察者
        class Observer{
            constructor(name){
                this.name=name
            }
            //接收消息
            receive(msg){
                console.log(this.name+'看到'+msg+'的消息很心烦')
            }
        }
        //创建那个明星
        let lyf=new Star('李易峰')
        //创建粉丝
        let xiaoli=new Observer('小李')
        //关注明星,加入粉丝团
        lyf.add(xiaoli)     //把小李加入到粉丝团那个数组中
        //明星发布消息，更新状态
        lyf.updateState(lyf.name+'塌房')

发布订阅模式：

发布/订阅模式

发布者 -> 消息事件中心 -> 订阅者

不同类型 -> 订阅者

按钮点击事件

发布者(点击按钮的人)

|

事件处理中心

|

订阅者(按钮)

三部份组成 :

发布者 : 负责发布消息事件中心

订阅者 : 订阅事件处理中心消息

事件处理中心 :

处理不同类型的消息，发送给不同的订阅者

{

消息类型: [消息事件1，消息事件2]

click: [执行订阅的消息1,执行订阅的消息2],

mousemove:[...]

}

订阅消息

向事件对象添加一条数据

发布消息

触发指定类型消息

 class EventCenter {
            //事件处理中心：处理不同类型的消息，发送给不同的订阅者
            constructor() {
                this.subs = {}
            }
            //订阅消息
            //type[执行消息1，执行消息2]
            addEvent(type, even) {
                if (!this.subs[type]) {
                    this.subs[type] = []
                }
                this.subs[type].push(even)
            }
            //发布消息
            emitEVent(type){
                if(this.subs[type]){
                    this.subs[type].forEach(function(even){
                        even()
                    })
                }
            }
        }
        let eventCenter=new EventCenter()
        //订阅类型为click的事件
        eventCenter.addEvent('click',function(){
            console.log('执行消息')
        })
        //发布消息
        eventCenter.emitEVent('click')