装饰者模式

定义: 在不改变原对象的基础上, 通过对其进行包装拓展, 使原对象可以满足用户的更复杂需求

ES7 装饰器简介

js-playground/ES at main · ZingerLittleBee/js-playground

Contribute to ZingerLittleBee/js-playground development by creating an account on GitHub.

https://github.com/ZingerLittleBee/js-playground/tree/main/ES

// 类装饰器
function classDecorator(target) {
    target.hasDecorator = true
    return target
}

const { sleep } = require('sleep')

@classDecorator
class Button {
    @funcExecTime
    onClick() {
        console.log('button onclick event')
        sleep(1)
    }
}

console.log('Button 是否被装饰: ', Button.hasDecorator)

/*
属性描述对象
descriptor {
  value: [Function: onClick],
  writable: true,
  enumerable: false,
  configurable: true
}
 */

// 类方法装饰器, 打印方法执行时间
function funcExecTime(target, name, descriptor) {
    let originalMethod = descriptor.value
    descriptor.value = function() {
        console.log(name, '被装饰')
        console.time(`方法: ${name}, 执行时间`)
        originalMethod.apply(this, arguments)
        console.timeEnd(`方法: ${name}, 执行时间`)
    }
    return descriptor
}

const btn = new Button()
btn.onClick()

// 需使用 babel 编译: babel Decorator.js --out-file babel_decorator.js
// node babel_decorator.js

/* 输出
Button 是否被装饰:  true
onClick 被装饰
button onclick event
方法: onClick, 执行时间: 1.002s
*/

babel 编译装饰器语法

yarn global add babel-cli
yarn add -D babel-preset-env babel-plugin-transform-decorators-legacy

{
  "presets": ["env"],
  "plugins": ["transform-decorators-legacy"]
}