今天小編給大家分享一下JavaScript單例模式是什么及怎么實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來(lái)合作!

1、什么是設(shè)計(jì)模式

在軟件設(shè)計(jì)過(guò)程中，針對(duì)特定問(wèn)題的簡(jiǎn)潔而優(yōu)雅的解決方案。

把之前的經(jīng)驗(yàn)總結(jié)并且合理運(yùn)用到某處場(chǎng)景上，能夠解決實(shí)際的問(wèn)題。

2、設(shè)計(jì)模式五大設(shè)計(jì)原則（SOLID）

S-單一職責(zé)原則

即一個(gè)程序只做好一件事

O-開(kāi)放封閉原則

可擴(kuò)展開(kāi)放，對(duì)修改封閉

L-里氏置換原則

子類能覆蓋父類，并能出現(xiàn)在父類出現(xiàn)的地方

I-接口獨(dú)立原則

保持接口的單一獨(dú)立

D-依賴導(dǎo)致原則

使用方法只關(guān)注接口而不關(guān)注具體類的實(shí)現(xiàn)

3、為什么需要設(shè)計(jì)模式？

易讀性

使用設(shè)計(jì)模式能夠提升我們的代碼可讀性，提升后續(xù)開(kāi)發(fā)效率

可拓展性

使用設(shè)計(jì)模式對(duì)代碼解耦，能很好的增強(qiáng)代碼的yi修改性和拓展性

復(fù)用性

使用設(shè)計(jì)模式可以復(fù)用已有的解決方案，無(wú)需重復(fù)相同工作

可靠性

使用設(shè)計(jì)模式能夠增加系統(tǒng)的健壯性，使代碼編寫(xiě)真正工程化

4、單例模式

定義：唯一&全局訪問(wèn)。保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。

另外一種多例模式，通過(guò)一個(gè)類構(gòu)造出多個(gè)不一樣的實(shí)例，這就是多例模式。

單例模式與多例模式最本質(zhì)的區(qū)別：實(shí)例的數(shù)量。

單例模式永遠(yuǎn)只有一個(gè)實(shí)例，這個(gè)實(shí)例可以被緩存起來(lái)，可以復(fù)用。

應(yīng)用場(chǎng)景：就是能被緩存的內(nèi)容，例如登錄彈窗。

我覺(jué)得就是一個(gè)地方如果在你的項(xiàng)目中可以用到兩次或兩次以上，都可以嘗試一下這個(gè)，能夠減少很多代碼。

來(lái)看這段偽代碼：

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "登錄浮窗";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = creatLoginLayer();
    loginLayer.style.display = "block";
};

creatLoginLayer的作用是創(chuàng)建一個(gè)登錄浮窗并將節(jié)點(diǎn)添加到body上，下面做的是登錄按鈕的一個(gè)點(diǎn)擊事件，點(diǎn)擊登錄按鈕就會(huì)創(chuàng)建登錄浮窗并將display從none改為block，將他顯示出來(lái)。

這個(gè)邏輯是沒(méi)毛病的，但是我們想一下，每點(diǎn)擊一下登錄按鈕就要執(zhí)行這些代碼，一個(gè)項(xiàng)目中如果有很多地方要呢？我們上面這短短幾行而已，如果是上百上千甚至上萬(wàn)呢？是不是就非常損耗性能，這個(gè)時(shí)候，我們的單例模式就派上了用場(chǎng)。

使用單例模式后：

const getSingle = (fn) => {
    let result;
    return (...rest) =>{
        return result || (result = fn.apply(this.rest));
    };
};

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "登錄浮窗";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

const createSingleLoginLayer = getSingle(createLoginLayer);

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = createSingleLoginLayer();
    loginLayer.style.display = "block";
};

可以見(jiàn)到，增加了一個(gè)getSingle函數(shù)，這里有個(gè)閉包的概念，result變量只要一直在引用就不會(huì)被銷毀，起到了一個(gè)緩存的作用，函數(shù)的參數(shù)是一個(gè)function，如果result是null或者undefined就執(zhí)行后面的邏輯，將這個(gè)傳進(jìn)來(lái)的函數(shù)的返回值也就是這個(gè)div賦給result，這樣我們下面的函數(shù)就執(zhí)行一次就可以了，下次調(diào)用的時(shí)候result有值，所以就直接返回了，不會(huì)在執(zhí)行后面的邏輯。

以上就是“JavaScript單例模式是什么及怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：JavaScript單例模式是什么及怎么實(shí)現(xiàn)
分享網(wǎng)址：http://chinadenli.net/article26/gohojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、做網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)