设计模式之观察者模式(5)

简介: 设计模式之观察者模式(5)

1、装饰器模式 ?

1、介绍

  • 装饰器内 会先取得之前的功能 再添加功能

网络异常,图片无法展示
|

  • 使用时需要将 原来的实例 传入 装饰器中

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 动手试试

网络异常,图片无法展示
|

  • 写代码 理解一下
class Circle {
      draw() {
        console.log("画一个五角星");
      }
    }
    class Decorator {
      constructor(circle) {
        this.circle = circle;
      }
      draw() {
        this.circle.draw(); // 原来的功能
        this.setRedBoard(circle); // 新增的装饰器功能
      }
      setRedBoard(circle) {
        console.log("画一个三角形");
      }
    }
    // 测试代码
    // 先看自身功能
    let circle = new Circle();
    circle.draw();
    console.log("---分割线---");
    //装饰器功能
    let dec = new Decorator(circle);
    dec.draw();
复制代码
  • 实现效果

网络异常,图片无法展示
|

2、使用场景展示

  • 装饰器 使用 场景 展示

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 安装插件
yarn add babel-plugin-transform-decorators-legacy --save-dev 
复制代码

网络异常,图片无法展示
|

  • 尝试 写 es7 装饰器

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 理解一下 原理

网络异常,图片无法展示
|

  • 还可 传递 参数

网络异常,图片无法展示
|

  • 还可 使用 mixin

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、装饰器 方法

1、readonly

网络异常,图片无法展示
|

  • 代码展示

网络异常,图片无法展示
|

2、打印 日志

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、core-decorator  第三方库 比较好用

网络异常,图片无法展示
|

  • 安装 yarn add core-decorators --save

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 设计原则

网络异常,图片无法展示
|

2、外观模式 ?

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、观察者模式(重点 ) ?

1、介绍

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

2、代码展示

// 观察者模式
//  主题  保存状态 当状态 变化后 通知 观察者 对象
class Subject {
  constructor() {
    this.state = 0;
    this.observers = [];
  }
  getState() {
    return this.state;
  }
  setState(state) {
    this.state = state;
    this.notifyAllObservers();
  }
  notifyAllObservers() {
    this.observers.forEach((observer) => {
      observer.update();
    });
  }
  attach(observer) {
    this.observers.push(observer);
  }
}
// 观察者
class Observer {
  constructor(name, subject) {
    this.name = name;
    this.subject = subject;
    this.subject.attach(this); //  将自己 作为观察者 传入 主题中
  }
  update() {
    console.log(`${this.name} update, state: ${this.subject.getState()}`);
  }
}
// 测试
let s = new Subject();
let o1 = new Observer("o1", s);
let o2 = new Observer("o2", s);
let o3 = new Observer("o3", s);
s.setState(1);
复制代码
  • 结果展示
  • 主题的setState使得 state更改时,通知观察者 状态 已经更新

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、重要的 使用 场景

网络异常,图片无法展示
|

  • 网页 事件绑定
    网络异常,图片无法展示
    |

  • Promise

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • jQuery callbacks

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • nodejs自定义事件

1、自定义事件

网络异常,图片无法展示
|

2、 还有一个 继承

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、读取大文件时 使用的文件流

网络异常,图片无法展示
|

4、读取文件有多少行

网络异常,图片无法展示
|

  • 我们去检查一下 文件 看对不对

网络异常,图片无法展示
|

4、其他 场景

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

5、 设计原则验证

网络异常,图片无法展示
|



相关文章
|
2月前
|
设计模式 监控 Java
Kotlin - 改良设计模式 - 观察者模式
Kotlin - 改良设计模式 - 观察者模式
61 3
|
1月前
|
设计模式 存储 供应链
前端必须掌握的设计模式——观察者模式
观察者模式(Observer Pattern)是一种行为型设计模式,实现了一种订阅机制。它包含两个角色:**观察者**(订阅消息、接收通知并执行操作)和**被观察者**(维护观察者列表、发送通知)。两者通过一对多的关系实现解耦,当被观察者状态改变时,会通知所有订阅的观察者。例如,商店老板作为被观察者,记录客户的需求并在商品到货时通知他们。前端应用中,如DOM事件注册、MutationObserver等也体现了这一模式。
|
2月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
|
3月前
|
设计模式 传感器
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
【设计模式】观察者模式(定义 | 特点 | Demo入门讲解)
62 0
|
2月前
|
设计模式 消息中间件 搜索推荐
Java 设计模式——观察者模式:从优衣库不使用新疆棉事件看系统的动态响应
【11月更文挑战第17天】观察者模式是一种行为设计模式,定义了一对多的依赖关系,使多个观察者对象能直接监听并响应某一主题对象的状态变化。本文介绍了观察者模式的基本概念、商业系统中的应用实例,如优衣库事件中各相关方的动态响应,以及模式的优势和实际系统设计中的应用建议,包括事件驱动架构和消息队列的使用。
|
2月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
50 1
|
2月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
35 3
|
3月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
39 9
|
3月前
|
设计模式 监控 Java
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
Kotlin教程笔记(52) - 改良设计模式 - 观察者模式
50 2
|
3月前
|
设计模式 监控 UED
设计模式之观察者模式
【10月更文挑战第12天】 观察者模式是一种行为型设计模式,定义了一对多的依赖关系,当一个对象状态改变时,所有依赖它的对象都会自动更新。主要由主题(被观察者)和观察者组成,实现对象间的松耦合,广泛应用于用户界面、事件驱动系统和数据监控等领域。

热门文章

最新文章