装饰器模式

介绍

• 为对象添加新功能;
• 不改变其原有的结构和功能;

设计原则验证

• 将现有对象和装饰器进行分离，两者独立存在;
• 符合开放封闭原则;

示例

class Circle {
  draw() {
    console.log('画一个圆形');
  }
}

class Decorator {
  constructor(circle) {
    this.circle = circle;
  }
  draw(){
    this.circle.draw();
    this.setRedBorder(circle);
  }
  setRedBorder(circle) {
    console.log("设置红色边框");
  }
}

// 测试代码
let circle = new Circle()
circle.draw()

let dec = new Decorator(circle);
dec.draw()

场景

• ES7装饰器
  • 配置环境

  // npm i babel-plugin-transform-decorators-legacy -D
  // .babelrc
  {
    "presets": ["es2015", "latest"],
    "plugins": ["transform-decorators-legacy"]
  }
  // jsconfig.json
  {
    "compilerOptions": {
      "experimentalDecorators": true
    },
  }
  

  • 装饰类

  @decorator
  class A {};
  // 等同于 
  class A {};
  A = decorator(A) || A;
  

  • 装饰方法

  function readonly(target, name, descriptor) {
    descriptor.writable = false
    return descriptor
  }
  class Person {
    constructor() {
      this.first = 'A'
      this.last = 'B'
    }
    @readonly
    name(){
      return`${this. first} ${this.last} `
    }
  }
  let p = new Person()
  console.log(p.name())
  p.name = "" // 会报错
  

• core-decorators
  • 第三方开源 lib
  • 提供常用的装饰器