RicoyWang RicoyWang
首页
  • 前端
  • 资源
  • 感悟
  • 问答
  • 方法论
  • 管理
  • 数据结构算法
  • 计算机原理
  • 图形学
  • 个人体系

    • 个人体系总览
    • 框架
    • UI库
    • 工具
  • 技术栈

    • 前端开发总览
    • 后端端开发总览
    • 数据库总览
  • 领域

    • 数字孪生
    • 物联网
    • 数据中台
    • 技术中台
    • APASS
    • SASS
  • 管理

    • 个人管理
    • PMP
    • 团队管理
    • 项目管理
    • 情绪管理
  • 前端组件
  • 后端组件
  • 应用
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • 设计模式

    • 设计模式总览
  • 数据结构算法

    • JavaScript
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ricoy Wang

前端娱乐讲师
首页
  • 前端
  • 资源
  • 感悟
  • 问答
  • 方法论
  • 管理
  • 数据结构算法
  • 计算机原理
  • 图形学
  • 个人体系

    • 个人体系总览
    • 框架
    • UI库
    • 工具
  • 技术栈

    • 前端开发总览
    • 后端端开发总览
    • 数据库总览
  • 领域

    • 数字孪生
    • 物联网
    • 数据中台
    • 技术中台
    • APASS
    • SASS
  • 管理

    • 个人管理
    • PMP
    • 团队管理
    • 项目管理
    • 情绪管理
  • 前端组件
  • 后端组件
  • 应用
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • 设计模式

    • 设计模式总览
  • 数据结构算法

    • JavaScript
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript文章

  • 学习笔记

  • 设计模式

    • 设计模式总览
    • 设计模式对比
    • 创建型模式类型:工厂系列
    • 结构模式类型:适配器模式
    • 结构型模式类型:代理模式--替别人把妹
    • 结构型模式类型:装饰者模式--AOP装饰
    • 行为模式类型:策略模式-状态模式
    • 行为模式类型:观察者模式-订阅发布模式
    • 前端
    • 设计模式
    xugaoyi
    2023-12-29
    目录

    行为模式类型:观察者模式-订阅发布模式

    订阅发布只触发需要发布的事件,解耦保密性强。 观察者模式则为观察者列表发现有触发信号则同步触发,再判断自己是否执行,耦合度高,信息每个观察者都能接收到

    观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。

    # 观察者模式

    // 观察者
    class Observer {
        constructor() {
    
        }
        update(val) {
    
        }
    }
    // 观察者列表
    class ObserverList {
        constructor() {
            this.observerList = []
        }
        add(observer) {
            return this.observerList.push(observer);
        }
        remove(observer) {
            this.observerList = this.observerList.filter(ob => ob !== observer);
        }
        count() {
            return this.observerList.length;
        }
        get(index) {
            return this.observerList(index);
        }
    }
    // 目标
    class Subject {
        constructor() {
            this.observers = new ObserverList();
        }
        addObserver(observer) {
            this.observers.add(observer);
        }
        removeObserver(observer) {
            this.observers.remove(observer);
        }
        notify(...args) {
            let obCount = this.observers.count();
            for (let index = 0; index < obCount; index++) {
                this.observers.get(i).update(...args); // 每一个观察者都会接受到更新消息
            }
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45

    # 订阅发布模式

    var salesOffices = {}; // 定义售楼处
          // 事件调度中心
            salesOffices.clientList = {}; // 缓存列表,存放订阅者的回调函数 
    
        salesOffices.listen = function( key, fn ){
            if ( !this.clientList[ key ] ){ // 如果还没有订阅过此类消息,给该类消息创建一个缓存列表
            //  // 事件调度中心
                this.clientList[ key ] = [];
            }
            this.clientList[ key ].push( fn ); // 订阅的消息添加进消息缓存列表
        };
    
        salesOffices.trigger = function(){ // 发布消息
            var key = Array.prototype.shift.call( arguments ), // 取出消息类型
                fns = this.clientList[ key ]; // 取出该消息对应的回调函数集合
            if ( !fns || fns.length === 0 ){ // 如果没有订阅该消息,则返回
                return false;
            }
            for( var i = 0, fn; fn = fns[ i++ ]; ){
                fn.apply( this, arguments ); // (2) // arguments 是发布消息时附送的参数
            }
        };
    
        salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅88 平方米房子的消息
            console.log( '价格= ' + price ); // 输出: 2000000
        });
    
        salesOffices.listen( 'squareMeter110', function( price ){ // 小红订阅110 平方米房子的消息
            console.log( '价格= ' + price ); // 输出: 3000000
        });
    
        salesOffices.trigger( 'squareMeter88', 2000000 ); // 发布88 平方米房子的价格
        salesOffices.trigger( 'squareMeter110', 3000000 ); // 发布110 平方米房子的价格
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    编辑 (opens new window)
    行为模式类型:策略模式-状态模式

    ← 行为模式类型:策略模式-状态模式

    最近更新
    01
    图形学
    01-03
    02
    计算机原理
    01-03
    03
    数据结构算法
    01-03
    更多文章>
    Theme by Vdoing | Copyright © 2017-2025 RicoyWang | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式