你好，歡迎收聽極客視點(diǎn)。

JavaScript 中的設(shè)計(jì)模式指的是一些可重用的解決方案，這些方案適用于編寫 JavaScript Web 應(yīng)用程序時(shí)常見的一些問題。最近，全棧開發(fā)人員德文（Deven）探討了 7 種出色的、受歡迎的 JavaScript 設(shè)計(jì)模式，這些模式主要?dú)w為以下三類：創(chuàng)作設(shè)計(jì)模式、結(jié)構(gòu)設(shè)計(jì)模式和行為設(shè)計(jì)模式。

1. 構(gòu)造函數(shù)設(shè)計(jì)模式

這是一種特殊的方法，用于在分配內(nèi)存后初始化新創(chuàng)建的對象。由于 JavaScript 一般來說是面向?qū)ο蟮?#xff0c;所以它打交道最多的就是對象。在 JavaScript 中創(chuàng)建新對象有三種方法可用。

文檔中列出了創(chuàng)建構(gòu)造函數(shù)設(shè)計(jì)模式的一種方法。

// 創(chuàng)建一個(gè)新的空對象 var newObject = {}; // 創(chuàng)建一個(gè)新的空對象 var newObject = Object.create(Object.prototype); var newObject = newObject();

要訪問函數(shù)的屬性，你需要初始化對象。

const object = new ConstructorObject();

代碼中的 new 關(guān)鍵字告訴 JavaScript，一個(gè) constructorObject 應(yīng)該充當(dāng)一個(gè)構(gòu)造函數(shù)。另外，這個(gè)設(shè)計(jì)模式并不支持繼承。

2. 原型模式

原型模式是基于原型繼承的，在這種模式中，被創(chuàng)建的對象充當(dāng)其他對象的原型。實(shí)際上，原型（prototype）是被創(chuàng)建的每個(gè)對象構(gòu)造函數(shù)的藍(lán)圖。

示例

var myCar= { name:"Ford Escort", brake:function(){ console.log("Stop! I am applying brakes"); } Panic : function (){ console.log ( "wait. how do you stop thuis thing?") } } // 使用 object create 實(shí)個(gè)新的例化一 car var yourCar= object.create(myCar); // 現(xiàn)在它就是另一個(gè)的原型了 console.log (yourCar.name);]

3. 模塊設(shè)計(jì)模式

模塊（module）設(shè)計(jì)模式對原型模式做了一些改進(jìn)，模塊模式設(shè)置了不同類型的修飾符（私有和公共）。你可以創(chuàng)建相似的函數(shù)或?qū)傩远粫l(fā)生沖突，你還可以靈活地公開重命名函數(shù)。這個(gè)設(shè)計(jì)模式的一個(gè)缺陷是無法覆蓋（override）外部環(huán)境中創(chuàng)建的函數(shù)。

示例

function AnimalContainter () { const container = []; function addAnimal (name) { container.push(name); } function getAllAnimals() { return container; } function removeAnimal(name) { const index = container.indexOf(name); if(index < 1) { throw new Error('Animal not found in container'); } container.splice(index, 1) } return { add: addAnimal, get: getAllAnimals, remove: removeAnimal } } const container = AnimalContainter(); container.add('Hen'); container.add('Goat'); container.add('Sheep'); console.log(container.get()) //Array(3) ["Hen", "Goat", "Sheep"] container.remove('Sheep') console.log(container.get()); //Array(2) ["Hen", "Goat"]

4. 單例模式

在僅需要?jiǎng)?chuàng)建一個(gè)實(shí)例的情況下（例如一個(gè)數(shù)據(jù)庫連接），這個(gè)模式是必需的。在這個(gè)模式中，只能在關(guān)閉連接時(shí)創(chuàng)建一個(gè)實(shí)例，或者在打開新實(shí)例之前必須關(guān)閉已有的實(shí)例。此模式也稱為嚴(yán)格模式，它的一個(gè)缺點(diǎn)是測試時(shí)的體驗(yàn)很差，因?yàn)樗[藏的依賴項(xiàng)對象很難挑出來進(jìn)行測試。

示例

function DatabaseConnection () { let databaseInstance = null; // 追蹤特定時(shí)間創(chuàng)建實(shí)例的數(shù)量 let count = 0; function init() { console.log(`Opening database #${count + 1}`); // 現(xiàn)在執(zhí)行操作 } function createIntance() { if(databaseInstance == null) { databaseInstance = init(); } return databaseInstance; } function closeIntance() { console.log('closing database'); databaseInstance = null; } return { open: createIntance, close: closeIntance } } const database = DatabseConnection(); database.open(); //Open database #1 database.open(); //Open database #1 database.open(); //Open database #1 database.close(); //close database

5. 工廠模式

這個(gè)模式的創(chuàng)新之處在于，它不需要構(gòu)造函數(shù)就能創(chuàng)建對象。它提供了用于創(chuàng)建對象的通用接口，你可以在其中指定要?jiǎng)?chuàng)建的工廠（factory）對象的類型，這樣一來，你只需指定對象，然后工廠會實(shí)例化并返回這個(gè)對象供你使用。當(dāng)對象組件設(shè)置起來很復(fù)雜，并且你希望根據(jù)所處的環(huán)境輕松地創(chuàng)建不同的對象實(shí)例時(shí)，使用工廠模式就是很明智的選擇。在處理許多共享相同屬性的小型對象，以及創(chuàng)建一些需要解耦的對象時(shí)也可以使用工廠模式。

示例

// Dealer A DealerA = {}; DealerA.title = function title() { return "Dealer A"; }; DealerA.pay = function pay(amount) { console.log( `set up configuration using username: ${this.username} and password: ${ this.password }` ); return `Payment for service ${amount} is successful using ${this.title()}`; }; //Dealer B DealerB = {}; DealerB.title = function title() { return "Dealer B"; }; DealerB.pay = function pay(amount) { console.log( `set up configuration using username: ${this.username} and password: ${this.password}` ); return `Payment for service ${amount} is successful using ${this.title()}`; }; //@param {*} DealerOption //@param {*} config function DealerFactory(DealerOption, config = {}) { const dealer = Object.create(dealerOption); Object.assign(dealer, config); return dealer; } const dealerFactory = DealerFactory(DealerA, { username: "user", password: "pass" }); console.log(dealerFactory.title()); console.log(dealerFactory.pay(12)); const dealerFactory2 = DealerFactory(DealerB, { username: "user2", password: "pass2" }); console.log(dealerFactory2.title()); console.log(dealerFactory2.pay(50));

6. 觀察者模式

觀察者（observer）設(shè)計(jì)模式在許多對象同時(shí)與其他對象集通信的場景中用起來很方便。在觀察者模式中不會在狀態(tài)之間發(fā)生不必要的事件 push 和 pull，相比之下，所涉及的模塊僅會修改數(shù)據(jù)的當(dāng)前狀態(tài)。

示例

function Observer() { this.observerContainer = []; } Observer.prototype.subscribe = function (element) { this.observerContainer.push(element); } // 下面是從 container 中移除一個(gè)元素 Observer.prototype.unsubscribe = function (element) { const elementIndex = this.observerContainer.indexOf(element); if (elementIndex &gt; -1) { this.observerContainer.splice(elementIndex, 1); } } /** * we notify elements added to the container by calling * each subscribed components added to our container */ Observer.prototype.notifyAll = function (element) { this.observerContainer.forEach(function (observerElement) { observerElement(element); }); }

7. 命令模式

命令（command）設(shè)計(jì)模式將方法調(diào)用、操作或請求封裝到單個(gè)對象中，以便你可以自行傳遞方法調(diào)用。命令設(shè)計(jì)模式讓你可以從任何正在執(zhí)行的命令中發(fā)出命令，并將責(zé)任委托給與之前不同的對象。這些命令以 run() 和 execute() 格式顯示。

(function(){ var carManager = { // 請求的信息 requestInfo: function( model, id ){ return "The information for " + model + " with ID " + id + " is foo bar"; }, // 現(xiàn)在購買這個(gè) car buyVehicle: function( model, id ){ return "You have successfully purchased Item " + id + ", a " + model; }, // 現(xiàn)在 arrange viewing arrangeViewing: function( model, id ){ return "You have successfully booked a viewing of " + model + " ( " + id + " ) "; } }; })();

小結(jié)

以上就是7種受歡迎的JavaScript設(shè)計(jì)模式，對于 JavaScript 開發(fā)人員來說，使用設(shè)計(jì)模式的好處很多。設(shè)計(jì)模式的一些主要優(yōu)點(diǎn)包括提升項(xiàng)目的可維護(hù)性，還能減少開發(fā)周期中不必要的工作。JavaScript 設(shè)計(jì)模式可以為復(fù)雜的問題提供解決方案，提升開發(fā)速度并提高生產(chǎn)率，但并不能說這些設(shè)計(jì)模式就可以讓開發(fā)人員偷懶了。希望今天的內(nèi)容能給你帶來參考價(jià)值。

英文原文：https://codesource.io/javascript-design-patterns/

總結(jié)

以上是生活随笔為你收集整理的javascript设计模式_开发者都应该了解的7种JavaScript设计模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。