軟體設計模式：每個優秀應用程式背後的秘密

想像一下在沒有手冊的情況下拼搭一套樂高積木。當然，你最終可能會得到一些隱約類似於太空船的東西，但更有可能的是，你最終會得到一堆色彩繽紛的混亂。在編碼世界中，設計模式就像樂高手冊——它們為您提供了解決常見問題的經過驗證的藍圖，使您的程式碼更乾淨、更有效率、更易於維護。

但別擔心，這不是一個關於程式設計原理的枯燥講座。將其視為 JavaScript 中一些最常見設計模式的有趣小指南，並附有現實生活中的類比，使這些概念易於理解。

1. 單例模式：唯一的

它是什麼？

單例模式確保一個類別只有一個實例並提供對其的全域存取點。這就像你的電視有一個遙控器。您不需要多個遙控器來控制音量、更改頻道或關閉它 - 只需一個遙控器。

現實生活中的用例：

在 JavaScript 中，此模式通常用於管理全域應用程式狀態。例如，如果您在電子商務網站上有一個購物車，您希望與購物車互動的所有組件（例如添加商品、刪除商品或結帳）都引用購物車的相同實例。單例確保所有這些操作影響同一個購物車，而不是它的不同副本。

class ShoppingCart {
  constructor() {
    if (!ShoppingCart.instance) {
      this.items = [];
      ShoppingCart.instance = this;
    }
    return ShoppingCart.instance;
  }

  addItem(item) {
    this.items.push(item);
  }

  getItems() {
    return this.items;
  }
}

const cart1 = new ShoppingCart();
const cart2 = new ShoppingCart();

cart1.addItem('Laptop');
console.log(cart2.getItems()); // ['Laptop']

2. 觀察者模式：八卦網絡

它是什麼？

觀察者模式就是為了保持物件同步。當一個物件發生變化時，其他物件需要知道它。這就像一個群聊，每個人都會不斷了解正在發生的事情。如果有人改變週末計劃，小組中的每個人都會收到備忘錄。

現實生活中的用例：

在 JavaScript 中，這種模式常用於事件處理系統。假設您正在建立一個社交媒體應用程式。當有人喜歡某個帖子時，您想要更新喜歡計數，通知帖子的作者，並且可能觸發動畫。觀察者模式允許這些不同的組件在不直接連接的情況下保持更新。

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log(`Observer received: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify('New post liked!'); 
// Output: Observer received: New post liked!
// Output: Observer received: New post liked!

3. 工廠模式：千篇一律

它是什麼？

工廠模式就是創建對象，而不指定將創建的對象的確切類別。想像一下餅乾切割機。在按下切刀之前，你並不知道麵團會變成什麼形狀，但你知道你會得到一塊餅乾。

現實生活中的用例：

當您擁有一組共用公共介面或結構但具有不同底層實作的物件時，此模式特別有用。例如，在遊戲中，您可能有不同類型的敵人（殭屍、吸血鬼、狼人），但它們都具有共同的屬性，例如生命值、速度和攻擊力。工廠可以幫助您創建這些敵人，而無需擔心特定類型。

class Enemy {
  constructor(type) {
    this.type = type;
    this.health = 100;
  }

  attack() {
    console.log(`${this.type} attacks with ${this.attackPower}`);
  }
}

class EnemyFactory {
  createEnemy(type) {
    let enemy;

    if (type === 'zombie') {
      enemy = new Enemy('Zombie');
      enemy.attackPower = 10;
    } else if (type === 'vampire') {
      enemy = new Enemy('Vampire');
      enemy.attackPower = 20;
    } else if (type === 'werewolf') {
      enemy = new Enemy('Werewolf');
      enemy.attackPower = 30;
    }

    return enemy;
  }
}

const factory = new EnemyFactory();

const zombie = factory.createEnemy('zombie');
zombie.attack(); // Zombie attacks with 10

const vampire = factory.createEnemy('vampire');
vampire.attack(); // Vampire attacks with 20

4. 模組模式：有組織的工作空間

它是什麼？

模組模式就像擁有一個組織良好的工作空間，所有東西都有它的位置。它可以幫助您組織和封裝程式碼的不同部分，防止全域命名空間變得混亂。

現實生活中的用例：

此模式在 JavaScript 中對於建立公有和私有變數和函數特別有用。例如，當您建立庫或外掛程式時，您可能希望向外界公開某些方法，同時隱藏其他方法。模組模式可以讓您做到這一點。

const Calculator = (function() {
  let result = 0;

  function add(x) {
    result += x;
    return result;
  }

  function subtract(x) {
    result -= x;
    return result;
  }

  function multiply(x) {
    result *= x;
    return result;
  }

  function divide(x) {
    if (x !== 0) {
      result /= x;
      return result;
    } else {
      console.error('Cannot divide by zero');
    }
  }

  return {
    add,
    subtract,
    multiply,
    divide,
    getResult: () => result,
  };
})();

console.log(Calculator.add(10)); // 10
console.log(Calculator.subtract(2)); // 8
console.log(Calculator.multiply(3)); // 24
console.log(Calculator.divide(4)); // 6

5. 適配器模式：插頭轉換器

它是什麼？

適配器模式允許不相容的介面一起工作。您可以將其想像為出國旅行時使用的插頭轉接器。您的筆記型電腦充電器的插頭可能無法插入其他國家的牆壁插座，但只要使用正確的轉接器，它就可以完美工作。

現實生活中的用例：

在 JavaScript 中，當您與與應用程式結構不完全匹配的第三方程式庫或 API 整合時，您可能會使用適配器模式。 Adapter 可以將一個類別的介面轉換為客戶期望的另一個接口，從而實現無縫整合。

class OldApi {
  constructor() {
    this.data = 'Old API data';
  }

  getData() {
    return this.data;
  }
}

class NewApi {
  fetchData() {
    return 'New API data';
  }
}

class ApiAdapter {
  constructor(oldApi) {
    this.oldApi = oldApi;
  }

  fetchData() {
    return this.oldApi.getData();
  }
}

const oldApi = new OldApi();
const adapter = new ApiAdapter(oldApi);

console.log(adapter.fetchData()); // 'Old API data'

6. The Composite Pattern: The Russian Nesting Dolls

What is it?

The Composite pattern allows you to treat individual objects and compositions of objects uniformly. It’s like Russian nesting dolls where each doll is part of a larger structure, but you can interact with them both as individual dolls and as a nested set.

Real-Life Use Case:

This pattern is often used in scenarios where you need to manage a hierarchy of objects. For example, consider a file system where files and folders are represented as objects. A folder can contain multiple files or even other folders, and you want to treat both files and folders similarly when it comes to operations like moving, copying, or deleting.

class File {
  constructor(name) {
    this.name = name;
  }

  display() {
    console.log(this.name);
  }
}

class Folder {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  add(child) {
    this.children.push(child);
  }

  display() {
    console.log(this.name);
    this.children.forEach(child => child.display());
  }
}

const file1 = new File('file1.txt');
const file2 = new File('file2.txt');
const folder = new Folder('MyFolder');
folder.add(file1);
folder.add(file2);

folder.display();
// Output:
// MyFolder
// file1.txt
// file2.txt

Conclusion

These are just a few of the many design patterns that can make your JavaScript code more robust, maintainable, and, let’s face it, fun to write. Whether you’re building the next big app or just trying to organize your code a bit better, these patterns can be your secret weapon. So next time you’re stuck, remember: there’s probably a pattern for that!

And hey, even if your code doesn’t end up looking like a LEGO spaceship, at least it won’t be a pile of colorful chaos.

Happy coding! ?

以上是軟體設計模式：每個優秀應用程式背後的秘密的詳細內容。更多資訊請關注PHP中文網其他相關文章！