前端設計模式——裝飾者模式

裝飾者模式（Decorator Pattern）是一種結構型設計模式，它允許你在不改變對象自身的基礎上，動態地給一個對象添加額外的功能。在前端中，裝飾者模式經常被用於擴展或修改組件的行為或樣式。

JavaScript 中的裝飾者模式可以通過以下幾種方式實現：

1. 通過擴展對象的屬性或方法來實現裝飾者模式

const obj = {
  foo() {
    console.log('foo');
  }
}

// 定義一個裝飾函數，用於擴展原始對象的方法
function barDecorator(obj) {
  obj.bar = function() {
    console.log('bar');
  }
  return obj;
}

// 使用裝飾函數來擴展原始對象
const decoratedObj = barDecorator(obj);
decoratedObj.foo(); // 輸出 "foo"
decoratedObj.bar(); // 輸出 "bar"

在上面的示例中，我們首先定義了一個原始對象 `obj`，它包含一個方法 `foo`。然後，我們定義了一個裝飾函數 `barDecorator`，它接收一個對象作為參數，用於為這個對象添加一個新的方法 `bar`。最後，我們使用 `barDecorator` 函數來擴展原始對象 `obj`，並得到了一個新的對象 `decoratedObj`，它包含了原始對象的方法 `foo` 和新的方法 `bar`。

2. 通過擴展對象的原型來實現裝飾者模式

// 定義一個原始對象
function Foo() {}

// 在原型上定義一個方法
Foo.prototype.foo = function() {
  console.log('foo');
}

// 定義一個裝飾函數，用於擴展原型的方法
function barDecorator(clazz) {
  clazz.prototype.bar = function() {
    console.log('bar');
  }
}

// 使用裝飾函數來擴展原型
barDecorator(Foo);

// 創建一個新的對象，並使用擴展後的方法
const obj = new Foo();
obj.foo(); // 輸出 "foo"
obj.bar(); // 輸出 "bar"

在上面的示例中，我們首先定義了一個原始對象 `Foo`，它是一個構造函數，用於創建一個對象。然後，我們在原型上定義了一個方法 `foo`。接著，我們定義了一個裝飾函數 `barDecorator`，它接收一個構造函數作為參數，用於在原型上添加一個新的方法 `bar`。最後，我們使用 `barDecorator` 函數來擴展原始對象的原型，然後創建一個新的對象 `obj`，並使用擴展後的方法 `foo` 和 `bar`。

需要註意的是，裝飾者模式可以嵌套使用，也就是說，我們可以通過多個裝飾函數來依次為一個組件添加多個不同的功能。同時，裝飾者模式也可以用於對已有的組件進行擴展，使得我們可以在不改變原有代碼的情況下，給組件添加新的行為和樣式。