资讯专栏INFORMATION COLUMN

js的观察者模式

sihai / 1476人阅读

摘要:声明主题对象注册观察者观察者订阅了本主题观察者取关取关了本主题在某些特定的时候由主题向所有的订阅者发布事件供主题调用的事件观察者更新了信息信息为观察者进行了初始化观察者开始玩起了实例化一个主题实例化三个观察者对象张三李四赵六天命圈观察者张三

            //声明主题对象
            var Subject = function(name) {
                this.name = name
                this.register = []
            }
            Subject.prototype = {
                //注册观察者
                submit(observe) {
                    this.register.push(observe)
                    console.log("观察者" + observe.id + "订阅了本主题")
                    return this
                },
                //观察者取关
                unsubmit(observe) {
                    var that = this
                    this.register.map(function(name, index) {
                        if (name == observe) {
                            that.register.splice(index, 1)
                            console.log(name.id + "取关了本主题")
                        }
                    })
                    return this
                },
                //在某些特定的时候,由主题向所有的订阅者发布事件
                radioOn(name, value) {
                    this.register.map(rg => {
                        rg[name](value)
                    })
                    return this
                }
            }
            
            var Observe = function(id) {
                this.id = id
            }
            //供主题调用的事件
            Observe.prototype = {
                updata(msg) {
                    console.log("观察者" + this.id + "更新了信息,信息为" + msg)
                },
                init() {
                    console.log("观察者" + this.id + "进行了初始化")
                },
                play(type) {
                    console.log("观察者" + this.id + "开始玩起了" + type)
                }
            }
            //实例化一个主题
            var subject1 = new Subject("PUBG")
            
            //实例化三个观察者对象
            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)
            /*    观察者张三订阅了本主题
            *     观察者李四订阅了本主题
            *     观察者张三进行了初始化
            *     观察者李四进行了初始化
            *     观察者张三更新了信息,信息为天命圈hhh
            *     观察者李四更新了信息,信息为天命圈hhh
            *     张三取关了本主题
            *     观察者赵六订阅了本主题
            *     观察者李四开始玩起了PUBG
            *     观察者赵六开始玩起了PUBG
            */

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101655.html

相关文章

  • JS设计模式之Obeserver(察者模式、Publish/Subscribe(发布/订阅)模式

    摘要:观察者模式定义设计模式中对的定义一个对象称为维持一系列依赖于它观察者的对象,将有关状态的任何变更自动通知给它们。如图模式比较观察者模式则多了一个类似于话题调度中心的流程,发布者和订阅者解耦。 Obeserver(观察者)模式 定义 《js设计模式》中对Observer的定义:一个对象(称为subject)维持一系列依赖于它(观察者)的对象,将有关状态的任何变更自动通知给它们。 《设计模...

    荆兆峰 评论0 收藏0
  • JS 察者模式

    摘要:使用观察者模式的好处支持简单的广播通信,自动通知所有已经订阅过的对象。总的来说,观察者模式所做的工作就是在解耦,让耦合的双方都依赖于抽象,而不是依赖于具体。 1. 介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。 使用...

    mist14 评论0 收藏0
  • JS 设计模式 十三(察者模式

    摘要:观察者模式对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。具体主题角色在具体主题内部状态改变时,给所有登记过的观察者发出通知。 观察者模式 对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 观察者要素 1.抽象主题(Subject)角色:把所有对观察者对象的引用保存在一个集合中,每个...

    shleyZ 评论0 收藏0
  • 简单理解察者模式(pub/sub)在前端中应用

    摘要:概念观察者模式被广泛地应用于客户端编程中。所有的浏览器事件,等都是使用观察者模式的例子。在观察者模式中,一个对象订阅另一个对象的指定活动并得到通知,而不是调用另一个对象的方法。此外,观察者模式还可用于实现数据绑定。 概念 观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件(mouseover,keypress等)都是使用观察者模式的例子。这种模式的另一个名字叫自...

    guyan0319 评论0 收藏0
  • JS每日一题:设计模式-如何理解察者(发布订阅)模式?

    摘要:期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期 设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一...

    baishancloud 评论0 收藏0
  • js设计模式 --- 发布订阅模式(察者模式)

    摘要:由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。总的来说,观察者模式所做的工作就是在解耦,让耦合的双方都依赖于抽象,而不是依赖于具体。 发布订阅模式 发布订阅模式又叫观察者模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题...

    EasonTyler 评论0 收藏0

发表评论

0条评论

sihai

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<