装饰器模式

1.装饰器模式,它的定义是“在不改变元对象的基础上,通过对其包装拓展,是原有对象可以满足用的更复杂需求。”
比如水墨屏的手机壳,就是一个标准的装饰器,它不会对手机原有的功能产生任何影响,仅仅使手机多了块屏幕。
2.为什么会有装饰器模式?
因为任何人在去做需求的时候,都不想关心它现有的业务逻辑是什么样的,只想对它已有的功能做拓展,只关心拓展功能如何实现。于是便有了装饰器模式。
3.装饰器怎么实现?
首先,将旧逻辑与新逻辑分离,把旧逻辑封装起来。
然后编写新逻辑。
最后把新逻辑旧逻辑整合到一起。
ES5的实现

document.getElementById('open').addEventListener('click', function() {
    openModal() // 旧逻辑
    changeButtonStatus() //新逻辑
})

ES6的实现

// 定义打开按钮
class OpenButton {
    // 点击后展示弹框(旧逻辑)
    onClick() {
        const modal = new Modal()
        modal.style.display = 'block'
    }
}

// 定义按钮对应的装饰器
class Decorator {
    // 将按钮实例传入
    constructor(open_button) {
        this.open_button = open_button
    }
    
    onClick() {
        this.open_button.onClick()
        // “包装”了一层新逻辑
        this.changeButtonStatus()
    }
    
    changeButtonStatus() {
        this.changeButtonText()
        this.disableButton()
    }
    
    disableButton() {
        const btn =  document.getElementById('open')
        btn.setAttribute("disabled", true)
    }
    
    changeButtonText() {
        const btn = document.getElementById('open')
        btn.innerText = '快去登录'
    }
}
const openButton = new OpenButton()
const decorator = new Decorator(openButton)

document.getElementById('open').addEventListener('click', function() {
    // openButton.onClick()
    // 此处可以分别尝试两个实例的onClick方法,验证装饰器是否生效
    decorator.onClick()
})

4.ES7的装饰器函数
可装饰类,也可装饰类里面的方法

// 将装饰器“安装”到Button类上
@classDecorator
class Button {
    // Button类的相关逻辑
}
//装饰类的方法
class Button {
    @funcDecorator
    onClick() { 
        console.log('我是Func的原有逻辑')
    }
}

5.装饰器语法糖帮我们做了些什么
(1)函数传参&调用
给类添加装饰器时,target是被装饰的类本身

function classDecorator(target) {
    target.hasDecorator = true
    return target
}

给方法添加装饰器时,target变成了类的原型对象。

function funcDecorator(target, name, descriptor) {
    let originalMethod = descriptor.value
    descriptor.value = function() {
    console.log('我是Func的装饰器逻辑')
    return originalMethod.apply(this, arguments)
  }
  return descriptor
}

装饰器函数调用的时机:装饰器函数在编译阶段就执行了。
(2)传入“属性描述对象”descriptor
对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。
它由各种各样的属性描述符组成,这些描述符又分为数据描述符和存取描述符:

  • 数据描述符:包括 value(存放属性值,默认为默认为 undefined)、writable(表示属性值是否可改变,默认为true)、enumerable(表示属性是否可枚举,默认为 true)、configurable(属性是否可配置,默认为true)。
  • 存取描述符:包括 get 方法(访问属性时调用的方法,默认为 undefined),set(设置属性时调用的方法,默认为 undefined )
    拿到了 descriptor,就相当于拿到了目标方法的控制权。通过修改 descriptor,我们就可以对目标方法的逻辑进行拓展了~

参考:
JavaScript设计模式之装饰器模式1
JavaScript设计模式之装饰器模式2

你可能感兴趣的:(装饰器模式)