Decorator是一個(gè)函數(shù)谷誓，用來修改類或者類的屬性的行為窜护。
說的直白點(diǎn)decorator就是給類添加或者修改類的變量與方法的。
先看一個(gè)例子
@addCxh
class DaBao {}
function addCxh(target){
target.cxh = "first"
}
console.log(DaBao.cxh);
在執(zhí)行以前先：npm install --save-dev babel-plugin-transform-decorators-legacy
安裝一個(gè)支持decorator的插件。
然后babel --plugins transform-decorators-legacy decorator.js --out-file d.js
拿到轉(zhuǎn)碼好的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);
當(dāng)然矗愧，執(zhí)行的結(jié)果肯定是 first。
那么我們分析下這段代碼郑原。在class之前加上@addCxh以后其實(shí)就相當(dāng)于對(duì)DaBao作為參數(shù)執(zhí)行了addCxh 然后 || class DaBao本身,
即DaBao = addCxh(DaBao) || DaBao;
而addCxh相當(dāng)于給DaBao添加了一個(gè)靜態(tài)變量唉韭。target即修飾的目標(biāo)類。
如果我們需要給一個(gè)類添加一個(gè)靜態(tài)方法犯犁，但是這個(gè)方法并不固定属愤，我們需要封裝兩個(gè)變量進(jìn)去，一個(gè)是target酸役，代表類本身住诸，另一個(gè)代表是我們需要的方法。則：
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()
結(jié)果如下：
addCxh接受一個(gè)變量作為參數(shù)涣澡，給目標(biāo)類添加靜態(tài)方法或變量贱呐。
setClass返回不同的函數(shù)傳遞給addCxh,然后在給目標(biāo)類添加該方法。
添加實(shí)例屬性
@addCxh('first')
class DaBao {}
function addCxh(data){
return (target) => {
target.prototype.cxh = data;
}
}
var dabao = new DaBao;
console.log(dabao.cxh);
結(jié)果： first暑塑；
配合assign添加多個(gè)屬性
新建一個(gè)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);
結(jié)果:
上面這段代碼將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)
結(jié)果：
上面的代碼中setAttr方法三個(gè)參數(shù)分別代表，操作對(duì)象事格，屬性名稱惕艳，屬性參數(shù)
多個(gè)修飾器修飾一個(gè)方法 以及執(zhí)行順序
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)}
結(jié)果：
最終method方法的writable的值為 false,兩個(gè)修飾器的執(zhí)行順序依次執(zhí)行set方法，然后在倒敘返回驹愚，先返回第二個(gè)远搪，再返回第一個(gè)。
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{ }
則會(huì)報(bào)錯(cuò)倘潜；但是我們改成：
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方法绷柒。
當(dāng)然我們也可以給函數(shù)起一個(gè)其他的名字
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'})將函數(shù)名改成sobig傳入。
2017年8月13日
