观察者模式 简介

最新推荐文章于 2024-07-17 09:44:02 发布
最新推荐文章于 2024-07-17 09:44:02 发布
阅读量65 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/120742976
版权 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <script>
        // 普通观察者模式
        // 发布者
        let rose = {
            // 存储内容 
            user: [],
            addUser: function (fn) {
                if (typeof (fn) !== 'function') {
                    throw '非法操作!'
                }
                this.user.push(fn);


            },
            removeUser: function (fn) {
                if (typeof (fn) != 'function') {
                    throw '非法操作!'
                }

                for (let i = 0; i < this.user.length; i++) {
                    if (this.user[i] == fn) {
                        this.user.splice(i, 1);
                    }
                }

            },
            // 执行方法 全部执行
            eat: function () {
                for (let i = 0; i < this.user.length; i++) {
                    this.user[i]()
                }
            }
        }

        // 观察者
        let jack_eat = {
            eat: function () {
                console.log('jack去吃饭了!')
            }
        }

        let tom_eat = {
            eat: function () {
                console.log('tom去吃饭了!')
            }

        }

        // 注册观察者
        rose.addUser(jack_eat.eat)
        rose.addUser(tom_eat.eat)

        // 执行
        rose.eat()

        // 解除观察者
        rose.removeUser(tom_eat.eat)
        // 执行
        rose.eat()
    </script> -->
    <!-- <script>
        //  多个发布者

        // 发布者模板
        let publiUser = {
            user: [],
            addUser: function (fn) {
                if (typeof fn != 'function') {
                    throw '非法参数!'
                }
                this.user.push(fn)
            },
            removeUser: function (fn) {
                for (let i = 0; i < this.user.length; i++) {
                    if (this.user[i] == fn) {
                        this.user.splice(i, 1)
                    }
                }
            },
            eat: function () {
                for (let j = 0; j < this.user.length; j++) {
                    this.user[j]()
                }
            }

        }

        let rose = {};
        let wml = {};

        // 制造发布者模式  hasOwnProperty
        function makePublisher(obj) {
            for (let key in publiUser) {
                // if (publiUser.hasOwnProperty(key)) {
                //     obj[key] = publiUser[key]
                // }
                // 拷贝上面的内容( use:[]) 是数组 引用类型 数据共享 需要手动添加
                if (publiUser.hasOwnProperty(key) && typeof (publiUser[key]) == 'function') {
                    obj[key] = publiUser[key]
                }

            }
            // 手动添加
            obj.user = []
        }

        // function makePublisher(obj) {
        //     console.log(JSON.stringify(publiUser), '===stringify') // 转化 引用的基础数据 函数时特殊的引用类型
        //     obj = JSON.parse(JSON.stringify(publiUser))

        // }



        // 让rose成为发布者
        makePublisher(rose);
        console.log(rose, '=========rose')
        makePublisher(wml);


        // 发布者

        let jack = {
            eat: function () {
                console.log('jack,吃饭了')
            }
        }

        let tom = {
            eat: function () {
                console.log('tom,吃饭了')
            }
        }

        rose.addUser(jack.eat)
        rose.addUser(tom.eat)

        rose.eat()
        wml.eat()
    </script> -->

    <!-- <script>
        // 多状态 发布模式
        let rose = {
            user: {
                sleep: [],
                run: []
            },

            adduser: function (fn, type) {
                if (typeof (fn) != 'function') {
                    throw '非法操作!'
                }

                if (type in this.user) {
                    this.user[type].push(fn)
                }
            },
            removeUser: function (fn, type) {
                if (!this.user.hasOwnProperty(type)) {
                    for (let i = 0; this.user[type].length; i++) {
                        if (this.user[type][i] == fn) {
                            this.user[type].splice(i, 1)
                            break;
                        }
                    }

                }
            },

            sleep: function () {
                for (let j = 0; j < this.user['sleep'].length; j++) {
                    this.user['sleep'][j]()
                }
            },
            run: function () {
                for (let k = 0; k < this.user['run'].length; k++) {
                    this.user['run'][k]()
                }
            }



        }


        // 发布者模式
        let jack = {
            sleep: function () {
                console.log('jack 睡觉了!')
            },
            run: function () {
                console.log('jack 跑步了')
            }
        }
        let tom = {
            sleep: function () {
                console.log('tom,睡觉!')
            },
            run: function () {
                console.log('tom,跑步!')
            }
        }


        // 添加
        rose.adduser(jack.sleep, 'sleep')
        rose.adduser(jack.run, 'run')

        rose.sleep()
        rose.run()

        console.log('=============')
        rose.adduser(tom.sleep, 'sleep')
        rose.adduser(tom.run, 'run')
        rose.sleep()
        rose.run()

    </script> -->
    <script>
        // 多状态 发布模式(加强版)
        let rose = {
            // 事物集合
            user: {},
            // 事件集合
            event: {},
            adduser: function (fn, type) {
                if (typeof (fn) != 'function') {
                    throw '非法操作!'
                }
                if (this.user.hasOwnProperty(type)) {
                    this.user[type].push(fn)
                } else {
                    this.user[type] = [fn]
                }


                // 初始化方法
                this.event = this.all()

            },
            removeUser: function (fn, type) {
                if (!this.user.hasOwnProperty(type)) {
                    for (let i = 0; this.user[type].length; i++) {
                        if (this.user[type][i] == fn) {
                            this.user[type].splice(i, 1)
                            break;
                        }
                    }

                }
                this.event = this.all()
            },

            all: function () {
                let obj = {}
                let that = this;
                for (let key in this.user) {
                    obj[key] = function () {
                        for (let j = 0; j < that.user[key].length; j++) {
                            that.user[key][j]()
                        }
                    }
                }
                return obj
            }

        }


        // 发布者模式
        let jack = {
            sleep: function () {
                console.log('jack 睡觉了!')
            },
            run: function () {
                console.log('jack 跑步了')
            },
            pig: function () {
                console.log('tom,pig!')
            }
        }
        let tom = {
            sleep: function () {
                console.log('tom,睡觉!')
            },
            run: function () {
                console.log('tom,跑步!')
            },
            pig: function () {
                console.log('tom,pig!')
            }
        }


        // 添加
        rose.adduser(jack.sleep, 'sleep')
        rose.adduser(jack.run, 'run')
        rose.adduser(jack.pig, 'pig')


        rose.event.run()
        rose.event.sleep()
        rose.event.pig()

        console.log('=============')
        rose.adduser(tom.sleep, 'sleep')
        rose.adduser(tom.run, 'run')
        rose.event.sleep()
        rose.event.run()

    </script>
    </script>
</body>

</html>

观察者模式实现(多个状态)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-观察者模式实现01(基础版本)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

 步骤:
    1.提供一个发布者
    2.提供一个观察者
    3.注册观察者(建立发布者和观察者之间的联系)
    4.发布者发布信息

女神: Rose
男生 :
Jack
Tom

 思考:2个发布者
    提供一个发布者模板!

 思考:多个状态??????
<script>
    // 1.提供一个发布者模板
    var publisher = {
        user : {
            eat : [],
            sleep : []
        },
        addUser : function (fn,type) {
            var type = type || 'eat';
            if(typeof fn != 'function'){
                throw '非法操作!';
            }
            this.user[type].push(fn);
        },
        removeUser : function (fn,type) {
            var type = type || 'eat';
            for (var i = 0; i < this.user[type].length; i++) {
                if(this.user[type][i] == fn){
                    this.user[type].splice(i,1);
                }
            }
        },
        // 发布信息
        eat : function () {
            for (var i = 0; i < this.user['eat'].length; i++) {
                this.user['eat'][i]();
            }
        },
        sleep : function () {
            for (var i = 0; i < this.user['sleep'].length; i++) {
                this.user['sleep'][i]();
            }
        }
    }

    var rose = {};
    var wml = {};

    // 2.封装一个函数快速创建发布者
    function makePublisher(obj) {
        for(var key in publisher){
            // 只需要拷贝实例方法
            if(publisher.hasOwnProperty(key) && (typeof publisher[key] == 'function')){
                obj[key] = publisher[key];
            }
        }
        // 手动添加
        obj.user = {
            eat : [],
            sleep : []
        };
    }

    // 让rose成为发布者
    makePublisher(rose);
    makePublisher(wml);


    // 2.提供一个观察者
    var jack = {
        jack_eat : function () {
            console.log('邀请女神吃大餐!--Jack');
        },
        jack_sleep : function () {
            console.log('晚安!-rose!-Jack');
        }
    }

    var tom = {
        tom_eat : function () {
            console.log('邀请女神吃麻辣烫!--tom');
        },
        tom_sleep : function () {
            console.log('带你去看星星!-tom');
        }
    }

    // 3.注册观察者(建立发布者和观察者之间的联系)
    rose.addUser(jack.jack_eat,'eat');
    rose.addUser(jack.jack_sleep,'sleep');
    rose.addUser(tom.tom_sleep,'sleep');
    // 4.发布者发布信息
//    rose.eat();
    rose.sleep();

    // 5.移除观察者
    rose.removeUser(tom.tom_sleep,'sleep');

    console.log('---');
    rose.sleep();





</script>
</body>
</html>

观察者模式实现(优化)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-观察者模式实现01(基础版本)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

 步骤:
    1.提供一个发布者
    2.提供一个观察者
    3.注册观察者(建立发布者和观察者之间的联系)
    4.发布者发布信息

女神: Rose
男生 :
Jack
Tom

 思考:2个发布者
    提供一个发布者模板!

 思考:多个状态??????
<script>
    // 1.提供一个发布者模板
    var publisher = {
        addUser : function (fn,type) {
            var type = type || 'eat';
            if(typeof fn != 'function'){
                throw '非法操作!';
            }

            if(this.user[type] == undefined){
                this.user[type] = [];
            }

            this.user[type].push(fn);
        },
        removeUser : function (fn,type) {
            this.publish(type,fn);
        },
        // 发布信息|| 移除观察者
        publish : function (type,fn) {
            var type = type || 'eat';
            for (var i = 0; i < this.user[type].length; i++) {
                if(typeof fn == 'function'){
                    // 移除观察
                    if(this.user[type][i] == fn){
                        this.user[type].splice(i,1);
                    }
                } else {
                    // 发布信息
                    this.user[type][i]();
                }
            }
        }
    }

    var rose = {
        // 发布信息
        eat : function () {
            this.publish('eat');
        },
        sleep : function () {
            this.publish('sleep');
        },
        run : function () {
            this.publish('run');
        }
    };
    var wml = {};

    // 2.封装一个函数快速创建发布者
    function makePublisher(obj) {
        for(var key in publisher){
            // 只需要拷贝实例方法
            if(publisher.hasOwnProperty(key) && (typeof publisher[key] == 'function')){
                obj[key] = publisher[key];
            }
        }
        // 手动添加
        obj.user = {};

    }

    // 让rose成为发布者
    makePublisher(rose);
    makePublisher(wml);


    // 2.提供一个观察者
    var jack = {
        jack_eat : function () {
            console.log('邀请女神吃大餐!--Jack');
        },
        jack_sleep : function () {
            console.log('晚安!-rose!-Jack');
        }
    }

    var tom = {
        tom_eat : function () {
            console.log('邀请女神吃麻辣烫!--tom');
        },
        tom_sleep : function () {
            console.log('带你去看星星!-tom');
        },
        tom_run : function () {
            console.log('带你去天河公园跑步!-tom');
        }
    }

    // 3.注册观察者(建立发布者和观察者之间的联系)
//    rose.addUser(jack.jack_eat,'eat');
//    rose.addUser(jack.jack_sleep,'sleep');
//    rose.addUser(tom.tom_sleep,'sleep');
    rose.addUser(tom.tom_run,'run');

    // 4.发布者发布信息
    rose.run();

</script>
</body>
</html>

观察者模式实现(发布者成为观察者)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-观察者模式实现01(基础版本)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

 步骤:
    1.提供一个发布者
    2.提供一个观察者
    3.注册观察者(建立发布者和观察者之间的联系)
    4.发布者发布信息

女神: Rose
男生 :
Jack
Tom

 思考:2个发布者
    提供一个发布者模板!


<script>
    // 1.提供一个发布者模板
    var publisher = {
        addUser : function (fn,type) {
            var type = type || 'eat';
            if(typeof fn != 'function'){
                throw '非法操作!';
            }

            if(this.user[type] == undefined){
                this.user[type] = [];
            }

            this.user[type].push(fn);
        },
        removeUser : function (fn,type) {
            this.publish(type,fn);
        },
        // 发布信息|| 移除观察者
        publish : function (type,fn) {
            var type = type || 'eat';
            for (var i = 0; i < this.user[type].length; i++) {
                if(typeof fn == 'function'){
                    // 移除观察
                    if(this.user[type][i] == fn){
                        this.user[type].splice(i,1);
                    }
                } else {
                    // 发布信息
                    this.user[type][i]();
                }
            }
        }
    }

    var rose = {
        // 发布信息
        eat : function () {
            this.publish('eat');
        },
        sleep : function () {
            this.publish('sleep');
        },
        run : function () {
            this.publish('run');
        },

        // 处理发布者的状态
        rose_lol : function () {
            console.log('是我重要还是游戏重要!-Rose');
        }
    };


    // 2.封装一个函数快速创建发布者
    function makePublisher(obj) {
        for(var key in publisher){
            // 只需要拷贝实例方法
            if(publisher.hasOwnProperty(key) && (typeof publisher[key] == 'function')){
                obj[key] = publisher[key];
            }
        }
        // 手动添加
        obj.user = {};

    }

    // 让rose成为发布者
    makePublisher(rose);

    // 2.提供一个观察者
    var jack = {
        jack_eat : function () {
            console.log('邀请女神吃大餐!--Jack');
        },
        jack_sleep : function () {
            console.log('晚安!-rose!-Jack');
        },

        // 发布信息
        lol : function () {
            this.publish('lol');
        }
    }
    var tom = {
        tom_eat : function () {
            console.log('邀请女神吃麻辣烫!--tom');
        },
        tom_sleep : function () {
            console.log('带你去看星星!-tom');
        },
        tom_run : function () {
            console.log('带你去天河公园跑步!-tom');
        },
        tom_lol : function () {
            console.log('别管Rose了,来开黑把!-tom');
        }
    }

    // 让jack成为发布者
    makePublisher(jack);

    // 3.注册观察者(建立发布者和观察者之间的联系)
    jack.addUser(rose.rose_lol,'lol');
    jack.addUser(tom.tom_lol,'lol');

    // 4.发布信息
    jack.lol();
</script>
</body>
</html>
web修理工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web观察者模式如何实现_Web开发应了解的4种设计模式：观察者，单例，策略和装饰器
cumian8165的博客
08-20 314
Have you ever been on a team where you need to start a project from scratch? That's usually the case in many start-ups and other small companies. 您是否曾经在一个团队中需要从头开始一个项目？ 在许多初创公司和其他小型公司中通常就是这种情况。 Ther...
设计模式之观察者模式（实例+Demo）
aserbao的博客
03-16 1万+
你能从本文了解到如下几个方面：1. 什么是观察者模式？2. 如何使用观察者模式。 3. Java中的观察者模式的使用。 4. 总结。5. 源码 1. 什么是观察者模式？ 观察者模式又被称为发布订阅模式。它定义了对象之间一对多的依赖，当一个对象状态发生改变时，它的所有依赖者都会收到通知并自动更新相关内容。我们可以拿报社来举例：一家报社（Subject）一发布报纸，就会立马派送给所有订报（...
web 观察者模式
java_goodstudy的博客
02-27 1126
介绍一种观察者模式其实观察者模式是一个比较简单的 Publish,Subscribe过程,整个过程概括起来说就是对 对订阅者这个数组的操作，而消息的发布其实就是 遍历订阅者对象调用订阅者本身方法的一个过程,在实际中的应用的话,还需要用setter 方法做一下数据劫持 function Publisher(){ this.observers = [];
观察者模式与事件监听机制
weixin_34396103的博客
07-27 319
一、观察者模式 1.1 概述 有时被称作发布/订阅模式，观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新自己。它类似B/S架构模式，构建一个服务端，多个客户端显示。其实这个主题对象就像是一个信息源，当信息源的状态发送变化时，它会通知所有订阅者，使它们进行相应的处理。在百度百科中的例子是，用户界面可以...
html5调用动态库,观察者方式实现动态库调用
weixin_39991148的博客
06-04 333
最近在项目中，经常用到使用对方提供框架，由自己提供动态库实现的形式，找个空闲的时间讲大概的流程阐述出来，一是为近期的工作总结，二是想获得大家的一些批评和指正。1、外单位提供了一个程序的基础框架，其中实现应该相当复杂，我这里只能做一个大概的猜测。主程序如下，调用了其自身的主动态库：1 intmain()2 {3 HINSTANCE hDll = LoadLibraryA("TestObser...
观察者模式
热门推荐
wonder
07-30 1万+
#include #include #include using namespace std; //QT的和Windows的消息机制都是观察者模式实现的。 //实现原理：有一个监视类，存储了所有观察者对象的地址， //当收到消息的时候就调用每一个类的处理函数对他们进行操作. //观察者模式：观察者模式定义了一种一对多的依赖关系， //让多个观察者对象同时监听某一个主体对象。 //这个主体
观察者模式简介和java代码实现
07-05
在实际应用中，观察者模式常用于事件驱动编程、用户界面的更新、发布/订阅系统、日志记录等多个场景。例如，在GUI编程中，当用户点击按钮时，按钮对象（主题）可以通知事件处理器（观察者）执行特定操作。在发布/...
iOS 设计模式 观察者模式
02-18
观察者模式，也被称为发布-订阅（Publish-Subscribe）模式，是软件设计中的一种行为模式。在iOS开发中，它是一种让多个对象监听或订阅某一个主题对象的状态变化，并在状态变化时自动收到通知的方式。这种模式使得...
C++实现观察者模式
01-20
要通知到需要了解该变化的类，Windows编程中经常用到的是发消息，要是没有Windows的消息机制的话，自己做一套消息机制倒是可以，但也是徒增了工作量，再次想到了设计模式中的观察者模式，也可以实现这个想法，具体...
观察者模式1
08-08
观察者模式，是一种广泛应用在软件设计中的对象行为型模式，其核心思想是让一个对象能够在其状态发生变化时，自动通知所有对其感兴趣的其他对象。这种模式促进了"发布-订阅"概念的实现，允许对象间的解耦，提高代码...
观察者模式笔记1
08-08
观察者模式（Observer Pattern）是软件设计模式中的一种行为模式，它定义了对象之间的一对多依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。这种模式常用于实现事件驱动编程或者...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 761
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
更新商品前端接口编写
weixin_55639995的博客
07-12 417
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 318
解决页面放大，图片模糊的问题
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 787
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 540
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
ReactRouter v6升级的步骤
feixin369的博客
07-14 376
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
高职软件技术实训室
最新发布
whwzzc的博客
07-17 741
当前，软件行业正处于高速发展阶段，对人才的需求呈现出多元化、高精尖的特点。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线html、css、js、jquery、vue等前端开发环境，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线java、python等后台语言，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值