JS修饰器

最新推荐文章于 2024-10-01 17:43:16 发布

songxiugongwang

最新推荐文章于 2024-10-01 17:43:16 发布

阅读量2.3k

点赞数 2

文章标签： JS修饰器

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;
}

实际应用

写一个为类实例添加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星星试试?