1.基本概念
- 修饰器是一个函数用来修改类的行为；（扩展类的功能）
- 修饰器只在类的范畴里有用，其他地方不能用；
2.基本用法
第三方库修饰器的js库：core-decorators；
可以通过npm install core-decorators安装，不用手动写修饰器函；
import引进来直接@readonly就可以直接用了；-
bable-polyfill打补丁打不到修饰器这个语法，需要额外安装一个插件
bable-plugin-transform-decorator-legacy这么一个包；
.bablerc 里面加一个插件："plugin":["transform-decorator-legacy"]{ //限制某个属性是只读的; //target：修改类本身；name：修改属性名称；descriptor：该属性的描述对象； let readonly =function(target,name,descriptor){ //不允许修改，达到只读的效果； descriptor.writable = false; return descriptor; }; class Test{ //@后跟函数名称；和上面的函数名称要一致；否则找不到那个修饰器； //修饰器的作用；如果不加修饰器，可以重新赋值； //readonly把time变成了只读的； @readonly time(){ return "2017-10-25" } } let test = new Test(); //console.log(test.time()); //2017-10-25 test.time = function(){ console.log('reset time'); }; console.log(test.time()); //cannot assign to read only property 'time' of object'#<Test>' //不允许只读属性重新赋值； }
3.关于方法类里面可以，是不是可以在类外边操作呢？
—可以，有一个前提，在class前面，其他地方都不可以；
{
let typename = function(target,name,descriptor){
//在类上增加一个静态属性myname='hello';
target.myname = 'hello';
}
@typename
class Test{
}
console.log('类修饰符',Test.myname); //类修饰符 hello
}
4.日志系统，埋点
-
好处：
- 把埋点系统抽离出来，成为一个可复用的模块； 埋点接口变了，发送埋点通信方式变了，只需要改log对应的方法就可以了； 广告AD这个类几乎是不动的，保证了代码的可复用性；
- 埋点系统从业务逻辑中拆离出去，业务代码简洁度、可维护性增强了不少；
{
let log =(type)=>{
return function(target,name,descriptor){
let src_method = descriptor.value;
descriptor.value=(...arg)=>{
src_method.apply(target,arg);
//真实开发中换成埋点函数；语句new Img.src一个接口；
console.info(`log ${type}`);
};
}
};
class AD{
@log('show')
show(){
console.info('ad is show'):
}
@log('click')
click(){
console.info('ad is click');
}
}
let ad = new AD();
ad.show();
ad.click();
//ad is show
//log show
//ad is click
//log is click
}