装饰器非常好用

前面给大家发了一篇文章xxx，给大家介绍了一遍JavaScript中的装饰器，今天就给大家介绍一下在我项目中用到过的几个装饰器的思路吧！Tij28资讯网——每日最新资讯28at.com

代码是伪代码，只是提供个思路，实际上代码不止这么少。Tij28资讯网——每日最新资讯28at.com

防抖装饰器

当我们在一些特殊场景时，需要使用防抖这个优化手段来进行优化，比如：Tij28资讯网——每日最新资讯28at.com

• 表单提交
• 数据的搜索
• 数据的筛选
• 某些数据的更改
• 数据改变时触发的回调

这些函数都可以使用防抖装饰器来进行性能优化，防抖的意思是，当你频繁执行某一个操作时，这个操作只执行最后一次，确保不会因为频繁的执行而损耗性能~下面是装饰器的封装：Tij28资讯网——每日最新资讯28at.com

// 装饰器的封装function debounce(delay) {  return function(target, key, descriptor) {    const originalMethod = descriptor.value;    let timer;    descriptor.value = function(...args) {      clearTimeout(timer);      timer = setTimeout(() => {        originalMethod.apply(this, args);      }, delay);    };    return descriptor;  };}

当我们某个函数需要进行防抖处理时：Tij28资讯网——每日最新资讯28at.com

@debounce(500)submit() {}@debounce(500)handleChange() {}@debounce(500)handleFilter() {}

节流装饰器

节流跟防抖是不同的优化手段，节流是保证在一段时间内只执行一次操作，适用在这些场景中：Tij28资讯网——每日最新资讯28at.com

• 监听窗口宽度变化的回调
• 监听滚动条变化的回调

下面是装饰器的封装：Tij28资讯网——每日最新资讯28at.com

function throttle(delay) {  return function(target, key, descriptor) {    const originalMethod = descriptor.value;    let timer;    let lastExecTime = 0;    descriptor.value = function(...args) {      const now = Date.now();      if (now - lastExecTime >= delay) {        lastExecTime = now;        originalMethod.apply(this, args);      } else {        clearTimeout(timer);        timer = setTimeout(() => {          originalMethod.apply(this, args);        }, delay);      }    };    return descriptor;  };}

当我们某个函数需要进行节流处理时：Tij28资讯网——每日最新资讯28at.com

@throttle(200)handleScroll() {}@throttle(200)handleResize() {}

日志输出装饰器

日志的输出是很重要的，尤其是在 Nodejs 端，日志输出会通过 pm2 等工具，记录在一些日志文件里，尤其是一些比较公用的工具函数，更是非常重要，一般需要记录这些内容。Tij28资讯网——每日最新资讯28at.com

• 执行的函数名称
• 执行时传入的参数
• 执行后获取到的结果

下面是装饰器的封装：Tij28资讯网——每日最新资讯28at.com

function log(target, key, descriptor) {  const originalMethod = descriptor.value;  descriptor.value = function(...args) {    console.log(`Entering ${key} with arguments:`, args);    const result = originalMethod.apply(this, args);    console.log(`Exiting ${key} with result:`, result);    return result;  };  return descriptor;}

使用的时候：Tij28资讯网——每日最新资讯28at.com

class Common {    @log()    commonRequest(url, params) {        return request(url, params)    }}const common = new Common()common.commonRequest('http://xxx.com', { name: 'l' })Entering commonRequest with arguments: ['http://xxx.com', { name: 'l' }]Exiting commonRequest with result: { 结果 }

错误处理装饰器

跟日志装饰器一样，错误其实也是日志的一部分，错误日志非常重要，因为 Nodejs 的线上报错，大部分都需要通过查日志来进行定位，所以我们也可以封装一个错误的处理装饰器：Tij28资讯网——每日最新资讯28at.com

function errorHandler(target, key, descriptor) {  const originalMethod = descriptor.value;  descriptor.value = function (...args) {    try {      originalMethod.apply(this, args);    } catch (error) {      console.error(`Error occurred in ${key}:`, error);    }  };  return descriptor;}

使用的时候：Tij28资讯网——每日最新资讯28at.com

class Common {    @log()    commonRequest(url, params) {        return request(url, params)    }}const common = new Common()common.commonRequest('http://xxx.com', { name: 'l' })Error occurred in commonRequest: Request Error

权限校验装饰器

权限的校验在前端一般都不用装饰器，但是在 Nodejs 管理接口时，涉及到权限校验时，用装饰器是非常的方便的。Tij28资讯网——每日最新资讯28at.com

function authenticated(target, key, descriptor) {  const originalMethod = descriptor.value;  descriptor.value = function(...args) {    if (isAuthenticated()) {      originalMethod.apply(this, args);    } else {      console.log('Unauthorized access!');    }  };  return descriptor;}

使用的时候，这样就只有 admin 的身份可以访问这个接口了。Tij28资讯网——每日最新资讯28at.com

class User {      @Get('/xx/xx')    @authenticated('admin')    getUser() {}}

计时装饰器

如果有一天，你们需要埋点，计算一些比较重要函数的运行性能时，那么你肯定需要计算这些函数的执行时间是多少，这时候封装一个计时装饰器会让你非常方便。Tij28资讯网——每日最新资讯28at.com

function timing(target, key, descriptor) {  const originalMethod = descriptor.value;  descriptor.value = function(...args) {    const start = performance.now();    const result = originalMethod.apply(this, args);    const end = performance.now();    console.log(`Execution time of ${key}: ${end - start} milliseconds`);    return result;  };  return descriptor;}

使用时：Tij28资讯网——每日最新资讯28at.com

class Common {    @timing()    commonRequest(url, params) {        return request(url, params)    }}const common = new Common()common.commonRequest()Execution time of commonRequest: 20 milliseconds

缓存装饰器

这个装饰器适用在某一些场景，如果你有一个函数是用来计算值的，并且计算的过程非常复杂非常耗时间，那我建议你可以把这些计算结果储存起来，而不是每次都重新计算，这能大大提升你的计算性能。Tij28资讯网——每日最新资讯28at.com

function cache(target, key, descriptor) {  const originalMethod = descriptor.value;  const cache = new Map();  descriptor.value = function(...args) {    const cacheKey = JSON.stringify(args);    if (cache.has(cacheKey)) {      return cache.get(cacheKey);    }    const result = originalMethod.apply(this, args);    cache.set(cacheKey, result);    return result;  };  return descriptor;}

使用时：Tij28资讯网——每日最新资讯28at.com

class Compute() {    @cache()    run(num1, num2) {        // 这里举个简单例子        return num1 + num2    }}const c = new Compute()c.run(1, 2) // 3 首次计算c.run(1, 2) // 3 接下来都从缓存中拿

参数校验装饰器

在老项目中，无法用到 typescript 这么好的东西时，对于一些函数执行时，有必要用装饰器对传进来的参数的类型进行校验~没办法，没有 typescript 真难受啊！Tij28资讯网——每日最新资讯28at.com

function validateArgs(...types) {  return function (target, key, descriptor) {    const originalMethod = descriptor.value;    descriptor.value = function (...args) {      for (let i = 0; i < types.length; i++) {        const type = types[i];        const arg = args[i];        if (typeof arg !== type) {          throw new Error(`Invalid argument type at index ${i}`);        }      }      originalMethod.apply(this, args);    };    return descriptor;  };}

使用的时候需要传入某个参数的类型限制。Tij28资讯网——每日最新资讯28at.com

class Common {    @validateArgs(['string', 'object'])    commonRequest(url, params) {        return request(url, params)    }}const common = new Common()common.commonRequest(123, 123) // 报错

Tij28资讯网——每日最新资讯28at.com