観察者モードと購読モード(簡易版)

ネット上のほとんどの例はあまりにも公式的で、ちょっと分かりにくいです.個人的な見解を言います.
観察者モード
これは女神と子守たちの物語です.

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)
    }
}

知識点:この時「字面量モデル」が現れました.
男性2人がこの機関に購読しています.キーワードは「若い」と「いい体つき」です.

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中のバインディングイベントではないですか?だからそれは典型的なリリース購読モードです.
違います
購読モードを発表するのは観察者モードより一つの中間層が多くなり、結合がより低くなり、プロジェクトが大きくなればなるほど、利点がより明確になり、またこの中間層は単独のファイルとして各種の操作を行うことができる.