当前位置：首页 > 文章列表 > 文章 > 前端 > 掌握 JavaScript 装饰器

掌握 JavaScript 装饰器

来源：dev.to 2024-12-27 15:31:10 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《掌握 JavaScript 装饰器》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

掌握 JavaScript 装饰器

javascript 装饰器是一项强大的功能，可以简化代码并增强可读性，特别是在处理复杂的应用程序时。在这篇博客中，我们将通过实际示例来简化装饰器，使高级开发人员更容易有效地实现它们。

什么是 javascript 装饰器？

装饰器是一种用于修改类及其成员的特殊语法。它们是可应用于类、方法或属性的函数，使您能够扩展行为而无需直接修改源代码。它们允许您以干净且可重用的方式封装逻辑，例如日志记录、验证或其他元级关注点。

为什么使用装饰器？

可重用逻辑：装饰器让您可以添加常用功能（如日志记录、验证等），而无需在应用程序中重复相同的代码。
提高可读性：使用装饰器，您可以将复杂的逻辑封装成干净的声明性语法，使您的代码更具可读性和可维护性。
关注点分离：您可以将业务逻辑与缓存、监控或性能跟踪等元级关注点分开。

现在 javascript 中可以使用装饰器吗？

目前，javascript 本身不支持装饰器。它们是 ecmascript 规范流程中的第 3 阶段提案，这意味着它们即将成为标准功能。然而，装饰器还不是官方 javascript 规范的一部分，因此它们只能与 typescript 或 babel 等转译器一起使用。

在 typescript 中启用装饰器

{
    "compileroptions": {
        "experimentaldecorators": true
    }
}

这将允许您在 typescript 代码中使用装饰器，并且 typescript 将处理到 javascript 的转换。

在 babel 中启用装饰器

如果您使用 babel，您可以使用 @babel/plugin-proposal-decorators 插件启用装饰器。要进行设置，请按照以下步骤操作：

1.安装插件：

 npm install @babel/plugin-proposal-decorators --save-dev

2.将插件添加到您的 babel 配置中：

 {
     "plugins": [
         ["@babel/plugin-proposal-decorators", { "legacy": true }]
     ]
 }

此配置将允许 babel 将装饰器语法转换为标准 javascript。

使用装饰器的真实示例

让我们看一个真实世界的示例，了解如何使用装饰器向类、方法和属性添加常见功能。我们将从一个简单的日志装饰器和验证装饰器开始。

日志装饰器

function logExecution(target, key, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args) {
        console.log(`Method ${key} invoked with arguments:`, args);
        return originalMethod.apply(this, args);
    };

    return descriptor;
}

class Calculator {
    @logExecution
    add(a, b) {
        return a + b;
    }
}

const calc = new Calculator();
calc.add(5, 7); // Logs: Method add invoked with arguments: [5, 7]