设计模式之观察者模式（5）1、装饰器模式 ? 1、介绍装饰器内会先取得之前的功能再添加功能使用时需要将原来的实

`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);