(二)20.Decorator19-08-15

Decorator

- 1基本概念

Decorator(修饰器)是一个函数用来修改类的行为，（扩展类的功能，只在类这个范畴内有用）

- 2基本用法

1.首先需要安装babel-plugin-transform-decortators-legacy包
LYKdeMacBook-Pro:coding-98 hm$ npm install babel-plugin-transform-decorators-legacy --save-dev
2.修改babelrc文件

{
   "presets":["es2015"],
   "plugins":["transform-decorators-legacy"]
}

3.实例， 定义一个只读修饰器

{
//定义一个修饰器函数
  //target 修改的类本身 修改的属性名称  该属性的描述对象
  let readonly=function(target,name,descriptor){
    descriptor.writable=false;//提供只读，写的功能false
      return descriptor
  };

//用在类里, 修改类的行为
  class Test{
    //@readonly 这种方式使用修饰器
    @readonly //这个就是刚刚写的修饰器名称 名称一定要和修饰器一致 否则找不到
    time(){
      return '2017-03-11'
  }
 }

//生成一个实例test
  let test=new Test();
//这里试图改写test的time方法   使用了只读功能的修饰器，这样写会报错 如下图
  test.time=function(){
    console.log('rest time');
  };
  console.log(test.time());
}

用了只读功能的修饰器，改写time方法报错如下：

屏幕快照 2019-08-16 10.41.04.png

4.修饰器也可以在类外面使用
在类外面使用必须写在类前面

{
  let typename=function(target,name,descriptor){
    target.myname='hello';
  }

  @typename
  class Test{

  }
  console.log('类修饰符',Test.myname);//myname属于静态属性
}

打印结果：
类修饰符 hello

有第三方修饰器的js库：core-decorators;

安装：npm install core-decorators
安装之后直接用 例如： @typename 的方式引用就可以了

3.修饰器不一样的写法 (更加有复用性 可维护性)

{
  //先写一个修饰器对应的方法,
  //通过箭头函数传一个type值
  let log=(type)=>{
    //返回一个function这个function就是修饰器的几个参数
    return function (target,name,descriptor) {
      let src_method=descriptor.value;
      descriptor.value=(...arg)=>{
        src_method.apply(target,arg);
        console.info(`log ${type}`);
      }
    }
  }

  class AD{
    @log('show')
    show(){
      console.info('ad is show')
    }
    @log('click')
    click(){
      console.log('ad is click');
    }
  }

  let ad=new AD();
  ad.show();
  ad.click();
}

打印结果：
ad is show
log show
ad is click
log click