关于javascript:观察者模式与发布订阅模式简易版

网上的大部分例子有些太官网，说切实的有点不好了解，说下集体浅显见解

观察者模式

这是一个女神和备胎们的故事

class Girl {constructor() {this.backupList = [] // 备胎列表
    }
    add(person) {  // 退出备胎
        this.backupList.push(person)
    }
    remove(person) {  // 踢出备胎
        let index = this.backupList.findIndex(item=>item===person)
        index > -1 && this.backupList.splice(index,1)
    }
    sendMsg(msg) {  // 给备胎发消息
        for(let o of this.backupList) {o.update(msg)
        }
    }
}
class Person {constructor(name) {this.name = name  // 备胎的名字}
    update(msg) {
        // 备胎收到女神的音讯
        console.log(` 我是 ${this.name}, 女神给我说:${msg}`)
    }
}
let lisa = new Girl()
let person1 = new Person('阿天')
let person2 = new Person('阿狗')
lisa.add(person1)
lisa.add(person2)
lisa.sendMsg('我想有个家')

女神 Lisa 的角色就是一个“观察者”，她发现她中奖了，所以发了音讯给备胎们

长处：一对多，升高耦合

公布订阅模式

这是一个相亲机构的故事

let agent = {list: {}, // 订阅者容器
    on(key, fn) { // 增加订阅者
        if(!this.list[key])this.list[key] = []
        this.list[key].push(fn)
    },
    off(key,fn){ // 移除订阅者
        let fnList = this.list[key]
        if(!fnList)return
        if(!fn) { // 如果没有具体的订阅者，则移除全副
            fnList.length = 0
        }else {fnList.forEach((item,index) => {item === fn && fnList.splice(index,1)
            })
        }
    },
    trigger(key, ...args) { // 公布
        for(let fn of this.list[key])fn.call(this,...args)
    }
}

知识点：此时呈现了“字面量模式”

此时有两位男士订阅了该机构，关键词别离是“年老”和“好身材”

agent.on('young',info=>{console.log(` 有一个新公布：姓名：${info.name}，年龄：${info.age}`)
})
agent.on('body',info=>{console.log(` 有一个新公布：姓名：${info.name}，胸围：${info.bust}`)
})

又有两位女士来到该机构公布了她们的信息

agent.trigger('young',{
    name: '圆圆',
    age: '18'
})
agent.trigger('body',{
    name: '希希',
    bust: '88'
})

同时，两位订阅的男士就收到了公布的信息

 有一个新公布：姓名：圆圆，年龄：18
有一个新公布：姓名：希希，胸围：88

长处：多对多，耦合更低

on,off,trigger 不就是 Jquery 中绑定事件嘛，所以它就是典型的公布订阅模式

区别

公布订阅模式比观察者模式多了一个中间层，耦合更低，我的项目越大，劣势就更显著，而且这个中间层还能提取进去作为一个独自的文件写各种操作