【备忘】js实现 观察者模式 与 发布订阅模式

观察者与发布订阅的异同：

1. 观察者简言之，就是多个角色间互相监听，也就是说，任何一个角色（对象）变化，其他的都可以知道。

2. 发布订阅为，创建一个中心角色，其余角色的通信都经过中心角色进行。

相同点： 都是角色间进行观察（通信，监听）

不同点：观察者是所有角色互相观察（通信，监听），发布订阅则是在观察者基础上，由统一角色进行观察（通信，监听）。

总结：观察者模式可以算作是发布订阅模式的超集（即观察包括发布订阅），发布订阅可以算是观察者的一个分支，但因其应用广泛，渐渐的被承认为一个单独的设计模式。

 

观察者模式简单实现：

            // 创建构造函数
            let People = function (pn,pa) {
                this.name = pn
                this.age = pa
            }
            // 调用此方法生产people
            let CreatePeople = function (name,age,say) {
                // 储存所有成员
                if(People.prototype.peopleList){
                    People.prototype.peopleList.push({
                        name,
                        age,
                        say
                    })
                } else {
                    People.prototype.peopleList = [{name, age, say}]
                }
                // 为成员添加获取所有成员say的方法
                People.prototype.getData = function () {
                    People.prototype.peopleList.forEach(item=>{
                        item.say(this)
                    })
                }
                // 返回处理好的people
                return new People(name,age,say)

            }
            // 创建三个people
            let XiaoMing = CreatePeople('小明',16,(arrow)=>{
                console.log(`我叫${arrow.name}，今年${arrow.age}岁`)
            })
            let XiaoMai = CreatePeople('小埋',16,(arrow)=>{
                console.log(`我叫${arrow.name}，今年${arrow.age}岁`)
            })
            let XiaoGang = CreatePeople('小刚',16,(arrow)=>{
                console.log(`我叫${arrow.name}，今年${arrow.age}岁`)
            })
            // 小明获取所有人的自我介绍
            XiaoMing.getData()

发布订阅简单实现：

             // 消息中心构造函数
            let Construct = function () {
                this.messageCenter = []
                this.log = []
            }
            // 实例化平台消息中心
            let messageCenter = new Construct()
            // 创建用户构造函数
            let User = function (name) {
                this.name = name
            }
            // 为用户添加加入交流平台方法
            User.prototype.join = function(){
                messageCenter.messageCenter.push(this.name)
            }
            // 为用户添加发布言论方法
            User.prototype.say=function (message) {
                if (messageCenter.messageCenter.includes(this.name)) {
                    messageCenter.log.push(`${this.name}: ${message}`)
                } else {
                    console.log('还没登录哦')
                }
            }
            // 为用户添加获取全部订阅用户发言方法
            User.prototype.getAllLog = function (){
                console.log(messageCenter.log)
            }
            // 创建用户及发言
            let XiaoHong = new User('小红')
            XiaoHong.join()
            XiaoHong.say('大家好！')
            XiaoHong.getAllLog()
            let XiaoLi = new User('小李')
            XiaoLi.say('大家好！')
            XiaoLi.getAllLog()

每次想写这两种模式，总是记混。在此简单记录下，细节可能缺少推敲，仅供参考，如有帮助欢迎点赞。