關於JavaScript設計模式的詳盡指南

在構建JavaScript應用程式時，你可能會遇到這樣的場景：你需要以某種預定義的方式構建物件，或者通過修改或調整一個普通的類來重複使用它，以適應多種使用情況。

當然，反覆解決這些問題並不方便。

這就是JavaScript設計模式來拯救你的地方。

JavaScript設計模式為你提供了一種結構化的、可重複的方法來解決JavaScript開發中經常出現的問題。

在本指南中，我們將看看什麼是JavaScript設計模式以及如何在你的JavaScript應用程式中使用它們。

1. 什麼是JavaScript設計模式？
2. 設計模式的型別
3. 設計模式的要素
4. 為什麼要使用設計模式？
5. 需要掌握的20個JavaScript設計模式
6. 實現設計模式的最佳實踐
7. 什麼時候應該使用設計模式？

什麼是JavaScript設計模式？

JavaScript設計模式是針對JavaScript應用開發中經常出現的問題的可重複的模板解決方案。

這個想法很簡單。世界各地的程式設計師，自開發之初，在開發應用程式時都會遇到一些重複出現的問題。隨著時間的推移，一些開發者選擇記錄經過測試的方法來解決這些問題，以便其他人可以輕鬆地參考這些解決方案。

隨著越來越多的開發者選擇使用這些解決方案，並認識到它們在解決問題方面的效率，它們被接受為解決問題的標準方式，並被命名為 “設計模式”。

隨著人們對設計模式的重要性有了更深的認識，這些模式得到了進一步的發展和標準化。現在，大多數現代設計模式都有一個明確的結構，被組織在多個類別之下，並在電腦科學相關的學位中作為獨立的課題進行教學。

設計模式的型別

下面是一些最流行的JavaScript設計模式的分類。

創造性

創造性設計模式是那些幫助解決在JavaScript中建立和管理新物件例項的問題。它可以簡單到限制一個類只有一個物件，也可以複雜到定義一個複雜的方法來手工挑選和新增JavaScript物件中的每個特徵。

創造性設計模式的一些例子包括Singleton、Factory、Abstract Factory和Builder，等等。

結構性

結構性設計模式是那些幫助解決圍繞管理JavaScript物件的結構（或模式）的問題。這些問題可能包括在兩個不同的物件之間建立關係，或者為特定的使用者抽象出一個物件的某些特徵。

結構化設計模式的幾個例子包括Adapter、Bridge、Composite和Facade。

行為性

行為設計模式是那些幫助解決如何在不同物件之間傳遞控制（和責任）的問題。這些問題可能涉及到控制對一個連結列表的訪問，或者建立一個可以控制對多種型別物件訪問的單一實體。

行為設計模式的一些例子包括命令、迭代器、Memento和觀察者。

併發性

併發設計模式是那些有助於解決多執行緒和多工的問題。這些問題可能需要在多個可用物件中保持一個活動物件，或者通過解複用傳入的輸入並逐件處理，來處理提供給系統的多個事件。

併發設計模式的幾個例子包括活動物件、核反應和排程器。

架構性

架構設計模式是那些幫助解決廣義上的軟體設計問題的模式。這些通常與如何設計你的系統和確保高可用性、減少風險和避免效能瓶頸有關。

架構設計模式的兩個例子是MVC和MVVM。

設計模式的要素

幾乎所有的設計模式都可以被分解為一組四個重要的組成部分。它們是：

• 模式名稱：這是在與其他使用者交流時用來識別設計模式的。例子包括 “singleton”、”prototype “等等。
• 問題：這描述了設計模式的目的。它是對設計模式所要解決的問題的一個小描述。它甚至可以包括一個例子場景，以更好地解釋這個問題。它還可以包含一個設計模式要完全解決基本問題所需滿足的條件列表。
• 解決方案：這是對當前問題的解決方案，由類、方法、介面等元素組成。這是一個設計模式的主要部分–它包含了各種元素的關係、責任和合作者，這些元素都是明確定義的。
• 結果：這是對該模式能夠解決的問題的分析。諸如空間和時間的使用，以及解決同一問題的其他方法都會被討論。

如果你想了解更多關於設計模式及其誕生的資訊，MSU有一些簡單的學習材料，你可以參考一下。

為什麼要使用設計模式？

你想使用設計模式的原因有很多：

• 它們是經過測試的：有了設計模式，你就有了一個經過測試的解決方案來解決你的問題（只要設計模式符合你問題的描述）。你不必浪費時間去尋找其他的解決方法，你可以放心，你有一個解決方案，為你解決基本的效能優化問題。
• 它們很容易理解：設計模式就是要小而簡單，易於理解。你不需要成為一個在特定行業工作了幾十年的專業程式設計師來理解使用哪種設計模式。它們是有目的的通用的（不限於任何特定的程式語言），任何有足夠問題解決能力的人都可以理解。當你的技術團隊換人時，這也有幫助。一段依靠設計模式的程式碼對任何新的軟體開發人員來說都更容易理解。
• 它們實施起來很簡單：大多數設計模式都非常簡單，正如你將在我們的文章中看到的那樣。你不需要知道多種程式設計概念就可以在你的程式碼中實現它們。
• 它們提出的程式碼架構很容易被重用：整個科技行業都非常鼓勵程式碼的可重用性和簡約性，而設計模式可以幫助你實現這一點。由於這些模式是解決問題的標準方式，它們的設計者已經注意到確保所包含的應用程式架構保持可重用性、靈活性，並與大多數編寫程式碼的形式相容。
• 它們可以節省時間和應用程式的大小：依靠一套標準的解決方案的最大好處之一是，它們將幫助你在實施時節省時間。很有可能你的整個開發團隊都很瞭解設計模式，所以他們在實施這些模式時，會更容易計劃、溝通和協作。經過嘗試和測試的解決方案意味著你很有可能在構建某些功能時不會出現資源洩露或走彎路的情況，從而為你節省時間和空間。另外，大多數程式語言為你提供了標準的模板庫，已經實現了一些常見的設計模式，如Iterator和Observer。

需要掌握的20個JavaScript設計模式

現在你明白了設計模式是由什麼組成的，以及為什麼你需要它們，讓我們更深入地瞭解一些最常用的JavaScript設計模式如何在JavaScript應用程式中實現。

創造性設計模式

讓我們從一些基本的、容易學習的創造型設計模式開始討論。

1. Singleton

Singleton模式是整個軟體開發行業最常用的設計模式之一。它所要解決的問題是隻維護一個類的單一例項。這在例項化資源密集型的物件時很方便，例如資料庫處理程式。

下面是你如何在JavaScript中實現它：

function SingletonFoo() {
let fooInstance = null;
// For our reference, let's create a counter that will track the number of active instances
let count = 0;
function printCount() {
console.log("Number of instances: " + count);
}
function init() {
// For our reference, we'll increase the count by one whenever init() is called
count++;
// Do the initialization of the resource-intensive object here and return it
return {}
}
function createInstance() {
if (fooInstance == null) {
fooInstance = init();
}
return fooInstance;
}
function closeInstance() {
count--;
fooInstance = null;
}
return {
initialize: createInstance,
close: closeInstance,
printCount: printCount
}
}
let foo = SingletonFoo();
foo.printCount() // Prints 0
foo.initialize()
foo.printCount() // Prints 1
foo.initialize()
foo.printCount() // Still prints 1
foo.initialize()
foo.printCount() // Still 1
foo.close()
foo.printCount() // Prints 0

雖然它的作用很好，但眾所周知，Singleton模式會使除錯變得困難，因為它掩蓋了依賴關係，並控制了初始化或銷燬一個類的例項的許可權。

2. Factory

Factory方法也是最流行的設計模式之一。Factory方法所要解決的問題是在不使用傳統建構函式的情況下建立物件。相反，它接收你想要的物件的配置（或描述）並返回新建立的物件。

下面是你如何在JavaScript中實現它：

function Factory() {
this.createDog = function (breed) {
let dog;
if (breed === "labrador") {
dog = new Labrador();
} else if (breed === "bulldog") {
dog = new Bulldog();
} else if (breed === "golden retriever") {
dog = new GoldenRetriever();
} else if (breed === "german shepherd") {
dog = new GermanShepherd();
}
dog.breed = breed;
dog.printInfo = function () {
console.log("\n\nBreed: " + dog.breed + "\nShedding Level (out of 5): " + dog.sheddingLevel + "\nCoat Length: " + dog.coatLength + "\nCoat Type: " + dog.coatType)
}
return dog;
}
}
function Labrador() {
this.sheddingLevel = 4
this.coatLength = "short"
this.coatType = "double"
}
function Bulldog() {
this.sheddingLevel = 3
this.coatLength = "short"
this.coatType = "smooth"
}
function GoldenRetriever() {
this.sheddingLevel = 4
this.coatLength = "medium"
this.coatType = "double"
}
function GermanShepherd() {
this.sheddingLevel = 4
this.coatLength = "medium"
this.coatType = "double"
}
function run() {
let dogs = [];
let factory = new Factory();
dogs.push(factory.createDog("labrador"));
dogs.push(factory.createDog("bulldog"));
dogs.push(factory.createDog("golden retriever"));
dogs.push(factory.createDog("german shepherd"));
for (var i = 0, len = dogs.length; i < len; i++) {
dogs[i].printInfo();
}
}
run()
/**
Output:
Breed: labrador
Shedding Level (out of 5): 4
Coat Length: short
Coat Type: double
Breed: bulldog
Shedding Level (out of 5): 3
Coat Length: short
Coat Type: smooth
Breed: golden retriever
Shedding Level (out of 5): 4
Coat Length: medium
Coat Type: double
Breed: german shepherd
Shedding Level (out of 5): 4
Coat Length: medium
Coat Type: double
*/

Factory設計模式控制了物件的建立方式，併為你提供了一個快速建立新物件的方法，以及一個定義了你的物件將擁有的屬性的統一介面。你可以新增任意多的狗種，但只要狗種型別所暴露的方法和屬性保持一致，它們就能完美地工作。

然而，請注意，Factory模式往往會導致大量的類難以管理。

3. Abstract Factory

Abstract Factory方法將工廠方法提升了一個層次，它使Factory變得抽象，因此可以在呼叫環境不知道具體使用的Factory或其內部工作原理的情況下進行替換。呼叫環境只知道所有的Factory都有一組共同的方法，它可以呼叫這些方法來執行例項化動作。

這就是使用前面的例子可以實現的方式:

// A factory to create dogs
function DogFactory() {
// Notice that the create function is now createPet instead of createDog, since we need
// it to be uniform across the other factories that will be used with this
this.createPet = function (breed) {
let dog;
if (breed === "labrador") {
dog = new Labrador();
} else if (breed === "pug") {
dog = new Pug();
}
dog.breed = breed;
dog.printInfo = function () {
console.log("\n\nType: " + dog.type + "\nBreed: " + dog.breed + "\nSize: " + dog.size)
}
return dog;
}
}
// A factory to create cats
function CatFactory() {
this.createPet = function (breed) {
let cat;
if (breed === "ragdoll") {
cat = new Ragdoll();
} else if (breed === "singapura") {
cat = new Singapura();
}
cat.breed = breed;
cat.printInfo = function () {
console.log("\n\nType: " + cat.type + "\nBreed: " + cat.breed + "\nSize: " + cat.size)
}
return cat;
}
}
// Dog and cat breed definitions
function Labrador() {
this.type = "dog"
this.size = "large"
}
function Pug() {
this.type = "dog"
this.size = "small"
}
function Ragdoll() {
this.type = "cat"
this.size = "large"
}
function Singapura() {
this.type = "cat"
this.size = "small"
}
function run() {
let pets = [];
// Initialize the two factories
let catFactory = new CatFactory();
let dogFactory = new DogFactory();
// Create a common petFactory that can produce both cats and dogs
// Set it to produce dogs first
let petFactory = dogFactory;
pets.push(petFactory.createPet("labrador"));
pets.push(petFactory.createPet("pug"));
// Set the petFactory to produce cats
petFactory = catFactory;
pets.push(petFactory.createPet("ragdoll"));
pets.push(petFactory.createPet("singapura"));
for (var i = 0, len = pets.length; i < len; i++) {
pets[i].printInfo();
}
}
run()
/**
Output:
Type: dog
Breed: labrador
Size: large
Type: dog
Breed: pug
Size: small
Type: cat
Breed: ragdoll
Size: large
Type: cat
Breed: singapura
Size: small
*/

Abstract Factory模式使你很容易交換具體的Factory，它有助於促進Factory和建立的產品之間的統一性。然而，引入新種類的產品會變得很困難，因為你必須對多個類進行修改以適應新方法/屬性。

4. Builder

Builder模式是最複雜但最靈活的JavaScript設計模式之一。它允許你在你的產品中逐一構建每個功能，為你提供對物件構建方式的完全控制，同時仍然抽象出內部細節。

在下面這個錯綜複雜的例子中，你會看到Builder設計模式與Director一起行動，以幫助製作披薩!

// Here's the PizzaBuilder (you can also call it the chef)
function PizzaBuilder() {
let base
let sauce
let cheese
let toppings = []
// The definition of pizza is hidden from the customers
function Pizza(base, sauce, cheese, toppings) {
this.base = base
this.sauce = sauce
this.cheese = cheese
this.toppings = toppings
this.printInfo = function() {
console.log("This pizza has " + this.base + " base with " + this.sauce + " sauce "
+ (this.cheese !== undefined ? "with cheese. " : "without cheese. ")
+ (this.toppings.length !== 0 ? "It has the following toppings: " + toppings.toString() : ""))
}
}
// You can request the PizzaBuilder (/chef) to perform any of the following actions on your pizza
return {
addFlatbreadBase: function() {
base = "flatbread"
return this;
},
addTomatoSauce: function() {
sauce = "tomato"
return this;
},
addAlfredoSauce: function() {
sauce = "alfredo"
return this;
},
addCheese: function() {
cheese = "parmesan"
return this;
},
addOlives: function() {
toppings.push("olives")
return this
},
addJalapeno: function() {
toppings.push("jalapeno")
return this
},
cook: function() {
if (base === null){
console.log("Can't make a pizza without a base")
return
}
return new Pizza(base, sauce, cheese, toppings)
}
}
}
// This is the Director for the PizzaBuilder, aka the PizzaShop.
// It contains a list of preset steps that can be used to prepare common pizzas (aka recipes!)
function PizzaShop() {
return {
makePizzaMargherita: function() {
pizzaBuilder = new PizzaBuilder()
pizzaMargherita = pizzaBuilder.addFlatbreadBase().addTomatoSauce().addCheese().addOlives().cook()
return pizzaMargherita
},
makePizzaAlfredo: function() {
pizzaBuilder = new PizzaBuilder()
pizzaAlfredo = pizzaBuilder.addFlatbreadBase().addAlfredoSauce().addCheese().addJalapeno().cook()
return pizzaAlfredo
},
makePizzaMarinara: function() {
pizzaBuilder = new PizzaBuilder()
pizzaMarinara = pizzaBuilder.addFlatbreadBase().addTomatoSauce().addOlives().cook()
return pizzaMarinara
}
}
}
// Here's where the customer can request pizzas from
function run() {
let pizzaShop = new PizzaShop()
// You can ask for one of the popular pizza recipes...
let pizzaMargherita = pizzaShop.makePizzaMargherita()
pizzaMargherita.printInfo()
// Output: This pizza has flatbread base with tomato sauce with cheese. It has the following toppings: olives
let pizzaAlfredo = pizzaShop.makePizzaAlfredo()
pizzaAlfredo.printInfo()
// Output: This pizza has flatbread base with alfredo sauce with cheese. It has the following toppings: jalapeno
let pizzaMarinara = pizzaShop.makePizzaMarinara()
pizzaMarinara.printInfo()
// Output: This pizza has flatbread base with tomato sauce without cheese. It has the following toppings: olives
// Or send your custom request directly to the chef!
let chef = PizzaBuilder()
let customPizza = chef.addFlatbreadBase().addTomatoSauce().addCheese().addOlives().addJalapeno().cook()
customPizza.printInfo()
// Output: This pizza has flatbread base with tomato sauce with cheese. It has the following toppings: olives,jalapeno
}
run()

你可以將Builder與Director配對，如上面例子中的 PizzaShop 類所示，預先定義一套步驟，以便每次構建你的產品的標準變體，即你的比薩餅的特定配方。

這種設計模式的唯一問題是，它的設定和維護相當複雜。不過，通過這種方式新增新的功能比Factory方法更簡單。

5. Prototype

Prototype設計模式是一種通過克隆現有物件來建立新物件的快速而簡單的方法。

首先建立一個Prototype物件，它可以被多次克隆以建立新物件。當直接例項化一個物件比建立一個現有物件的副本更耗費資源時，它就會派上用場。

在下面的例子中，你將看到如何使用Prototype模式來建立基於設定的模板文件的新文件:

// Defining how a document would look like
function Document() {
this.header = "Acme Co"
this.footer = "For internal use only"
this.pages = 2
this.text = ""
this.addText = function(text) {
this.text += text
}
// Method to help you see the contents of the object
this.printInfo = function() {
console.log("\n\nHeader: " + this.header + "\nFooter: " + this.footer + "\nPages: " + this.pages + "\nText: " + this.text)
}
}
// A protype (or template) for creating new blank documents with boilerplate information
function DocumentPrototype(baseDocument) {
this.baseDocument = baseDocument
// This is where the magic happens. A new document object is created and is assigned the values of the current object
this.clone = function() {
let document = new Document();
document.header = this.baseDocument.header
document.footer = this.baseDocument.footer
document.pages = this.baseDocument.pages
document.text = this.baseDocument.text
return document
}
}
function run() {
// Create a document to use as the base for the prototype
let baseDocument = new Document()
// Make some changes to the prototype
baseDocument.addText("This text was added before cloning and will be common in both documents. ")
let prototype = new DocumentPrototype(baseDocument)
// Create two documents from the prototype
let doc1 = prototype.clone()
let doc2 = prototype.clone()
// Make some changes to both objects
doc1.pages = 3
doc1.addText("This is document 1")
doc2.addText("This is document 2")
// Print their values
doc1.printInfo()
/* Output:
Header: Acme Co
Footer: For internal use only
Pages: 3
Text: This text was added before cloning and will be common in both documents. This is document 1
*/
doc2.printInfo()
/** Output:
Header: Acme Co
Footer: For internal use only
Pages: 2
Text: This text was added before cloning and will be common in both documents. This is document 2
*/
}
run()

原型方法在很大一部分物件共享相同的值，或者完全建立一個新物件的成本很高的情況下非常有用。然而，在你不需要超過幾個類的例項的情況下，它就顯得有些矯枉過正。

結構性設計模式

結構化設計模式通過提供久經考驗的結構化類的方法來幫助你組織你的業務邏輯。有各種各樣的結構設計模式，每一種都是為了滿足獨特的使用情況。

6. Adapter

構建應用程式時，一個常見的問題是允許不相容的類之間的協作。

要理解這一點，一個很好的例子是在保持向後相容的同時。如果你寫了一個新版本的類，你自然希望它能在舊版本工作的所有地方都能輕鬆使用。然而，如果你做了一些破壞性的改變，比如刪除或更新對舊版本的功能至關重要的方法，你可能最終會得到一個需要更新其所有客戶端才能執行的類。

在這種情況下，Adapter設計模式可以提供幫助。

Adapter設計模式為你提供了一個抽象，在新類的方法和屬性與舊類的方法和屬性之間架起了橋樑。它具有與舊類相同的介面，但它包含將舊方法對映到新方法的邏輯，以執行類似的操作。這類似於一個電源插頭插座如何在美式插頭和歐式插頭之間充當介面卡。

這裡有一個例子:

// Old bot
function Robot() {
this.walk = function(numberOfSteps) {
// code to make the robot walk
console.log("walked " + numberOfSteps + " steps")
}
this.sit = function() {
// code to make the robot sit
console.log("sit")
}
}
// New bot that does not have the walk function anymore
// but instead has functions to control each step independently
function AdvancedRobot(botName) {
// the new bot has a name as well
this.name = botName
this.sit = function() {
// code to make the robot sit
console.log("sit")
}
this.rightStepForward = function() {
// code to take 1 step from right leg forward
console.log("right step forward")
}
this.leftStepForward = function () {
// code to take 1 step from left leg forward
console.log("left step forward")
}
}
function RobotAdapter(botName) {
// No references to the old interfact since that is usually
// phased out of development
const robot = new AdvancedRobot(botName)
// The adapter defines the walk function by using the
// two step controls. You now have room to choose which leg to begin/end with,
// and do something at each step.
this.walk = function(numberOfSteps) {
for (let i=0; i<numberOfSteps; i++) {
if (i % 2 === 0) {
robot.rightStepForward()
} else {
robot.leftStepForward()
}
}
}
this.sit = robot.sit
}
function run() {
let robot = new Robot()
robot.sit()
// Output: sit
robot.walk(5)
// Output: walked 5 steps
robot = new RobotAdapter("my bot")
robot.sit()
// Output: sit
robot.walk(5)
// Output:
// right step forward
// left step forward
// right step forward
// left step forward
// right step forward
}
run()

這種設計模式的主要問題是，它增加了你的原始碼的複雜性。你已經需要維護兩個不同的類，而現在你又有一個類–介面卡–需要維護。

7. Bridge

在Adapter模式的基礎上，Bridge設計模式為類和客戶提供了獨立的介面，這樣即使在本地介面不相容的情況下，它們也可以同時工作。

它有助於在這兩種型別的物件之間開發一個非常鬆散的耦合介面。這也有助於提高介面及其實現的可擴充套件性，以獲得最大的靈活性。

下面是你如何使用它：

// The TV and speaker share the same interface
function TV() {
this.increaseVolume = function() {
// logic to increase TV volume
}
this.decreaseVolume = function() {
// logic to decrease TV volume
}
this.mute = function() {
// logic to mute TV audio
}
}
function Speaker() {
this.increaseVolume = function() {
// logic to increase speaker volume
}
this.decreaseVolume = function() {
// logic to decrease speaker volume
}
this.mute() = function() {
// logic to mute speaker audio
}
}
// The two remotes make use of the same common interface
// that supports volume up and volume down features
function SimpleRemote(device) {
this.pressVolumeDownKey = function() {
device.decreaseVolume()
}
this.pressVolumeUpKey = function() {
device.increaseVolume()
}
}
function AdvancedRemote(device) {
this.pressVolumeDownKey = function() {
device.decreaseVolume()
}
this.pressVolumeUpKey = function() {
device.increaseVolume()
}
this.pressMuteKey = function() {
device.mute()
}
}
function run() {
let tv = new TV()
let speaker = new Speaker()
let tvSimpleRemote = new SimpleRemote(tv)
let tvAdvancedRemote = new AdvancedRemote(tv)
let speakerSimpleRemote = new SimpleRemote(speaker)
let speakerAdvancedRemote = new AdvancedRemote(speaker)
// The methods listed in pair below will have the same effect
// on their target devices
tvSimpleRemote.pressVolumeDownKey()
tvAdvancedRemote.pressVolumeDownKey()
tvSimpleRemote.pressVolumeUpKey()
tvAdvancedRemote.pressVolumeUpKey()
// The advanced remote has additional functionality
tvAdvancedRemote.pressMuteKey()
speakerSimpleRemote.pressVolumeDownKey()
speakerAdvancedRemote.pressVolumeDownKey()
speakerSimpleRemote.pressVolumeUpKey()
speakerAdvancedRemote.pressVolumeUpKey()
speakerAdvancedRemote.pressMuteKey()
}

你可能已經猜到了，橋接模式大大增加了程式碼庫的複雜性。而且，大多數介面在現實世界的用例中通常最終只有一個實現，所以你並不能真正從程式碼的重用性中獲益。

8. Composite

Composite複合設計模式幫助你輕鬆地結構和管理類似的物件和實體。複合模式的基本思想是，物件和它們的邏輯容器可以用一個單一的抽象類來表示（可以儲存與物件相關的資料/方法以及對容器本身的引用）。

當你的資料模型類似於樹狀結構時，使用複合模式是最有意義的。然而，你不應該僅僅為了使用複合模式而試圖將一個非樹形的資料模型變成一個樹形的資料模型，因為這樣做往往會失去很多靈活性。

在下面的例子中，你將看到如何使用複合設計模式來構建一個電子商務產品的包裝系統，該系統還可以計算每個包裝的總訂單價值：

// A product class, that acts as a Leaf node
function Product(name, price) {
this.name = name
this.price = price
this.getTotalPrice = function() {
return this.price
}
}
// A box class, that acts as a parent/child node
function Box(name) {
this.contents = []
this.name = name
// Helper function to add an item to the box
this.add = function(content){
this.contents.push(content)
}
// Helper function to remove an item from the box
this.remove = function() {
var length = this.contents.length;
for (var i = 0; i < length; i++) {
if (this.contents[i] === child) {
this.contents.splice(i, 1);
return;
}
}
}
// Helper function to get one item from the box
this.getContent = function(position) {
return this.contents[position]
}
// Helper function to get the total count of the items in the box
this.getTotalCount = function() {
return this.contents.length
}
// Helper function to calculate the total price of all items in the box
this.getTotalPrice = function() {
let totalPrice = 0;
for (let i=0; i < this.getTotalCount(); i++){
totalPrice += this.getContent(i).getTotalPrice()
}
return totalPrice
}
}
function run() {
// Let's create some electronics
const mobilePhone = new Product("mobile phone," 1000)
const phoneCase = new Product("phone case," 30)
const screenProtector = new Product("screen protector," 20)
// and some stationery products
const pen = new Product("pen," 2)
const pencil = new Product("pencil," 0.5)
const eraser = new Product("eraser," 0.5)
const stickyNotes = new Product("sticky notes," 10)
// and put them in separate boxes
const electronicsBox = new Box("electronics")
electronicsBox.add(mobilePhone)
electronicsBox.add(phoneCase)
electronicsBox.add(screenProtector)
const stationeryBox = new Box("stationery")
stationeryBox.add(pen)
stationeryBox.add(pencil)
stationeryBox.add(eraser)
stationeryBox.add(stickyNotes)
// and finally, put them into one big box for convenient shipping
const package = new Box('package')
package.add(electronicsBox)
package.add(stationeryBox)
// Here's an easy way to calculate the total order value
console.log("Total order price: USD " + package.getTotalPrice())
// Output: USD 1063
}
run()

使用複合模式的最大缺點是，將來對元件介面的修改會非常具有挑戰性。設計介面需要時間和精力，而資料模型的樹狀特性會使你很難隨心所欲地進行修改。

9. Decorator

Decorator模式可以幫助你為現有的物件新增新的功能，只需將它們包裝在一個新的物件裡面。這類似於你可以用新的包裝紙來包裝一個已經包裝好的禮品盒，想包多少次都可以。每一次包裝都允許你增加你想要的功能，所以在靈活性方面是非常好的。

從技術角度來看，不涉及繼承，所以在設計業務邏輯時有更大的自由。

在下面的例子中，你會看到Decorator模式是如何幫助在一個標準的 Customer 類中新增更多的功能：

function Customer(name, age) {
this.name = name
this.age = age
this.printInfo = function() {
console.log("Customer:\nName : " + this.name + " | Age: " + this.age)
}
}
function DecoratedCustomer(customer, location) {
this.customer = customer
this.name = customer.name
this.age = customer.age
this.location = location
this.printInfo = function() {
console.log("Decorated Customer:\nName: " + this.name + " | Age: " + this.age + " | Location: " + this.location)
}
}
function run() {
let customer = new Customer("John," 25)
customer.printInfo()
// Output:
// Customer:
// Name : John | Age: 25
let decoratedCustomer = new DecoratedCustomer(customer, "FL")
decoratedCustomer.printInfo()
// Output:
// Customer:
// Name : John | Age: 25 | Location: FL
}
run()

這種模式的缺點包括程式碼複雜度高，因為沒有定義標準模式來使用Decorator新增新功能。在軟體開發週期結束時，你可能會有很多不統一的和/或類似的Decorator。

如果你在設計裝飾器時不小心，你可能最終會把一些裝飾器設計成在邏輯上依賴於其他Decorator。如果不解決這個問題，以後刪除或重組裝飾器會對你的應用程式的穩定性造成嚴重的破壞。

10. Facade

在構建大多數現實世界的應用程式時，當你完成時，業務邏輯通常會變得相當複雜。你可能最終會有多個物件和方法參與執行你的應用程式中的核心操作。如果不正確地維護它們的初始化、依賴關係、方法執行的正確順序等，可能會相當棘手，而且容易出錯。

Facade設計模式幫助你在呼叫上述操作的環境與完成這些操作的物件和方法之間建立一個抽象。這個抽象包含了初始化物件的邏輯，跟蹤它們的依賴關係，以及其他重要的活動。呼叫環境沒有關於操作如何被執行的資訊。你可以自由地更新邏輯，而不對呼叫客戶端做任何破壞性的改變。

下面是你如何在一個應用程式中使用它：

/**
* Let's say you're trying to build an online store. It will have multiple components and
* complex business logic. In the example below, you will find a tiny segment of an online
* store composed together using the Facade design pattern. The various manager and helper
* classes are defined first of all.
*/
function CartManager() {
this.getItems = function() {
// logic to return items
return []
}
this.clearCart = function() {
// logic to clear cart
}
}
function InvoiceManager() {
this.createInvoice = function(items) {
// logic to create invoice
return {}
}
this.notifyCustomerOfFailure = function(invoice) {
// logic to notify customer
}
this.updateInvoicePaymentDetails = function(paymentResult) {
// logic to update invoice after payment attempt
}
}
function PaymentProcessor() {
this.processPayment = function(invoice) {
// logic to initiate and process payment
return {}
}
}
function WarehouseManager() {
this.prepareForShipping = function(items, invoice) {
// logic to prepare the items to be shipped
}
}
// This is where facade comes in. You create an additional interface on top of your
// existing interfaces to define the business logic clearly. This interface exposes
// very simple, high-level methods for the calling environment.
function OnlineStore() {
this.name = "Online Store"
this.placeOrder = function() {
let cartManager = new CartManager()
let items = cartManager.getItems()
let invoiceManager = new InvoiceManager()
let invoice = invoiceManager.createInvoice(items)
let paymentResult = new PaymentProcessor().processPayment(invoice)
invoiceManager.updateInvoicePaymentDetails(paymentResult)
if (paymentResult.status === 'success') {
new WarehouseManager().prepareForShipping(items, invoice)
cartManager.clearCart()
} else {
invoiceManager.notifyCustomerOfFailure(invoice)
}
}
}
// The calling environment is unaware of what goes on when somebody clicks a button to
// place the order. You can easily change the underlying business logic without breaking
// your calling environment.
function run() {
let onlineStore = new OnlineStore()
onlineStore.placeOrder()
}

使用Facade模式的一個缺點是，它在你的業務邏輯和客戶端之間增加了一個額外的抽象層，因此需要額外的維護。很多時候，這增加了程式碼庫的整體複雜性。

除此之外，Facade類成為你的應用程式運作的一個強制性依賴–意味著 Facade 類的任何錯誤都會直接影響你的應用程式的運作。

11. Flyweight

Flyweight模式通過幫助你重用物件池中的公共元件，幫助你解決涉及具有重複元件的物件的記憶體效率問題。這有助於減少對記憶體的負載，並導致更快的執行時間。

在下面的例子中，使用Flyweight設計模式將一個大句子儲存在記憶體中。程式並沒有在每個字元出現時進行儲存，而是確定了用於書寫該段落的一組不同的字元及其型別（數字或字母），併為每個字元建立了可重複使用的飛輪，其中包含了儲存哪個字元和型別的細節。

然後，主陣列只需按照在句子中出現的順序儲存對這些飛輪的引用列表，而不是每次出現都儲存一個字元物件的例項。

這樣，句子所佔用的記憶體就減少了一半。請記住，這只是對文字處理程式如何儲存文字的一個非常基本的解釋。

// A simple Character class that stores the value, type, and position of a character
function Character(value, type, position) {
this.value = value
this.type = type
this.position = position
}
// A Flyweight class that stores character value and type combinations
function CharacterFlyweight(value, type) {
this.value = value
this.type = type
}
// A factory to automatically create the flyweights that are not present in the list,
// and also generate a count of the total flyweights in the list
const CharacterFlyweightFactory = (function () {
const flyweights = {}
return {
get: function (value, type) {
if (flyweights[value + type] === undefined)
flyweights[value + type] = new CharacterFlyweight(value, type)
return flyweights[value + type]
},
count: function () {
let count = 0;
for (var f in flyweights) count++;
return count;
}
}
})()
// An enhanced Character class that uses flyweights to store references
// to recurring value and type combinations
function CharacterWithFlyweight(value, type, position) {
this.flyweight = CharacterFlyweightFactory.get(value, type)
this.position = position
}
// A helper function to define the type of a character
// It identifies numbers as N and everything as A (for alphabets)
function getCharacterType(char) {
switch (char) {
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9": return "N"
default:
return "A"
}
}
// A list class to create an array of Characters from a given string
function CharactersList(str) {
chars = []
for (let i = 0; i < str.length; i++) {
const char = str[i]
chars.push(new Character(char, getCharacterType(char), i))
}
return chars
}
// A list class to create an array of CharacterWithFlyweights from a given string
function CharactersWithFlyweightsList(str) {
chars = []
for (let i = 0; i  " + charactersList.length)
// Output: Character count -> 656
// The number of flyweights created is only 31, since only 31 characters are used to write the
// entire paragraph. This means that to store 656 characters, a total of
// (31 * 2 + 656 * 1 = 718) memory blocks are used instead of (656 * 3 = 1968) which would have
// used by the standard array.
// (We have assumed each variable to take up one memory block for simplicity. This
// may vary in real-life scenarios)
console.log("Flyweights created -> " + CharacterFlyweightFactory.count())
// Output: Flyweights created -> 31
}
run()

你可能已經注意到了，Flyweight模式由於不是特別直觀而增加了你軟體設計的複雜性。因此，如果節省記憶體不是你的應用程式的一個緊迫問題，那麼Flyweight增加的複雜性可能會帶來更多的壞處而不是好處。

此外，Flyweight以記憶體換取處理效率，所以如果你缺少CPU週期，Flyweight對你來說不是一個好的解決方案。

12. Proxy

代理模式幫助你用一個物件替代另一個物件。換句話說，代理物件可以代替實際的物件（它們的代理），並控制對該物件的訪問。這些代理物件可以被用來在呼叫請求傳遞給實際物件之前或之後執行一些動作。

在下面的例子中，你會看到如何通過一個代理來控制對資料庫例項的訪問，該代理在允許請求通過之前對請求進行一些基本的驗證檢查：

function DatabaseHandler() {
const data = {}
this.set = function (key, val) {
data[key] = val;
}
this.get = function (key, val) {
return data[key]
}
this.remove = function (key) {
data[key] = null;
}
}
function DatabaseProxy(databaseInstance) {
this.set = function (key, val) {
if (key === "") {
console.log("Invalid input")
return
}
if (val === undefined) {
console.log("Setting value to undefined not allowed!")
return
}
databaseInstance.set(key, val)
}
this.get = function (key) {
if (databaseInstance.get(key) === null) {
console.log("Element deleted")
}
if (databaseInstance.get(key) === undefined) {
console.log("Element not created")
}
return databaseInstance.get(key)
}
this.remove = function (key) {
if (databaseInstance.get(key) === undefined) {
console.log("Element not added")
return
}
if (databaseInstance.get(key) === null) {
console.log("Element removed already")
return
}
return databaseInstance.remove(key)
}
}
function run() {
let databaseInstance = new DatabaseHandler()
databaseInstance.set("foo," "bar")
databaseInstance.set("foo," undefined)
console.log("#1: " + databaseInstance.get("foo"))
// #1: undefined
console.log("#2: " + databaseInstance.get("baz"))
// #2: undefined
databaseInstance.set("," "something")
databaseInstance.remove("foo")
console.log("#3: " + databaseInstance.get("foo"))
// #3: null
databaseInstance.remove("foo")
databaseInstance.remove("baz")
// Create a fresh database instance to try the same operations
// using the proxy
databaseInstance = new DatabaseHandler()
let proxy = new DatabaseProxy(databaseInstance)
proxy.set("foo," "bar")
proxy.set("foo," undefined)
// Proxy jumps in:
// Output: Setting value to undefined not allowed!
console.log("#1: " + proxy.get("foo"))
// Original value is retained:
// Output: #1: bar
console.log("#2: " + proxy.get("baz"))
// Proxy jumps in again
// Output:
// Element not created
// #2: undefined
proxy.set("," "something")
// Proxy jumps in again
// Output: Invalid input
proxy.remove("foo")
console.log("#3: " + proxy.get("foo"))
// Proxy jumps in again
// Output:
// Element deleted
// #3: null
proxy.remove("foo")
// Proxy output: Element removed already
proxy.remove("baz")
// Proxy output: Element not added
}
run()

這種設計模式在整個行業中普遍使用，有助於輕鬆實現執行前和執行後的操作。然而，就像其他設計模式一樣，它也會增加你程式碼庫的複雜性，所以如果你不是真的需要它，儘量不要使用它。

你也要記住，由於在呼叫你的實際物件時涉及到一個額外的物件，由於增加了處理操作，可能會有一些延遲。現在優化你的主物件的效能也涉及到優化你的代理方法的效能。

行為設計模式

行為設計模式幫助你解決圍繞物件之間如何互動的問題。這可能涉及到在物件之間分享或傳遞責任/控制，以完成集合操作。它還可以涉及到以最有效的方式在多個物件之間傳遞/共享資料。

13. Chain of Responsibility

責任鏈模式（Chain of Responsibility）是最簡單的行為設計模式之一。當你為可以由多個處理程式處理的操作設計邏輯時，它就會派上用場。

類似於問題升級在支援團隊中的工作方式，控制通過一個處理程式鏈，負責採取行動的處理程式完成操作。這種設計模式經常被用於UI設計中，多層元件可以處理一個使用者輸入事件，如觸控或滑動。

下面你將看到一個使用責任鏈模式的投訴升級的例子。該投訴將由處理者根據其嚴重程度進行處理：

// Complaint class that stores title and severity of a complaint
// Higher value of severity indicates a more severe complaint
function Complaint (title, severity) {
this.title = title
this.severity = severity
}
// Base level handler that receives all complaints
function Representative () {
// If this handler can not handle the complaint, it will be forwarded to the next level
this.nextLevel = new Management()
this.handleComplaint = function (complaint) {
if (complaint.severity === 0)
console.log("Representative resolved the following complaint: " + complaint.title)
else
this.nextLevel.handleComplaint(complaint)
}
}
// Second level handler to handle complaints of severity 1
function Management() {
// If this handler can not handle the complaint, it will be forwarded to the next level
this.nextLevel = new Leadership()
this.handleComplaint = function (complaint) {
if (complaint.severity === 1)
console.log("Management resolved the following complaint: " + complaint.title)
else
this.nextLevel.handleComplaint(complaint)
}
}
// Highest level handler that handles all complaints unhandled so far
function Leadership() {
this.handleComplaint = function (complaint) {
console.log("Leadership resolved the following complaint: " + complaint.title)
}
}
function run() {
// Create an instance of the base level handler
let customerSupport = new Representative()
// Create multiple complaints of varying severity and pass them to the base handler
let complaint1 = new Complaint("Submit button doesn't work," 0)
customerSupport.handleComplaint(complaint1)
// Output: Representative resolved the following complaint: Submit button doesn't work
let complaint2 = new Complaint("Payment failed," 1)
customerSupport.handleComplaint(complaint2)
// Output: Management resolved the following complaint: Payment failed
let complaint3 = new Complaint("Employee misdemeanour," 2)
customerSupport.handleComplaint(complaint3)
// Output: Leadership resolved the following complaint: Employee misdemeanour
}
run()

這種設計的明顯問題是它是線性的，所以當大量的處理程式被連鎖在一起時，處理一個操作會有一些延遲。

追蹤所有的處理程式可能是另一個痛點，因為在處理程式達到一定數量後會變得相當混亂。除錯是另一個噩夢，因為每個請求都可能在不同的處理程式上結束，這使得你很難對日誌和除錯過程進行標準化。

14. Iterator

迭代器模式非常簡單，幾乎在所有的現代面嚮物件語言中都非常常用。如果你發現自己面臨的任務是瀏覽一個型別不盡相同的物件的列表，那麼普通的迭代方法，如for迴圈，可能會變得相當混亂–尤其是當你還在裡面編寫業務邏輯時。

迭代器模式可以幫助你將列表的迭代和處理邏輯與主要業務邏輯隔離開來。

下面是你如何在一個有多種型別元素的相當基本的列表中使用它：

// Iterator for a complex list with custom methods
function Iterator(list) {
this.list = list
this.index = 0
// Fetch the current element
this.current = function() {
return this.list[this.index]
}
// Fetch the next element in the list
this.next = function() {
return this.list[this.index++]
}
// Check if there is another element in the list
this.hasNext = function() {
return this.index < this.list.length
}
// Reset the index to point to the initial element
this.resetIndex = function() {
this.index = 0
}
// Run a forEach loop over the list
this.forEach = function(callback) {
for (let element = this.next(); this.index <= this.list.length; element = this.next()) {
callback(element)
}
}
}
function run() {
// A complex list with elements of multiple data types
let list = ["Lorem ipsum," 9, ["lorem ipsum dolor," true], false]
// Create an instance of the iterator and pass it the list
let iterator = new Iterator(list)
// Log the first element
console.log(iterator.current())
// Output: Lorem ipsum
// Print all elements of the list using the iterator's methods
while (iterator.hasNext()) {
console.log(iterator.next())
/**
* Output:
* Lorem ipsum
* 9
* [ 'lorem ipsum dolor', true ]
* false
*/
}
// Reset the iterator's index to the first element
iterator.resetIndex()
// Use the custom iterator to pass an effect that will run for each element of the list
iterator.forEach(function (element) {
console.log(element)
})
/**
* Output:
* Lorem ipsum
* 9
* [ 'lorem ipsum dolor', true ]
* false
*/
}
run()

不用說，這種模式對於沒有多種型別元素的列表來說可能是不必要的複雜。另外，如果一個列表中的元素型別太多，也會變得難以管理。

關鍵是要根據你的列表和它未來變化的可能性來確定你是否真的需要一個迭代器。更重要的是，迭代器模式只在列表中有用，而且列表有時會限制你的線性訪問模式。其他資料結構有時可以給你帶來更大的效能優勢。

15. Mediator

你的應用設計有時可能需要你與大量不同的物件打交道，這些物件容納了各種業務邏輯，並經常相互依賴。處理這些依賴關係有時會變得很棘手，因為你需要跟蹤這些物件之間如何交換資料和控制。

調解器設計模式的目的是幫助你解決這個問題，它將這些物件的互動邏輯隔離到一個單獨的物件中。

這個單獨的物件被稱為調解器，它負責讓你的低層類完成工作。你的客戶端或呼叫環境也將與調解器而不是低階別的類進行互動。

下面是一個關於調解器設計模式的例項：