js设计模式:观察者模式-Toy模板网

这篇具有很好参考价值的文章主要介绍了js设计模式:观察者模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

作用:

和发布订阅模式基本类似。

当某一对象状态发生变化时,所有的观察者都会收到通知。

vue响应式原理就是很经典的案例,数据发生变化,通知各个依赖。

示例:

        class TaobaoShop{
            constructor(){
                this.list = []
            }
            addSub(name,data){
              this.list.push({name,data})
            }
            pubUser(name,data){
                this.list.find(item=>item.name === name).data.awaitMsg(data)
            }
        }

        class User{
            constructor(name){
                this.name = name
            }
            awaitMsg(msg){
            console.log(`我是${this.name},商家通知我有货了,消息如下:${msg}`)
            awaitHandler(this.name)
            }
        }
        
        function awaitHandler(name){
         switch(name){
            case '王惊涛':
                console.log('可以开心的去学习react了')
                break
            case '孙悟空':
                console.log('可以开心的去学习打妖怪了')
         }

        }

        const tb = new TaobaoShop()
        const wjt = new User('王惊涛')
        const sunwukong = new User('孙悟空')
        tb.addSub('王惊涛',wjt)
        tb.addSub('孙悟空',sunwukong)
        tb.pubUser('王惊涛','王先生,您的《react从入门到精通》有货了')
        tb.pubUser('孙悟空','孙大圣,您的《72变化从入门到精通》有货了')

        //跟发布订阅模式类似
        //客户订阅淘宝的消息,就在淘宝商家处添加一个通知名单list,对象格式为{通知人:事件对象}
        //然后根据用户去通知不同的内容,用户获取通知后,可以调用awaitHandler做出自己后续想做的事
        //其实核心就是将观察者中定义的函数保存到通知者身上,在发通知的时候调用这个函数

js设计模式:观察者模式,js设计模式,设计模式,javascript 文章来源地址https://www.toymoban.com/news/detail-826143.html