ECMAScript6--18.Decorators修饰器

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'#'
    //不允许只读属性重新赋值；
  }
  

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
}