js的觀察者模式

sihai 發(fā)布于2019-08-23 15:11 / 1486人閱讀

摘要：聲明主題對象注冊觀察者觀察者訂閱了本主題觀察者取關(guān)取關(guān)了本主題在某些特定的時(shí)候由主題向所有的訂閱者發(fā)布事件供主題調(diào)用的事件觀察者更新了信息信息為觀察者進(jìn)行了初始化觀察者開始玩起了實(shí)例化一個(gè)主題實(shí)例化三個(gè)觀察者對象張三李四趙六天命圈觀察者張三

            //聲明主題對象
            var Subject = function(name) {
                this.name = name
                this.register = []
            }
            Subject.prototype = {
                //注冊觀察者
                submit(observe) {
                    this.register.push(observe)
                    console.log("觀察者" + observe.id + "訂閱了本主題")
                    return this
                },
                //觀察者取關(guān)
                unsubmit(observe) {
                    var that = this
                    this.register.map(function(name, index) {
                        if (name == observe) {
                            that.register.splice(index, 1)
                            console.log(name.id + "取關(guān)了本主題")
                        }
                    })
                    return this
                },
                //在某些特定的時(shí)候,由主題向所有的訂閱者發(fā)布事件
                radioOn(name, value) {
                    this.register.map(rg => {
                        rg[name](value)
                    })
                    return this
                }
            }
            
            var Observe = function(id) {
                this.id = id
            }
            //供主題調(diào)用的事件
            Observe.prototype = {
                updata(msg) {
                    console.log("觀察者" + this.id + "更新了信息,信息為" + msg)
                },
                init() {
                    console.log("觀察者" + this.id + "進(jìn)行了初始化")
                },
                play(type) {
                    console.log("觀察者" + this.id + "開始玩起了" + type)
                }
            }
            //實(shí)例化一個(gè)主題
            var subject1 = new Subject("PUBG")
            
            //實(shí)例化三個(gè)觀察者對象
            var observe1 = new Observe("張三")
            var observe2 = new Observe("李四")
            var observe3 = new Observe("趙六")
            
            subject1.submit(observe1)
                    .submit(observe2)
                    .radioOn("init")
                    .radioOn("updata", "天命圈hhh")
                    .unsubmit(observe1)
                    .submit(observe3)
                    .radioOn("play", subject1.name)
            /*    觀察者張三訂閱了本主題
            *     觀察者李四訂閱了本主題
            *     觀察者張三進(jìn)行了初始化
            *     觀察者李四進(jìn)行了初始化
            *     觀察者張三更新了信息,信息為天命圈hhh
            *     觀察者李四更新了信息,信息為天命圈hhh
            *     張三取關(guān)了本主題
            *     觀察者趙六訂閱了本主題
            *     觀察者李四開始玩起了PUBG
            *     觀察者趙六開始玩起了PUBG
            */