学习JavaScript 设计模式 - 观察者模式

前端开发者可能不怎么区分观察者模式和订阅发布者模式， 但是我这篇我感觉还是属于观察者模式

定义

当对象之间存在一对多的依赖关系， 当一个对象状态发生改变时， 所有的依赖对象（观察者对象） 都将得到通知， 并自动更新

生活场景

比如微信朋友圈， 司理理、海棠朵朵、林婉儿 都加了范闲好友，并且关注了他的朋友圈， 这时候范闲发布了一条想吃鸡腿的动态， 三个妹子看到后马上去买。。。

上面案例范闲就是发布者

    // 创建一个爱豆 类
    class AiDou { 
        constructor(id, name) {
            this.name = name
            this.id = id
            this.friends = []
        }
        //关注他， 让他生、 让他生 ...
        addFriend(person) {
            if (!this.friends.includes(person)) {
                 this.friends.push(person)
            }
        }
        //拉黑删除， 爱豆不可以谈恋爱
        remove(person) {
            for (let i in this.friends) {
                if (person === this.friends[i]) {
                     this.friends.splice(i, 1)
                }
            }
        }
        //通知女粉丝
        notify(msg) {
            this.friends.map(item => {
                item.update(this.name + msg + '，赶紧去点赞啊！！ 冲冲冲！！！')
            })
        }
    }

三个妹子就是观察者

    class Observer {
        constructor(id, name){
            this.id = id
            this.name = name
        }
        //刷新朋友圈
        update(msg) {
             console.log(msg)      
        }
    }
    
    const SLL = new Observer(1, '司理理')
    const HTDD = new Observer(2, '海棠朵朵')
    const LWE = new Observer(3, '林婉儿')

接下来就是勾搭爱豆，扫描它（二维码）， 然后带走他

    const FX = new AiDou(0, '范闲')
    
    //先添加了林婉儿
    FX.addFriend( LWE )
    
    //继续添加 司理理
    FX.addFriend( SLL )
    
    //再添加海棠朵朵
    FX.addFriend( HTDD )
   

最后就是漫长的等待， 等待啥？ 等待给爱豆点赞呀！！！

经过1年的等待， 女粉丝头发都快掉光了， 这时候终于爱豆发新歌了， 通知大家来听！！！

    FX.notify('出新歌了')   //所有粉丝都收到消息： 范闲出新歌了， 赶紧去点赞啊！！ 冲冲冲！！！ 
    
    

最后放一张经典的图， 也是观察者模式经典案例

小结

讲 道 理 写 这 篇 文 章 的 时 候 我 想 了 好 久， 这 个 设 计 模 式 该 怎 么 写 才 简 单 易 懂，最 后 回 归 生 活 例 子

设计模式系列接下来可能要告一段落了， 有时间会不定时更新学习， 接下去马上开启新的篇章了

最后的轻语

为什么很多饮料成分表都标有钠： 身体内是有一定水平的钠离子才能保证人体不脱水