ES6总结 17- Decorator

ES6学习总结是自己在学习过程中的总结，记笔记就是为了督促自己学习和复习，好记性不如烂笔头。如果有错误，感谢指出。

Decorator

修饰器是一个函数，用来修改类的行为

1、函数

2、修改行为，扩展类的功能

3、对类进行操作，仅在类中可用

需要额外安装插件，打补丁修饰器语法

npm installbabel-plugin-transform-decorators-legacy--save-dev

.bebelrc
{
    "presents":["es2015"],
    "plugins":["transform-decorators-lengcy"]
}

修饰器限制功能只读

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

  class Test{
    @readonly
    time(){
      return '2017-03-11'
    }
  }

  let test=new Test();

  // test.time=function(){
  //   console.log('reset time');
  // }; 报错,不允许修改

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

也可以在类的前面进行修饰

{
  let typename=function(target,name,descriptor){
    target.myname='hello';//增加一个静态属性myname
  }

  @typename//表示对类的修饰
  class Test{

  }

  console.log('类修饰符',Test.myname);//hello
}

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

应用：日志系统

传统中，埋点会写在业务系统中，使用修饰器实现其他写法；

优点：把埋点系统抽离出来，代码复用，脱离了业务系统。

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