1. 目錄結(jié)構(gòu)
- dist
example.js
- example
index.html
index.js
+ node_modules
.babelrc
package.son
webpack.config.js
2. 環(huán)境配置
（1）配置工程依賴：./package.json
{
"name": "test-decorator",
"version": "1.0.0",
"dependencies": {},
"devDependencies": {
"babel-loader": "^6.2.10",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^1.13.1"
}
}
（2）配置Babel：./babelrc
{
"presets": [
"es2015",
"stage-0"
],
"plugins": [
"transform-decorators-legacy"
]
}
（3）配置Webpack：./webpack.config.js
module.exports = {
entry: {
example: './example/index.js'
},
output: {
path: './dist/',
filename: '[name].js',
libraryTarget: 'umd'
},
module: {
loaders: [{
test: /.js$/,
loader: 'babel-loader'
}]
}
};
3. 用例
const D1 = Class => {
//Class沒有v0這個屬性
console.log(Class.v0); //undefined
Class.v0 = 1;
return Class;
};
const D2 = Class => {
//可以獲取靜態(tài)屬性
console.log(Class.v1); //0
Class.v1 = 2;
return Class;
}
const D3 = Class => {
const f1 = Class.f1;
//可以獲取靜態(tài)屬性频丘，屬性為箭頭函數(shù)
console.log(f1); //x => x+1
Class.f1 = z => f1(z) + 1;
return Class;
}
const D4 = instance => {
//當(dāng)實例為public class field時，無法獲取實例屬性
console.log(instance.v2); //undefined
instance.v2 = 4;
return instance;
}
const D5 = instance => {
//當(dāng)實例為public class field時，無法獲取實例屬性
console.log(instance.f2); //undefined
instance.f2 = z => z + 4;
return instance;
};
const D6 = instance => {
const f3 = instance.f3;
//實例方法，可以獲取
console.log(f3); //x => x+1
instance.f3 = z => f3(z) + 4;
return instance;
};
@D1
class A {
@D2
static v1 = 0; //static public class field
@D3
static f1 = x => x + 1; //static public class field
@D4
v2 = 0; //public class field
@D5
f2 = x => x + 1; //public class field
//You can't attach decorators to a class constructor
constructor() { }
@D6
f3(x) { //mothod
return x + 1;
}
};
console.warn(A.v0); //1
console.warn(A.v1); //2
console.warn(A.f1(1)); //3
const a = new A;
console.warn(a.v2); //4
console.warn(a.f2(1)); //5
console.warn(a.f3(1)); //6
注意事項：
（1）constructor不能添加decorator
（2）decorator是一個函數(shù)左痢。
如果添加在類上或者類的靜態(tài)字段上，參數(shù)為這個類艘策，返回值將替換原來的類系草。
const f = Class => class B { };
@f
class A{
}
console.log(A); //B
如果添加在實例字段或者方法上，參數(shù)為實例耙旦，返回值必須是一個對象脱羡，且該對象將被丟棄。
const f = x => {
const fn = x.fn;
x.fn = () => fn() + 1;
return {
v: 2
};
};
class A {
@f
fn() {
return 1;
}
gn() {
console.log(this.fn()); //2
//this還是原來的實例免都，而不是{v:2}
console.log(this.v); //undefined
}
}
const a = new A;
a.gn();
（3）decorator修飾public class field時锉罐，如果該field是一個實例字段，則通過decorator的參數(shù)（參數(shù)是當(dāng)前類的實例）無法獲取該字段绕娘。
（可能是Babel的問題
（4）不在類中的普通函數(shù)脓规，不支持decorator。
const f = x => x;
// Leading decorators must be attached to a class declaration
@f
function g() {
}
console.log(g);
參考
Class and Property Decorators
babel-plugin-transform-decorators-legacy
