Decorator

标签（空格分隔）： 前端 es6

---

概念

修饰器（Decorator）是一个函数，用来修改类的行为。这是ES7的一个提案，目前Babel转码器已经支持。

修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。

// babel转换依赖插件
{
  "plugins": ["transform-decorators-legacy"]
}

基本使用

第一种使用

const test1 = (target) => {
    target.key1 = 1 // 扩展静态属性
    target.prototype.key1 = 2 // 扩展动态属性
}

test1
class test1Class {}

let test1Obj = new test1Class()

// 结果
test1Class.key1
test1Obj.key1

第二种使用

const test2 = (name) => {
  return (target) => {
    target.uname = '李云龙' // name是class的关键词，不能使用。
    target.prototype.name = name
  }
}

@test2('testname')
class test2Class {}

let test2Obj = new test2Class()

// 结果
test2Class.name
test2Class.uname
test2Obj.name

原理

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

对方法的修饰

额外方法

const readonly = (target, name, descriptor) => {
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction, // 置换调用
  //   enumerable: false,  // 是否可以枚举（for in 循环能否遍历的到）
  //   configurable: true, // 是否可以配置（是否可以用delete删除）
  //   writable: true  // 是否可以修改（为false的时候，只是修改没起作用，不会报错）
  // };
  descriptor.writable = false
  return descriptor
}

const configurable = (target, name, descriptor) => {
  descriptor.configurable = false
  return descriptor
}

const enumerable = (target, name, descriptor) => {
  descriptor.enumerable = false
  return descriptor
}

class test3Class {
  @configurable
  @readonly
  testKey = {
    @enumerable
    @configurable
    testKey: 1
  }
}

let test3Obj = new test3Class()

// test3Obj.testKey = {key: 2}
test3Obj.testKey

// test3Obj.testKey.testKey = 2

for (let key in test3Obj.testKey) {console.log(key)}
delete test3Obj.testKey
test3Obj.testKey.testKey

对value的操作

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

function log(target, name, descriptor) {
  var oldValue = descriptor.value;
  console.log(oldValue, target)
  descriptor.value = function() {
    // 这里把console.log改成另外一个监听的add函数，就是一个简单的观察者模式了
    console.log(`Calling "${name}" with`, arguments);
    return oldValue.apply(null, arguments);
  };

  return descriptor;
}

const math = new Math();

// passed parameters should get logged now
math.add(2, 4);

为什么decorator不能用于函数

修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

var counter = 0;

var add = function () {
  counter++;
};
@add
function foo() {
}

等价于

var counter;
var add;

@add
function foo() {
}

counter = 0;

add = function () {
  counter++;
};

高级用法（拓展用法）

mixin

const mixins = (...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}

const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // "foo"

通过mixins这个修饰器，实现了在MyClass类上面“混入”Foo对象的foo方法。

不过，上面的方法会改写MyClass类的prototype对象，如果不喜欢这一点，也可以通过类的继承实现mixin。

class MyBaseClass {
  foo() { console.log('foo') }
}

class MyClass extends MyBaseClass {
  /* ... */
}

另一种写法

let MyMixin = (superclass) => class extends superclass {
  foo() {
    console.log('foo from MyMixin');
  }
};

class MyBaseClass {
  foo() { console.log('foo') }
}

class MyClass extends MyMixin(MyBaseClass) {
  /* ... */
}

实战

以下截取自bimbox

    @Emit() // save-user-profile
    saveUserProfile () {
      if (this.avatarData) {
        this.saveAvatar(this.usernameId, this.avatarData);
      }
      this.saveTitleCertificate();
    }

以下截取自vue-property-decorator

/** vue-property-decorator verson 6.1.0 MIT LICENSE copyright 2018 kaorun343 */
'use strict';
import Vue from 'vue';
import Component, { createDecorator } from 'vue-class-component';
import 'reflect-metadata';
export { Component, Vue };

// Code copied from Vue/src/shared/util.js
var hyphenateRE = /\B([A-Z])/g;
var hyphenate = function (str) { return str.replace(hyphenateRE, '-$1').toLowerCase(); };
/**
 * decorator of an event-emitter function
 * @param  event The name of the event
 * @return MethodDecorator
 */
export function Emit(event) {
    return function (target, key, descriptor) {
        key = hyphenate(key);
        var original = descriptor.value;
        descriptor.value = function emitter() {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++) {
                args[_i] = arguments[_i];
            }
            if (original.apply(this, args) !== false)
                this.$emit.apply(this, [event || key].concat(args));
        };
    };
}