模塊模式通過(guò)閉包封裝私有狀態(tài)，利用IIFE創(chuàng)建獨(dú)立作用域並暴露有限接口，有效避免全局污染並提升可測(cè)試性；2. 工廠模式集中對(duì)象創(chuàng)建邏輯，根據(jù)參數(shù)返回不同類型的對(duì)象實(shí)例，減少客戶端對(duì)具體類的依賴；3. 觀察者模式建立一對(duì)多的事件通知機(jī)制，實(shí)現(xiàn)發(fā)布者與訂閱者解耦，適用於事件驅(qū)動(dòng)系統(tǒng)；4. 單例模式確保一個(gè)類僅有一個(gè)實(shí)例，並提供全局訪問(wèn)點(diǎn)，常用於日誌器、配置管理等場(chǎng)景；5. 裝飾器模式在不修改原對(duì)象的基礎(chǔ)上動(dòng)態(tài)添加功能，支持關(guān)注點(diǎn)分離，可用於性能監(jiān)控、權(quán)限校驗(yàn)等橫切邏輯；選擇設(shè)計(jì)模式應(yīng)基於具體需求：封裝私有數(shù)據(jù)用模塊模式，多種對(duì)象創(chuàng)建用工廠模式，解耦事件用觀察者模式，保證唯一實(shí)例用單例模式，動(dòng)態(tài)擴(kuò)展功能用裝飾器模式，合理應(yīng)用能提升代碼結(jié)構(gòu)清晰度、復(fù)用性和可維護(hù)性，但應(yīng)避免過(guò)度設(shè)計(jì)。

編寫(xiě)可維護(hù)的JavaScript 代碼，離不開(kāi)對(duì)設(shè)計(jì)模式的理解和合理應(yīng)用。設(shè)計(jì)模式是解決常見(jiàn)問(wèn)題的成熟方案，能提升代碼的結(jié)構(gòu)清晰度、復(fù)用性和可測(cè)試性。以下是幾個(gè)在實(shí)際開(kāi)發(fā)中非常實(shí)用的JavaScript 設(shè)計(jì)模式，幫助你寫(xiě)出更易於維護(hù)的代碼。

1. 模塊模式（Module Pattern）——封裝私有狀態(tài)

JavaScript 沒(méi)有原生的private關(guān)鍵字，但可以通過(guò)閉包實(shí)現(xiàn)私有變量和方法。模塊模式利用立即執(zhí)行函數(shù)（IIFE）創(chuàng)建獨(dú)立作用域，對(duì)外只暴露必要的接口。

 const UserModule = (function () {
  let users = []; // 私有變量function validateName(name) {
    return name && name.length > 1;
  }

  return {
    add(name) {
      if (validateName(name)) {
        users.push(name);
        console.log(`${name} added.`);
      } else {
        console.log("Invalid name");
      }
    },
    list() {
      return [...users]; // 返回副本，避免外部直接修改}
  };
})();

優(yōu)點(diǎn)：

• 隱藏內(nèi)部實(shí)現(xiàn)細(xì)節(jié)
• 避免全局變量污染
• 易於單元測(cè)試（通過(guò)暴露的接口）

小技巧：現(xiàn)代ES6 模塊（ import / export ）已經(jīng)原生支持模塊化，但在需要私有狀態(tài)時(shí)，閉包封裝依然有價(jià)值。

2. 工廠模式（Factory Pattern）——?jiǎng)?chuàng)建對(duì)象的統(tǒng)一入口

當(dāng)你需要根據(jù)條件創(chuàng)建不同類型的對(duì)象時(shí)，工廠模式可以集中創(chuàng)建邏輯，避免重複的new操作。

 function createUser(type, name) {
  return {
    admin: () => ({ role: "admin", name, permissions: ["read", "write", "delete"] }),
    user: () => ({ role: "user", name, permissions: ["read"] }),
    guest: () => ({ role: "guest", name, permissions: ["read"] })
  }[type] || (() => ({ role: "unknown", name }));
}

// 使用const admin = createUser("admin", "Alice")();
const regularUser = createUser("user", "Bob")();

適用場(chǎng)景：

• 創(chuàng)建具有相似結(jié)構(gòu)但行為不同的對(duì)象
• 減少客戶端代碼對(duì)具體類的依賴
• 配置化對(duì)像生成（如表單控件、UI 組件）

3. 觀察者模式（Observer Pattern）——實(shí)現(xiàn)事件驅(qū)動(dòng)

觀察者模式用於實(shí)現(xiàn)一對(duì)多的依賴關(guān)係，當(dāng)一個(gè)對(duì)象狀態(tài)改變時(shí)，所有依賴者都會(huì)收到通知。非常適合處理事件系統(tǒng)、狀態(tài)更新等場(chǎng)景。

 class EventObserver {
  constructor() {
    this.observers = new Map(); // key: event, value: array of callbacks
  }

  subscribe(event, callback) {
    if (!this.observers.has(event)) {
      this.observers.set(event, []);
    }
    this.observers.get(event).push(callback);
  }

  notify(event, data) {
    const callbacks = this.observers.get(event);
    if (callbacks) {
      callbacks.forEach(cb => cb(data));
    }
  }

  unsubscribe(event, callback) {
    const callbacks = this.observers.get(event);
    if (callbacks) {
      const index = callbacks.indexOf(callback);
      if (index > -1) {
        callbacks.splice(index, 1);
      }
    }
  }
}

// 使用const eventBus = new EventObserver();

eventBus.subscribe("userLogin", user => {
  console.log("Welcome, " user);
});

eventBus.notify("userLogin", "John"); // 輸出: Welcome, John

優(yōu)勢(shì)：

• 解耦發(fā)布者和訂閱者
• 支持動(dòng)態(tài)綁定和解綁
• 可用於狀態(tài)管理雛形（如簡(jiǎn)易版Vuex）

4. 單例模式（Singleton Pattern）——確保唯一實(shí)例

某些對(duì)像只需要一個(gè)實(shí)例（如配置管理器、日誌器、數(shù)據(jù)庫(kù)連接），單例模式可以保證全局唯一。

 class Logger {
  constructor() {
    if (Logger.instance) {
      return Logger.instance;
    }
    this.logs = [];
    Logger.instance = this;
  }

  log(message) {
    this.logs.push(message);
    console.log(`[LOG] ${message}`);
  }

  getLogCount() {
    return this.logs.length;
  }
}

// 使用const logger1 = new Logger();
const logger2 = new Logger();
console.log(logger1 === logger2); // true

注意：構(gòu)造函數(shù)中判斷實(shí)例是否存在，避免多次初始化。

適用場(chǎng)景：

• 全局配置中心
• 緩存管理
• 路由實(shí)例

5. 裝飾器模式（Decorator Pattern）——?jiǎng)討B(tài)擴(kuò)展功能

裝飾器模式允許你在不修改原對(duì)象的前提下，動(dòng)態(tài)添加新功能。 ES2023 支持裝飾器語(yǔ)法（需Babel 或TypeScript），但也可以手動(dòng)實(shí)現(xiàn)。

 function withTiming(fn) {
  return function (...args) {
    console.log("Starting...");
    const start = performance.now();
    const result = fn.apply(this, args);
    const end = performance.now();
    console.log(`Execution time: ${end - start} ms`);
    return result;
  };
}

function fetchData() {
  // 模擬耗時(shí)操作for (let i = 0; i < 1e7; i ) {}
  return "Data fetched";
}

const timedFetch = withTiming(fetchData);
timedFetch();

用途：

• 日誌、性能監(jiān)控
• 權(quán)限校驗(yàn)
• 輸入驗(yàn)證

總結(jié)：如何選擇合適的設(shè)計(jì)模式？

• 需要封裝私有數(shù)據(jù)？ →模塊模式
• 多種對(duì)象創(chuàng)建邏輯？ →工廠模式
• 解耦事件通知？ →觀察者模式
• 全局唯一實(shí)例？ →單例模式
• 動(dòng)態(tài)增強(qiáng)功能？ →裝飾器模式

這些模式不是銀彈，關(guān)鍵在於理解其意圖，並在合適場(chǎng)景下使用。過(guò)度設(shè)計(jì)反而會(huì)增加複雜度。保持代碼簡(jiǎn)單、清晰、可讀，才是可維護(hù)性的核心。

基本上就這些，不復(fù)雜但容易忽略。

以上是可維護(hù)代碼的JavaScript設(shè)計(jì)模式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！