雖然有一種瘋狂天才的感覺可能很誘人，但重新發(fā)明輪子通常不是設(shè)計(jì)軟件的最佳方法。很有可能有人已經(jīng)遇到了和你一樣的問題，并以一種聰明的方式解決了它。這樣的最佳實(shí)踐在形式化后被稱為設(shè)計(jì)模式。今天我們來看看它們的概念，并檢查單例模式和模塊。
什么是設(shè)計(jì)模式
我們可以將設(shè)計(jì)模式視為許多開發(fā)人員在各種現(xiàn)實(shí)生活場(chǎng)景中測(cè)試過的經(jīng)過驗(yàn)證的解決方案。它們旨在支持軟件設(shè)計(jì)師以可讀和可預(yù)測(cè)的方式解決常見問題。如果我們的應(yīng)用程序基于經(jīng)過驗(yàn)證的模式，我們就不用太擔(dān)心整體結(jié)構(gòu)，因?yàn)樗鼈儍A向于鼓勵(lì)我們以一種有組織的方式編寫代碼。
查看包含某種設(shè)計(jì)模式的現(xiàn)有代碼庫可能比嘗試?yán)斫庖环N不熟悉的方法更容易。他們也是其他開發(fā)者和我們之間的橋梁。使用眾所周知的策略可以使溝通更快更容易。
設(shè)計(jì)模式并不是精確的解決方案。他們?yōu)槲覀兲峁┝艘粋€(gè)方案，我們可以根據(jù)自己的需要進(jìn)行調(diào)整。這些模式?jīng)]有綁定到特定的問題，這使得它們非?？芍赜?。它們與特定的編程語言無關(guān)，但JavaScript擁有比其他語言更流行的設(shè)計(jì)模式。
你可能已經(jīng)使用了其中的一些。常見的JavaScript解決方案往往具有在實(shí)現(xiàn)時(shí)感覺足夠的設(shè)計(jì)模式。React經(jīng)常合并高階組件模式和flux架構(gòu)。在實(shí)現(xiàn)觀察者設(shè)計(jì)模式時(shí)，Angular應(yīng)用程序似乎運(yùn)行得很好。
單例模式
我們從一個(gè)叫做單例的設(shè)計(jì)模式開始。它是最著名的模式之一，因此是一個(gè)很好的起點(diǎn)。其核心是限制一個(gè)類只能有一個(gè)實(shí)例，并確保它是全局可訪問的。當(dāng)你需要管理整個(gè)應(yīng)用程序中的某些內(nèi)容時(shí)，它可能會(huì)派上用場(chǎng)。
單例這個(gè)術(shù)語來自數(shù)學(xué)，意思是一個(gè)集合恰好有一個(gè)元素。
按照設(shè)計(jì)，單例會(huì)在類還不存在時(shí)創(chuàng)建一個(gè)實(shí)例。否則，它們返回對(duì)現(xiàn)有實(shí)例的引用。
class Singleton {
static instance;
constructor() {
// your logic here
}
static getInstance() {
if (Singleton.instance) {
return Singleton.instance;
}
Singleton.instance = new Singleton();
return Singleton.instance;
}
}
現(xiàn)在，每次調(diào)用Singleton.getInstance()，我們都會(huì)得到相同的對(duì)象。
Singleton.getInstance() === Singleton.getInstance(); // true
上面的代碼乍一看沒什么問題，但它有一些問題。沒有什么可以限制我們直接調(diào)用單例構(gòu)造函數(shù)。這時(shí)TypeScript可能就派上用場(chǎng)了。
class Singleton {
private static instance?: Singleton;
private constructor() {
// your logic here
}
static getInstance() {
if (Singleton.instance) {
return Singleton.instance;
}
Singleton.instance = new Singleton();
return Singleton.instance;
}
}
通過將單例構(gòu)造函數(shù)變?yōu)?strong>私有，我們只能在getInstance函數(shù)中調(diào)用它。
另一種方法是直接從構(gòu)造函數(shù)中返回一個(gè)實(shí)例。
class Singleton {
static instance;
constructor() {
if (Singleton.instance) {
return Singleton.instance;
}
Singleton.instance = this;
// your logic here
}
}
new Singleton() === new Singleton() // true
上面的代碼讓它變得不那么透明，因?yàn)橛腥丝赡懿恢罉?gòu)造函數(shù)每次都返回相同的對(duì)象。
單例與全局變量有很多共同之處。這也是為什么它們通常不被鼓勵(lì)的原因，因?yàn)樗鼈児蚕砹怂鼈兊娜秉c(diǎn)，因?yàn)樗赡軙?huì)使您的應(yīng)用程序的可讀性更差。無論我們認(rèn)為單例是好是壞，它們都是基本的設(shè)計(jì)模式之一。了解它們也許有一天會(huì)派上用場(chǎng)。即使您不決定自己編寫它們，您也可能在某些應(yīng)用程序中遇到它們。
模塊模式
JavaScript應(yīng)用程序中的另一種典型模式是模塊設(shè)計(jì)模式。將我們的應(yīng)用程序代碼分成模塊，對(duì)于保持我們的代碼庫整潔組織起著重要的作用。
不久前，一種流行的方法是將一段代碼包含在立即調(diào)用的函數(shù)表達(dá)式(IIFE)中。這是因?yàn)樗蠮avaScript文件共享相同的作用域。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world!</title>
<script src="hello.js"></script>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
hello.js
function hello() {
console.log('Hello world!');
}
hello(); // Hello world!
main.js
hello(); // Hello world!
在一個(gè)文件中定義某些內(nèi)容會(huì)污染整個(gè)全局范圍，這不是一種理想的情況。解決這個(gè)問題的一個(gè)常見方法是通過創(chuàng)建一個(gè)函數(shù)并立即調(diào)用它來引入模塊模式。
hello.js
(function(){
function hello() {
console.log('Hello world!');
}
hello(); // Hello world!
})();
main.js
hello(); // Uncaught ReferenceError: hello is not defined
上述方法的一個(gè)重要的事情是，如果我們?cè)谏厦娴哪K內(nèi)定義任何變量，它在它之外是不可用的。
我們還可以通過從立即調(diào)用的函數(shù)表達(dá)式返回一些東西來導(dǎo)出hello() 函數(shù)。
hello.js
const helloModule = (function(){
function hello() {
console.log('Hello world!');
}
return {
hello
}
})();
main.js
helloModule.hello(); // Hello world!
隨著JavaScript語言的發(fā)展，我們找到了其他方法來處理上述問題。其中之一是ES6模塊，其中每個(gè)模塊都有自己的文件?，F(xiàn)代瀏覽器已經(jīng)支持它們。
Node.js環(huán)境還通過實(shí)現(xiàn)一個(gè)名為CommonJS的模塊系統(tǒng)來提供解決方案。讓我們來看看一段奇怪的代碼：
console.log('Hello');
return;
console.log('world!');
這看起來很奇怪，因?yàn)?strong>return語句不能在函數(shù)之外發(fā)生。當(dāng)我們導(dǎo)入這樣的文件時(shí)，Node.js將其包裝在一個(gè)函數(shù)中，如下所示:
function (exports, require, module, __filename, __dirname) {
console.log('Hello');
return;
console.log('world!');
}
多虧了上面的代碼，該模塊有了自己的作用域，上面的代碼可以正常運(yùn)行。文章來源：http://www.zghlxwxcb.cn/news/detail-654041.html
總結(jié)
在本文中，我們了解了什么是設(shè)計(jì)模式。我們首先要知道的是單例模式和模塊模式。上面文章的一個(gè)觀點(diǎn)是，你可能已經(jīng)在使用設(shè)計(jì)模式了。這可能是一個(gè)好主意，去學(xué)習(xí)更多并擴(kuò)展我們的編程詞匯。多虧了這一點(diǎn)，我們才能更快地想出解決問題的辦法。此外，它可能會(huì)更高效，可讀性更強(qiáng)。文章來源地址http://www.zghlxwxcb.cn/news/detail-654041.html
到了這里，關(guān)于JavaScript中的設(shè)計(jì)模式之一--單例模式和模塊的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
