聊聊es7的decorator修饰器

Decorator是一个函数，用来修改类或者类的属性的行为。
说的直白点decorator就是给类添加或者修改类的变量与方法的。
先看一个例子

@addCxh
class DaBao {}
function addCxh(target){
    target.cxh = "first"
}
console.log(DaBao.cxh);

在执行以前先：npm install --save-dev babel-plugin-transform-decorators-legacy
安装一个支持decorator的插件。
然后babel --plugins transform-decorators-legacy decorator.js --out-file d.js
拿到转码好的d.js后我们得到的代码如下：

"use strict";

var _class;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var DaBao = addCxh(_class = function DaBao() {
    _classCallCheck(this, DaBao);
}) || _class;

function addCxh(target) {
    target.cxh = "first";
}
console.log(DaBao.cxh);

当然，执行的结果肯定是 first。
那么我们分析下这段代码。在class之前加上@addCxh以后其实就相当于对DaBao作为参数执行了addCxh 然后 || class DaBao本身,
即DaBao = addCxh(DaBao) || DaBao;
而addCxh相当于给DaBao添加了一个静态变量。target即修饰的目标类。

如果我们需要给一个类添加一个静态方法，但是这个方法并不固定，我们需要封装两个变量进去，一个是target，代表类本身，另一个代表是我们需要的方法。则：

function setClass(a){
    if(a == '1'){
        return (value) => {
            console.log(value)
        }
    }
    return () => {
        console.log(1)
    }
    
}

@addCxh(setClass(1))
class DaBao {}

@addCxh(setClass(2))
class XiaoBao{}

function addCxh(addFun){
    return (target) => {
        target.cxh = addFun;
    }
}
DaBao.cxh(2);
XiaoBao.cxh()

结果如下：

Paste_Image.png
addCxh接受一个变量作为参数，给目标类添加静态方法或变量。
setClass返回不同的函数传递给addCxh,然后在给目标类添加该方法。
添加实例属性

@addCxh('first')
class DaBao {}
function addCxh(data){
    return (target) => {
        target.prototype.cxh = data;
    }
}
var dabao = new DaBao;
console.log(dabao.cxh);

结果： first；
配合assign添加多个属性
新建一个addDabao.js

export default function(...list) {
    return  (target) => {
        Object.assign(target.prototype,...list)  //合并
    }
} 

decorator.js

import addDabao from './addDabao1';

const obj =  {
    sex : 1,
    addName(){
        this.name = 'cxh'
    },
    setAge(n){
        this.age = n;
    }
}

@addDabao(obj)
class DaBao {}

var dabao = new DaBao;
console.log(dabao.sex);
dabao.setAge(24)
console.log(dabao.age);
dabao.addName()
console.log(dabao.name);

结果:

Paste_Image.png

上面这段代码将obj的属性添加到了 class DaBao中，这叫做混入模式 --mixin

修饰类的变量与方法

class Dabao {
    @setAttr
    cxh(){
        return true
    } 
}
function setAttr(targt, name, decorator) {
    decorator.writable = false
    return 
}

var dabao = new Dabao;
console.log(dabao.cxh)
dabao.cxh = () => {
    return false
}
console.log(dabao.cxh)

结果：

Paste_Image.png

上面的代码中setAttr方法三个参数分别代表，操作对象，属性名称，属性参数

多个修饰器修饰一个方法 以及执行顺序

function set(b){
    console.log(b)
    return (target, property, de) => {
        de.writable = b
        console.log(b)
        return de
    };
}

class Dabao {
    @set(false)
    @set(true)
    method(){}
}
var dabao = new Dabao;
dabao.method = () => {console.log(1)}

结果：

Paste_Image.png

最终method方法的writable的值为 false,两个修饰器的执行顺序依次执行set方法，然后在倒叙返回，先返回第二个，再返回第一个。
Trait
Trait的功能有很多，防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。我们可以使用第三方模块traits-decorator

import { traits } from 'traits-decorator';

import { traits } from 'traits-decorator';
class Dabao {
  big() { console.log('dabao123') }
}
const Xiaobao= {
  big() { console.log('dabao123') },
  small() { console.log('xiaobao') }
};

@traits(Dabao , Xiaobao)
class Cxh{ }

则会报错；但是我们改成：

import { traits , excludes } from 'traits-decorator';
class Dabao {
  big() { console.log('dabao123') }
}
const Xiaobao= {
  big() { console.log('dabao123') },
  small() { console.log('xiaobao') }
};

@traits(Dabao , Xiaobao::excludes ('big'))
class Cxh{ }

excludes ('big')排除big方法。
当然我们也可以给函数起一个其他的名字

import { traits , alias} from 'traits-decorator';
class Dabao {
  big() { console.log('dabao123') }
}
const Xiaobao= {
  big() { console.log('dabao123') },
  small() { console.log('xiaobao') }
};

@traits(Dabao , Xiaobao::alias({big:'sobig'}))
class Cxh{ }

alias({big:'sobig'})将函数名改成sobig传入。

2017年8月13日