裝飾器模式（Decorator?Pattern）是一種結(jié)構(gòu)型設(shè)計模式，它允許動態(tài)地向一個對象添加新的行為，本文將帶大家詳細(xì)了解一下JavaScript裝飾器模式，文中有相關(guān)的示例代碼供大家參考，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)

什么是裝飾器模式

裝飾器模式（Decorator Pattern）是一種結(jié)構(gòu)型設(shè)計模式，它允許動態(tài)地向一個對象添加新的行為。在不改變對象本身的情況下，通過將對象包裝在一個裝飾器中，來增強對象的功能。這個模式的核心是使用一個裝飾器類，來包裝一個被裝飾的類，使得裝飾器類可以動態(tài)地添加新的功能或者修改已有的功能。

裝飾器模式的主要用途是為一個原始對象添加新的功能或者修改已有的功能，同時保持原始對象的接口不變，并且可以在運行時動態(tài)地添加或刪除功能。

為什么要有裝飾器模式

在開發(fā)過程中，我們經(jīng)常需要擴(kuò)展一個類或?qū)ο蟮墓δ埽侵苯有薷念惢驅(qū)ο罂赡軙?dǎo)致代碼復(fù)雜性和可維護(hù)性下降。裝飾器模式提供了一種優(yōu)雅的方式來擴(kuò)展類或?qū)ο蟮墓δ?，且無需修改基本的對象或類。它使代碼更加模塊化、易于維護(hù)和擴(kuò)展。

裝飾器模式應(yīng)用場景

JS裝飾器模式通常用于以下場景：

將對象的功能添加到已存在的對象中，而不影響原始對象的接口。
實現(xiàn)AOP（面向切面編程）并在多個組件之間共享代碼。
通過運行時組合來實現(xiàn)功能，而不是繼承。

舉個栗子

下面我們來舉 2 個例子，更加具象的理解什么是裝飾器模式：

給汽車加個真皮座椅

class Car {
  constructor() {
    this.price = 10000;
    this.speed = '100 km/h';
  }

  getPrice() {
    return this.price;
  }

  getSpeed() {
    return this.speed;
  }
}

// 汽車裝飾器
class CarDecorator {
  constructor(car) {
    this.car = car;
  }

  getPrice() {
    return this.car.getPrice();
  }

  getSpeed() {
    return this.car.getSpeed();
  }
}

// 真皮座椅裝飾器
class LeatherSeatsDecorator extends CarDecorator {
  constructor(car) {
    super(car);
    this.price = 1000;
    this.description = 'Leather seats';
  }

  getPrice() {
    return this.car.getPrice() + this.price;
  }

  getDescription() {
    return this.car.getDescription() + ', ' + this.description;
  }
}

let car = new Car();
console.log(car.getPrice()); // 10000

// 帶有真皮座椅的汽車
let carWithLeatherSeats = new LeatherSeatsDecorator(car);
console.log(carWithLeatherSeats.getPrice()); // 11000
console.log(carWithLeatherSeats.getDescription()); // undefined, Leather seats

在上面的代碼中，我們定義了一個 Car 類作為原始對象，并且定義了一個 CarDecorator 類作為裝飾器類。然后我們定義了一個 LeatherSeatsDecorator 類，它繼承自 CarDecorator 類，用來添加真皮座椅的功能。

一個簡單的數(shù)據(jù)緩存

class DataService {
  fetchData() {
    console.log("Fetching data from server...");
    return [1, 2, 3];
  }
}

class DataCacheDecorator {
  constructor(dataService) {
    this.dataService = dataService;
    this.cache = null;
  }

  fetchData() {
    if (this.cache === null) {
      console.log("Cache not exist...");
      this.cache = this.dataService.fetchData();
    } else {
      console.log("Data retrieved from cache");
    }
    return this.cache;
  }
}

let dataService = new DataService();
dataService = new DataCacheDecorator(dataService);

console.log(dataService.fetchData());
console.log(dataService.fetchData());

上述代碼將有如下輸出：

Cache not exist...
Fetching data from server...
[1, 2, 3]
Data retrieved from cache
[1, 2, 3]

總結(jié)

JS裝飾器模式提供了一種優(yōu)雅的方式來擴(kuò)展類或?qū)ο蟮墓δ埽鵁o需修改基本的對象或類。它使代碼更加模塊化、易于維護(hù)和擴(kuò)展。在適當(dāng)?shù)那闆r下，使用裝飾器模式可以提高代碼的可讀性和可維護(hù)性。

為了更好的理解裝飾器模式，本文選取了 2 個簡單易理解的例子。真實場景下 JS 裝飾器模式的應(yīng)用要復(fù)雜的多，目前 ES6、TypeScript、React、Express、Koa、Mobx、Redux 等場景都已經(jīng)廣泛使用了 JS 裝飾器，以后文章會針對上述場景進(jìn)行具體詳細(xì)介紹。

到此這篇關(guān)于JavaScript 裝飾器模式詳解的文章就介紹到這了,更多相關(guān)JavaScript 裝飾器模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: