JS修饰器

修饰器(Decorator)是一个函数,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经支持。本文参考阮一峰老师的文章

环境安装

目前es7还没出,要让es6支持Decorator就需要安装与配置Babel转码器的插件。
1 .如果项目已经在用npm管理包

//安装
npm i --save-dev babel-plugin-transform-decorators-legacy

2 . 配置项目目录下的.babelrc 文件(babel配置文件),没有就创建一个

//追加大括号内的内容,不懂babel可以搜索相关资料
{
 'plugins': ['transform-decorators-legacy']
}

使用

//如果有一个叫,修饰Class
@decoratorA  //修饰类
class Person
{
  @descratorB //修饰方法
  say(message){
     
  }
}  

修饰器本质

1.修饰类

//修饰类,以上面的使用为例,实际在编译期间将代码修改成这样
function decoratorA(target){  //Person
    //修改target,添加各种方法或者属性等
}

decoratorA(Person);

2.修饰方法

function decoratorB(target, name, descriptor){
  // target 修饰的目标对象
  // name 方法名
  // descriptor对象值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
 // 可以通过修改descriptor描述器来修改要
  return descriptor;
}

实际应用

  1. 写一个为类实例添加say方法的修饰器
 function sayable(target){
    target.prototype.say  = function(message){
        console.log(message)
    }
}

@sayable
class Person{}

var person = new Person();
person.say("good bye");  //"good bye"

2.写一个计算方法执行时间的修饰器

function testable(target, name, descriptor){
    let oldValue = descriptor.value;
    descriptor.value = function(){
        let beginTime = new Date();
        let result = oldValue.apply(null, arguments);
        let endTime = new Date();
        let wasteTime = endTime.getTime() - beginTime.getTime();
        console.log(`执行方法'${name}'花了${wasteTime} ms`,arguments, result);
        return result;
    }
}


class Person{
    @testable
    countStars(num){
        for(var i = 0; i<num;i++){
            console.log(`第${i}个星星`);
        }
    }
}  

var haofeng = new Person();
haofeng.countStars(10000);// 数10000个星星试试?

3.如果要计算异步方法的时间呢,我们稍微修改一下

function testable(target, name, descriptor){
    let oldValue = descriptor.value;
    descriptor.value = function(){
        let beginTime = new Date();
        let result = oldValue.apply(null, arguments);
        let methodArguments = arguments;
        
        if(result instanceof Promise){
             result.then(function(data){
                     let endTime = new Date();
                     let wasteTime = endTime.getTime() - beginTime.getTime();
                     console.log(`执行方法'${name}'花了${wasteTime} ms`,methodArguments, data);
             });
        }else{
            let endTime = new Date();
            let wasteTime = endTime.getTime() - beginTime.getTime();
            console.log(`执行方法'${name}'花了${wasteTime} ms`,arguments, result);
        }
         return result;
    }
}


class Person{
    sleep(interval){ 
        return new Promise(function(resolve, reject){
            setTimeout(resolve,interval);
        });
    }
      
    @testable
    async countStars(interval){
         await sleep(interval);
    }
}  

var gengzhiBoy = new Person();
gengzhiBoy.countStars(10000);// 数10s星星试试?

总结:

JS修饰器(decorator)其实就那么一回事,只是一个通过@符号修改类或类属性的一个方法。熟悉使用修饰器将会极大简化代码编写,提高代码可读性。文章新手,纯手打,如有问题,欢迎指正😄

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 类的修饰 修饰器(Decorator)是一个函数,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经...
    呼呼哥阅读 1,469评论 0 0
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,253评论 7 35
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,606评论 4 43
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,785评论 18 399
  • 明明是日常反思,但却总是出了问题,再去反思, 这几天,表现真的不好,是对于我自己来说。 心态不好,一节完蛋。 自律...
    甜澈阅读 376评论 0 0