Decorators(修饰器)

定义：
Decorator修饰器是一个函数用来修改类的行为：

修饰器是一个函数
修改行为
修改类的行为（修饰器只在类的范围类有用）
在使用Decorators之前，需要使用命令行安装一个包，在命令行输入

npm install babel-plugin-transform-decorators-legacy --save-dev

然后在.babelrc文件中设置 “plugins”: [“transform-decorators-legacy”]

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

也可以使用第三方修饰器js库：

npm install core-decorators

语法：function(修改的类本身，修改的属性名称，该属性的描述对象）

let readonly = function(target,name,descriptor){
    descriptor.writable = false; 
    return descriptor;
  };

实例1：自定义一个修饰器

{
  //定义一个修饰器
  let readonly = function(target,name,descriptor){
    descriptor.writable = false;
    return descriptor;
  };
  
  class Text{
  //修改行为
    @readonly
    time() {
        return '2017-03-11'
      }
  }

  let test = new Text();
  //无法重新设置属性
  test.time = function(){
    console.log('reset time'); //不生效
  }

  console.log(test.time()); //2017-03-11
}

通过上面的代码，我们可以了解到Decorators修饰器的作用了，它本身是一个函数，可以在里面设置一些针对属性进行操作的外部行为，从而达到修改行为的效果。这是设置了time()属性不允许修改，所以console.log(‘reset time’)不生效.达到“只读”的功能。

实例2：在类外面进行操作（必须在class前面！）

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

  @typename
  class Test{

  }
  console.log('类修饰符',Test.myname);
  //打印结果
  //'修饰符' hello
  //第三方库 修饰器js库 core-decorators
}

当修饰器在类外面进行操作时可达到修改类行为的功能。

实例3：日志系统功能

{
  let log = (type) =>{
    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.info('ad is click');
    }
  }

  let ad = new AD();
  ad.show(); 
  //打印结果
  //ad is show
  // log show
  ad.click();
  //打印结果
  //ad is click
  //log click
}

运行报错：在这里插入图片描述
总结：Decorators修饰器是ES7的语法，上面的功能我们大概的可以知道它的作用就是修改行为，我自己在本地实践时发现使用Decorators会报错，如VSCode中"experimentalDecorators"设置问题，虽然通过首选项->设置->搜索experimentalDecorators参数为true,在VSCode编辑器中则不会提示报错，但在浏览器运行时还是报错了，问题请看上面的图，搞了一下午还是不行，目前还没有解决方法，有点伤心T.T，如果有大神解决了还望指点一二~~

猜你喜欢