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

·  阅读 737
学习JavaScript 设计模式 - 观察者模式

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

定义

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

生活场景

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

u=1766287432,3501390141&fm=26&fmt=auto.webp

src=http___upload-images.jianshu.io_upload_images_4293212-7fcb00daa7d925a8.png&refer=http___upload-images.jianshu.jpg

上面案例范闲就是发布者

    // 创建一个爱豆 类
    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 )
   
复制代码

最后就是漫长的等待, 等待啥? 等待给爱豆点赞呀!!!

ceeb653ely1fu5pgbiklvj20660860v3.jpg

006hL0SXgy1gcljz3seeig308004mqth.gif








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


    FX.notify('出新歌了')   //所有粉丝都收到消息: 范闲出新歌了, 赶紧去点赞啊!! 冲冲冲!!! 
    
    
复制代码

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

src=http___pic.qcsdn.com_img_20190514_913d0e7c7a69a3b6709ec32902f1edaa.png&refer=http___pic.qcsdn.jpg

小结

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

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

最后的轻语

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

image.png

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改