文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js观察者模式的介绍及使用

2024-04-02 19:55

关注

一、定义

观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象(通知者)。这个主题对象观察到被观察者发生变化时,会通知所有的观察者对象,使它们能够自己更新自己

这里涉及了几个角色及他们自己功能:

  1. 观察者对象:可以更新自己
  2. 主题对象:可以添加观察者,移除观察者,通知观察者
  3. 被观察者:被主题对象监视,当被观察者发生变化时,主题对象会通知观察者更新自己的状态

二、使用场景

当一个对象改变需要同时改变其他对象的时候,而且不需要知道有多少个对象需要改变

三、举个例子

如果干巴巴的概念描述晦涩难懂,举个生活中常见的例子说明一下

场景1:

​ 写字楼中,电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛,时不时激动的大喊大叫。此时,老板出差回来,刚好碰个正着,场面一度尴尬。

解决方案:

​ 为了避免在公司划水摸鱼时,被进门的老板抓到,几个人想了个方案,贿赂前台小姐姐。当老板以后再进公司门的时候,小姐姐立马通知程序员们,让他们恢复到工作的状态

场景2:

​ 写字楼中,电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛,时不时激动的大喊大叫。此时,老板出差回来。前台小姐姐看到老板回来,立马给看球赛的小哥哥们发通知。此时小哥哥们赶紧切换成工作的状态。

场景2就是使用了观察者模式。当老板回来时,程序员们需要改变划水的状态,由前台小姐姐负责通知他们

人物 角色 功能
程序员 观察者 可以改变自己的状态
前台小姐姐 主题(通知者) 收集、移除及保存需要通知的程序员(观察者),给程序员发送通知
老板 被观察者 被前台小姐姐观察

通过案例应该分清观察者模式中的各个对象及各个对象的功能了。接下来进行coding

四、Coding

1、前台小姐姐类(通知者类)



class Dep {
    constructor() {
        //存储观察者
        this.subs = []
    }

    
    addSubs(sub) {
        //确保观察者都有update方法
        if (sub && sub.update) {
            this.subs.push(sub)
        }
    }

    
    removeSub(sub) {
        this.subs.forEach((item, index) => {
            if (sub.id === item.id) {
                this.subs.splice(index, 1)
                return;
            }
        })
    }

    
    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}

2、程序员类(观察者类)



class watcher {
    constructor(name) {
        this.name = name
    }

    //观察者对象都有自己的update方法,来改变自己的工作状态
    update() {
        console.log(`${this.name}收到通知,改变工作状态。`)
    }
}

class watcher {
    constructor(name) {
        this.name = name
    }

    //观察者对象都有自己的update方法,来改变自己的工作状态
    update() {
        console.log(`${this.name}收到通知,改变工作状态。`)
    }
}

3、模拟老板回公司,前台小姐姐通知程序员


 <script src="./js/Dep.js"></script>
 <script src="./js/Watcher.js"></script>
 <script>
        //同事张三
        const tongshi1 = new watcher("张三")

        //同事李四
        const tongshi2 = new watcher("李四")

        //前台小姐姐要知道哪些同事需要通知,把需要通知的同事收集起来
        const xiaojiejie = new Dep();
        xiaojiejie.addSubs(tongshi1)
        xiaojiejie.addSubs(tongshi2)

        //等待老板归来....
        //等等等....
        //等等等....
        //等等等....
        //等等等....
        //老板回来了

        //当老板回来时,前台小姐姐调用自己的notify方法通知程序员们 改变自身状态
        xiaojiejie.notify()
    </script>

到此这篇关于java设计模式之观察者模式的介绍及使用背景的文章就介绍到这了,更多相关观察者模式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯