JavaScript装饰器实践

最新推荐文章于 2024-07-19 18:19:33 发布

taokexia

最新推荐文章于 2024-07-19 18:19:33 发布

阅读量308

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/taokexia/article/details/105672528

版权

本文详细介绍了JavaScript装饰器的概念、使用环境配置、四大类型装饰器（类装饰器、方法装饰器、属性装饰器和参数装饰器）的实践应用，以及装饰器的执行顺序和限制。通过实例展示了装饰器如何增强代码功能，提供无侵入式的代码修改方式。

摘要由CSDN通过智能技术生成

装饰器（Decorator）是一种设计模式，通过装饰器可以注释或修改类和类方法，而不必重复编写代码，提高开发效率。许多面向对象的语言都有这项功能。

装饰器模式

Decorator 是ES7中添加的JavaScript新特性。而在 TypeScript 中，很早就支持 Decorator 了。说到 Decorator ，首先要来了解装饰器模式。装饰器模式的定义是“在不改变原对象的基础上，通过对其进行包装拓展，使原有对象可以满足用户的更复杂需求”。装饰器模式的优点就是无侵入性，不会破坏原有的代码，而是在原有代码的基础上增加功能。

简单的装饰器模式小案例:

// 打印函数
function log(...msg) {
   
    console.log('msg:', ...msg);
}

/**
 * 函数节流, 采用装饰器模式
 * @param fn 原函数
 * @param time 间隔时间, 单位 s
 */
function throttle (fn, time) {
   
    let isRun = true;
    // 通过装饰器模式返回新的函数
    return function () {
   
        // 在原函数的基础上增加功能
        if (isRun) {
   
            isRun = false;
            // 执行原函数
            const args = arguments;
            fn.apply(this, args);
            setTimeout(() => {
   
                isRun = true;
            }, time * 1000);
        }
    };
}

// 传入 log 函数
const send = throttle(log, 5);
// 调用函数, 重复执行10次
for (let i = 0; i < 10; ++i) {
   
    send('aaa', 'bbb', 'ccc');
}

执行结果

// 只打印出一次的结果
msg: aaa bbb ccc

配置使用环境

装饰器目前还无法直接在浏览器中使用，需要配置开发环境

在 JavaScript 中使用:以通过安装 babel-plugin-transform-decorators-legacy 这个插件来使用装饰器

在TypeScript中使用:

tsc --init # 生成 tsconfig.json 配置文件

配置

{
     
  "compilerOptions": {
     
    "target": "es2015",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
  ]
}