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]

使用裝飾器的主要好處

• 模組化： 裝飾器可讓您將日誌記錄、驗證和效能監控等功能與類別或方法的主要邏輯分開。

• 程式碼可重複使用性：透過使用裝飾器，您可以避免在多個方法或類別中重複相同的邏輯。

• 可讀性：裝飾器使您的程式碼更具聲明性，使其他開發人員能夠一目了然地輕鬆理解類別或方法的行為和用途。

隨著裝飾器越來越接近成為標準，它們將繼續成為尋求增強 JavaScript 應用程式的開發人員的重要工具。

立即開始嘗試裝飾器，以改善專案的結構和可維護性！