Explicación y aplicación del sistema de patrones de diseño de Javascript: notas de estudio Patrón de 5 decoradores

Modo decorador

• Agregar nuevas funciones a los objetos
• No cambia su estructura y función original.

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

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

// 测试
let circle = new Circle()
circle.draw()
let dec = new Decorator(circle)
dec.draw()

Escenas

• Decorador ES7
• core-decorators

Decorador ES7

Decoración

@testDec
class Demo {
    
    
  // ...
}

function testDec(target) {
    
    
  target.isDec = true;
}

alert(Demo.isDec) // true

Forma de parámetro:

function testDec(isDec) {
    
    
  return funciton (target) {
    
    
    target.isDec = isDec
  }
}
@testDec(false)
class Demo {
    
    

}
alert(Demo.isDec)  // false

Ejemplo de decorador-mixin

function mixin(...list) {
    
    
  return function (target) {
    
    
    Object.assign(target.prototype, ...list)
  }
}

const Foo = {
    
    
  foo() {
    
     alert('foo') }
}

@mixins(Foo)
class MyClass {
    
    }

let obj = new MyClass()
obj.foo() // 'foo'

Método de decoración

class Person {
    
    
  constructor() {
    
    
    this.first = 'A'
    this.last = 'B'
  }
  // 装饰方法  只读属性
  @readonly
  name() {
    
    
    return `${
      
      this.first} ${
      
      this.last}`
  }
}

const p = new Person()
console.log(p.name())
p.name = function () {
    
    }  // 报错，因为name是只读属性

@readonlyRealizacion de

function readonly(target, name, descriptor) {
    
    
  // descriptor 属性描述对象， Object.defineProperty中会用到， 原来的值如下；
  // {
    
    
  //   value: specifiedFunction,
  //   enumerable: false,   // 可枚举
  //   configurable: true,  // 可配置
  //   writable: true       // 可写
  // }
  descriptor.writable = false  // 变为不可写
  return descriptor
}

Método de decoración

class Math {
    
    
  // 装饰方法
  @log
  add(a, b) {
    
    
    return a + b
  }
}

const math = new Math()
const result = math.add(2, 4) // 执行add时,会自动打印日志，因为有@log装饰器
console.log('result', result)

Implementación del método @log decorator

function log(target, name, descriptor) {
    
    
  let oldValue = descriptor.value;  // zhuan shi
  descriptor.value = function() {
    
    
    console.log(`Calling ${
      
      name} with`, arguments)
    reutrn oldValue.apply(this, arguments)
  };
  return descriptor;
}

js decorator biblioteca lib de terceros
core-decorators

import {
    
     deprecate } from 'core-decorators'   // 提示废弃

Verificación del principio de diseño

• Separe el objeto existente y el decorador, los dos existen de forma independiente
• Cumplir con el principio abierto y cerrado.