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()
结果如下：
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);
结果:
上面这段代码将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)
结果：
上面的代码中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)}
结果：
最终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日
