AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript设计模式（十六）：通信卫星-观察者模式

2023-07-21 57
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 通信卫星-观察者模式

观察者模式（Observer）

又被称作发布-订阅者模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合，以及模块间通信问题

实现评论模块

  • 需求：
    1. 当用户发布评论时，会在评论展示模块末尾处追加新的评论;
    2. 与此同时用户的消息模块的消息数量也会递增;
    3. 如果用户删除留言区的信息时，用户的消息模块消息数量也会递减;
  • 存在的问题：
    • 这些模块的代码是三位不同的工程师写的，都写在自己的独立闭包模块里，现在我要完成我的需求，又不想将他们的模块合并到一起
<style>
    ul {
    
    
        list-style: none;
        border: 1px solid #333;
        padding: 5px;
        min-height: 100px;
    }

    ul li {
    
    
        word-break: break-all;
        padding: 5px;
        text-align: justify;
    }

    ul li::before,
    ul li::after {
    
    
        content: "";
        display: block;
        clear: both;
    }

    ul li button {
    
    
        float: right;
    }

    ul li:nth-child(2n) {
    
    
        background-color: #ccc;
    }

    ul li:nth-child(2n + 1) {
    
    
        background-color: #aaa;
    }
</style>

<body>
    <input id="user_input" />
    <button id="user_submit">Submit</button>
    <span id="msg_num"></span>
    <ul id="msg_box"></ul>
    <script src="./index.js"></script>
</body>

实现三位工程师的功能

image.png

// 原三位工程师实现的功能逻辑
function $(id) {
   
   
    return document.getElementById(id);
}

/**
 * 工程师 A
 *      实现了消息列表追加以及删除消息功能
 */
; (function () {
   
   
    /**
     * 追加一则消息，并可对消息进行删除
     * @param {string} msg 消息内容
     */
    function addMsgItem({
   
    msg }) {
   
   
        // 获取评论容器，创建消息条目，创建删除按钮
        const ul = $('msg_box'), li = document.createElement('li'), btn = document.createElement('button');
        // 配置删除按钮文字
        btn.innerText = 'Delete';
        // 删除点击事件 测试执行 ---> 点击进行测试
        btn.onclick = function () {
   
   
            ul.removeChild(li);
        };
        // 添加消息内容
        li.innerText = msg;
        // 添加删除按钮
        li.appendChild(btn);
        // 追加一则消息
        ul.appendChild(li);
    }
    // 测试执行
    addMsgItem({
   
   msg: 'Hello!'});
    addMsgItem({
   
   msg: 'Hi!'});
    addMsgItem({
   
   msg: '你好呀！'});
    addMsgItem({
   
   msg: '我不好呀！'});
    addMsgItem({
   
   msg: '你爱好不好呀！'});
}());

/**
 * 工程师 B
 *      实现了消息数目累加减功能
 */
; (function () {
   
   
    /**
     * 修改消息数量
     * @param {number} count 累加减数量 -1和1
     */
    function changeMsgCount({
   
    count }) {
   
   
        {
   
   mathJaxContainer[0]}('msg_num').innerText) + count;
    }
    // 测试执行
    changeMsgCount({
   
   count: 1});  // 1
    changeMsgCount({
   
   count: 1});  // 2
    changeMsgCount({
   
   count: -1}); // 1
    changeMsgCount({
   
   count: 1});  // 2
}());

/**
 * 工程师 C
 *      实现了消息提交的功能
 */
; (function () {
   
   
    /**
     * 用户点击提交按钮
     *      测试执行 ---> 点击进行测试
     */
    $('user_submit').onclick = function () {
   
   
        // 获取用户输入框中输入的信息
        const msg = $('user_input');
        // 如果输入框内容为空则退出函数
        if (msg.value === '') return;
        console.log(msg.value);
        // 点击完成后将输入框置为空
        msg.value = '';
    };
    // 测试执行 ---> 点击进行测试
}());

使用观察者模式整合这三个功能

image.png

function $(id) {
   
   
    return document.getElementById(id);
}

/**
 * 定义观察者
 */
const Observer = (function () {
   
   
    // 防止消息队列暴漏而被篡改故将消息容器作为静态私有变量保存
    let __messages = {
   
   };
    return {
   
   
        __messages,
        /**
         * 注册消息接口 - 暂存
         * @param {string} type 消息类型
         * @param {Function} fn 消息回调
         */
        regist(type, fn) {
   
   
            // 如果此消息不存在则应该创建一个该消息类型
            if (typeof __messages[type] === 'undefined') {
   
   
                // 将动作推入到该消息对应的动作执行队列中
                __messages[type] = [fn];
            }
            // 如果此消息存在
            else {
   
   
                // 将动作方法推入该消息对应的动作执行序列中
                __messages[type].push(fn);
            }
            return this;
        },
        /**
         * 发布消息接口 - 调用
         * @param {string} type 消息类型
         * @param {object} args 消息携带数据
         */
        fire(type, args) {
   
   
            // 如果该消息没有被注册，则返回
            if (!__messages[type]) return;
            // 遍历消息动作
            for (let i = 0; i < __messages[type].length; i++) {
   
   
                // 依次执行注册的消息对应的动作序列
                __messages[type][i].call(this, args);
            }
        },
        /**
         * 移除消息接口 - 移除
         * @param {string} type 消息类型
         * @param {Function} fn 消息回调
         */
        remove(type, fn) {
   
   
            // 如果消息动作队列存在
            if (__messages[type] instanceof Array) {
   
   
                // 从最后一个消息动作遍历
                for (let i = __messages[type].length - 1; i >= 0; i--) {
   
   
                    // 如果存在该动作则在消息动作序列中移除相应动作
                    __messages[type][i] === fn && __messages[type].splice(i, 1);
                }
            }
        }
    };
}());

/**
 * 工程师 A
 *      实现了消息列表追加以及删除消息功能
 */
; (function () {
   
   
    /**
     * 追加一则消息，并可对消息进行删除
     * @param {string} msg 消息内容
     */
    function addMsgItem({
   
    msg }) {
   
   
        // 获取评论容器，创建消息条目，创建删除按钮
        const ul = $('msg_box'), 
            li = document.createElement('li'), 
            btn = document.createElement('button');
        // 配置删除按钮文字
        btn.innerText = 'Delete';
        // 删除点击事件
        btn.onclick = function () {
   
   
            ul.removeChild(li);
            Observer.fire('减少操作', {
   
    count: -1 });
        };
        // 添加消息内容
        li.innerText = msg;
        // 添加删除按钮
        li.appendChild(btn);
        // 追加一则消息
        ul.appendChild(li);
    }

    // 注册这个功能
    Observer.regist('新增操作', addMsgItem);
}());

/**
 * 工程师 B
 *      实现了消息数目累加减功能
 */
; (function () {
   
   
    /**
     * 修改消息数量
     * @param {number} count 累加减数量 -1和1
     */
    function changeMsgCount({
   
    count }) {
   
   
        console.log(count);
        {
   
   mathJaxContainer[1]}('msg_num').innerText) + count;
    }

    // 分类别注册这个功能（新增的操作作为一个分类，减少的操作作为一个类别）
    Observer.regist('新增操作', changeMsgCount)
        .regist('减少操作', changeMsgCount);
}());

/**
 * 工程师 C
 *      实现了消息提交的功能
 */
; (function () {
   
   
    /**
     * 用户点击提交按钮
     */
    $('user_submit').onclick = function () {
   
   
        // 获取用户输入框中输入的信息
        const msg = $('user_input');
        // 如果输入框内容为空则退出函数
        if (msg.value === '') return;
        Observer.fire('新增操作', {
   
    msg: msg.value, count: 1 });
        // 点击完成后将输入框置为空
        msg.value = '';
    };
}());

console.log(Observer);

理解：

将函数进行分类并缓存成队列（订阅），然后当需要执行指定操作时依次调用同分类的函数方法（发布）。

  • 此模块的实现：
    • regist
      • 订阅 新增类 函数方法（包括发送消息、递增消息数目）；
        • 发送消息: Observer.regist('新增操作', addMsgItem);
        • 递增消息数目: Observer.regist('新增操作', changeMsgCount);
      • 订阅 减法类 函数方法（包括递减消息数目）；
        • 递减消息数目: Observer.regist('减少操作', changeMsgCount);
    • fire
      • 发布 订阅的 新增类 函数方法
        • Observer.fire('新增操作', { msg: msg.value, count: 1 });
      • 发布 订阅的 减法类 函数方法
        • Observer.fire('减少操作', { count: -1 });

对象间解耦

  • 需求（考试）：
    1. 学生考试获得最终的考试结果；
    2. 学生也可以放弃某一学科的考试；
    3. 教师发布考试最终的结果表；

image.png

/**
 * 定义观察者
 */
const Observer = (function () {
   
   
    // 防止消息队列暴漏而被篡改故将消息容器作为静态私有变量保存
    let __messages = {
   
   };
    return {
   
   
        __messages,
        /**
         * 注册消息接口 - 暂存
         * @param {string} type 消息类型
         * @param {Function} fn 消息回调
         */
        regist(type, fn) {
   
   
            // 如果此消息不存在则应该创建一个该消息类型
            if (typeof __messages[type] === 'undefined') {
   
   
                // 将动作推入到该消息对应的动作执行队列中
                __messages[type] = [fn];
            }
            // 如果此消息存在
            else {
   
   
                // 将动作方法推入该消息对应的动作执行序列中
                __messages[type].push(fn);
            }
            return this;
        },
        /**
         * 发布消息接口 - 调用
         * @param {string} type 消息类型
         * @param {object} args 消息携带数据
         */
        fire(type, args) {
   
   
            // 如果该消息没有被注册，则返回
            if (!__messages[type]) return;
            // 遍历消息动作
            for (let i = 0; i < __messages[type].length; i++) {
   
   
                // 依次执行注册的消息对应的动作序列
                __messages[type][i].call(this, args);
            }
        },
        /**
         * 移除消息接口 - 移除
         * @param {string} type 消息类型
         * @param {Function} fn 消息回调
         */
        remove(type, fn) {
   
   
            // 如果消息动作队列存在
            if (__messages[type] instanceof Array) {
   
   
                // 从最后一个消息动作遍历
                for (let i = __messages[type].length - 1; i >= 0; i--) {
   
   
                    // 如果存在该动作则在消息动作序列中移除相应动作
                    __messages[type][i] === fn && __messages[type].splice(i, 1);
                }
            }
        }
    };
}());

/**
 * 学生类 订阅者
 * @param {string} name 姓名
 */
const Student = function (name) {
   
   
    this.name = name;
    this.getResult = () => console.log(`${this.name} 的结果为：${this.result} 分！`);
};
Student.prototype = {
   
   
    /**
     * 回答的试卷
     * @param {string} test 试卷
     * @param {number} result 结果
     */
    setResult(test, result) {
   
   
        this.result = result;
        Observer.regist(test, this.getResult);
    },
    /**
     * 放弃方法
     * @param {string} test 试卷
     */
     giveUp(test) {
   
   
        console.log(`${this.name} 放弃了 ${test} ~~~`);
        Observer.remove(test, this.getResult);
    }
};

/**
 * 教师类 发布者
 */
const Teacher = function () {
   
    };
Teacher.prototype = {
   
   
    // 发布试卷
    distributeTest(test) {
   
   
        console.log(`发布 ${
     
     test} 的结果：`);
        // 发布试卷
        Observer.fire(test)
    }
};

const s1 = new Student('Tom');
const s2 = new Student('Lee');
const s3 = new Student('张三');

// s1 考了试卷1、2，最终又放弃了试卷2
s1.setResult('试卷1', 10);
s1.setResult('试卷2', 20);
s1.giveUp('试卷2');

// s2 考了试卷2、3，放弃了试卷1
s2.giveUp('试卷1');
s2.setResult('试卷2', 80);
s2.setResult('试卷3', 100);

// s3 考了试卷1、2、3
s3.setResult('试卷1', 70);
s3.setResult('试卷2', 50);
s3.setResult('试卷3', 30);

console.log('=============');

const teacher = new Teacher();

teacher.distributeTest('试卷1');
console.log('=============');

teacher.distributeTest('试卷2');
console.log('=============');

teacher.distributeTest('试卷3');
console.log('=============');

console.log(Observer);
文章标签：
JavaScript
前端开发
缓存
设计模式
关键词：
设计模式观察者模式
JavaScript通信
JavaScript设计模式
JavaScript观察者模式
JavaScript设计模式观察者模式
ProsperLee
目录
相关文章
游客syv66y3m2ksnc
|
13天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
游客syv66y3m2ksnc
24 1
Codelinghu
|
1月前
|
设计模式 传感器
【设计模式】观察者模式（定义 | 特点 | Demo入门讲解）
【设计模式】观察者模式（定义 | 特点 | Demo入门讲解）
Codelinghu
37 0
聚优云惠
|
8天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
聚优云惠
20 3
聚优云惠
|
20天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
聚优云惠
33 9
毓秀清荷
|
19天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
毓秀清荷
27 2
我是快乐的嘟嘟
|
28天前
|
设计模式 监控 UED
设计模式之观察者模式
【10月更文挑战第12天】 观察者模式是一种行为型设计模式，定义了一对多的依赖关系，当一个对象状态改变时，所有依赖它的对象都会自动更新。主要由主题（被观察者）和观察者组成，实现对象间的松耦合，广泛应用于用户界面、事件驱动系统和数据监控等领域。
我是快乐的嘟嘟
31 1
毓秀清荷
|
30天前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
本教程详细讲解Kotlin语法，适合深入学习。对于快速掌握Kotlin，推荐“简洁”系列教程。本文特别介绍了观察者模式，包括使用Java API和Kotlin委托属性（如Delegates.observable）实现的方法，旨在帮助开发者更高效地实现和优化观察者模式的应用。
毓秀清荷
32 3
mao29955
|
1月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
mao29955
30 3
程序员小海绵
|
2月前
|
设计模式 Java 关系型数据库
设计模式——观察者模式
观察者模式介绍、观察者模式优化天气预报案例、JDK 的Observable类和Observer类
程序员小海绵
43 4
设计模式——观察者模式
游客zi3qmblbcdexu
|
29天前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
游客zi3qmblbcdexu
19 0

热门文章

最新文章

  • 1
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 2
    javascript类型系统之Array
  • 3
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 4
    Andorid Freemarker与template.js使用
  • 5
    YY游戏云的angular js实践总结
  • 6
    走在JS上的全栈之路(一)
  • 7
    JavaScript值得注意的小知识点
  • 8
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 9
    js正则表达式语法
  • 10
    JS中document对象详解
  • 1
    C++一分钟之-设计模式：工厂模式与抽象工厂
    42
  • 2
    《手把手教你》系列基础篇（九十四）-java+ selenium自动化测试-框架设计基础-POM设计模式实现-下篇（详解教程）
    46
  • 3
    C++一分钟之-C++中的设计模式：单例模式
    53
  • 4
    《手把手教你》系列基础篇（九十三）-java+ selenium自动化测试-框架设计基础-POM设计模式实现-上篇（详解教程）
    37
  • 5
    《手把手教你》系列基础篇（九十二）-java+ selenium自动化测试-框架设计基础-POM设计模式简介（详解教程）
    61
  • 6
    Java面试题：结合设计模式与并发工具包实现高效缓存；多线程与内存管理优化实践；并发框架与设计模式在复杂系统中的应用
    56
  • 7
    Java面试题：设计模式在并发编程中的创新应用，Java内存管理与多线程工具类的综合应用，Java并发工具包与并发框架的创新应用
    40
  • 8
    Java面试题：如何使用设计模式优化多线程环境下的资源管理？Java内存模型与并发工具类的协同工作，描述ForkJoinPool的工作机制，并解释其在并行计算中的优势。如何根据任务特性调整线程池参数
    49
  • 9
    Java面试题：请列举三种常用的设计模式，并分别给出在Java中的应用场景？请分析Java内存管理中的主要问题，并提出相应的优化策略？请简述Java多线程编程中的常见问题，并给出解决方案
    105
  • 10
    Java面试题：设计模式如单例模式、工厂模式、观察者模式等在多线程环境下线程安全问题，Java内存模型定义了线程如何与内存交互，包括原子性、可见性、有序性，并发框架提供了更高层次的并发任务处理能力
    75

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 5天玩转Java面向对象编程
  • Java面向对象编程
  • Java面向对象开发

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云OSS设置跨域访问