怎樣用Javascript實現(xiàn)單例模式

更新時間：2021年04月26日 09:30:56 作者：有夢想的咸魚前端

這篇文章主要介紹了怎樣用Javascript實現(xiàn)單例模式，想學習設計模式的同學，可以參考下

概述

單例模式也稱為單體模式，規(guī)定一個類只有一個實例，并且提供可全局訪問點；

在讀這篇文章之前，也許你對單例模式的概念感到模糊或者不清楚，但是其實在日常的開發(fā)中你肯定用到過單例模式；

JavaScript中沒有類的定義，單例模式的特點是”唯一“和”全局訪問“，那么我們可以聯(lián)想到JavaScript中的全局對象，利用ES6的let不允許重復聲明的特性，剛好符合這兩個特點；是的，全局對象是最簡單的單例模式；

let obj = {
    name:"咸魚",
    getName:function(){}
}

上述代碼中可以知道obj就是一個單例，因為obj剛好就符合單例模式的兩大特點："唯一"和"可全局訪問"；

但是我們并不建議這么實現(xiàn)單例，因為全局對象/全局變量會有一些弊端：

污染命名空間（容易變量名沖突）維護時不容易管控 (搞不好就直接覆蓋了)

代碼實現(xiàn)

簡單版單例模式

分析：只能有一個實例，所以我們需要使用if分支來判斷，如果已經(jīng)存在就直接返回，如果不存在就新建一個實例；

let Singleton = function(name){
    this.name = name;
    this.instance = null; 
}

Singleton.prototype.getName = function(){
    console.log(this.name);
}

Singleton.getInstance = function(name){
    if(this.instace){
        return this.instance; 
    }
    return this.instance = new Singleton(name);
}

let winner = Singleton.getInstance("winner");   //winner
console.log(winner.getName());
let sunner = Singleton.getInstance("sunner");   //winner
console.log(sunner.getName())

上面代碼中我們是通過一個變量instance的值來進行判斷是否已存在實例，如果存在就直接返回this.instance，如果不存在，就新建實例并賦值給instance；

但是上面的代碼還是存在問題，因為創(chuàng)建對象的操作和判斷實例的操作耦合在一起，并不符合”單一職責原則“；

改良版

思路：通過一個閉包，來實現(xiàn)判斷實例的操作；

閉包警告：不理解閉包的同學請先學習閉包

let CreateSingleton = (function(){
    let instance = null;
    return function(name){
        this.name = name;
        if(instance){
            return instance
        }
        return instance = this;
    }
})()


CreateSingleton.prototype.getName = function(){
        console.log(this.name);
}

let winner = new CreateSingleton("winner");  //winner
console.log(winner.getName());
let sunner = new CreateSingleton("sunner");  //winner
console.log(sunner.getName())

代理版單例模式

通過代理的形式，將創(chuàng)建對象的操作和實例判斷的操作進行解耦拆分，實現(xiàn)更小粒度的劃分，符合”單一職責原則“；

let ProxyCreateSingleton = (function(){
    let instance = null;
    return function(name){
        if(instance){
            return instance
        }
        return instance = new Singlton(name);
    }
})();

let Singlton = function(name){
    this.name = name;
} 

Singlton.prototype.getName = function(){
    console.log(this.name);
}

let winner = new ProxyCreateSingleton("winner");
console.log(winner.getName());
let sunner = new ProxyCreateSingleton("sunner");
console.log(sunner.getName());

上面的代碼中，ProxyCreateSingleton()只負責判斷實例，Singlton只負責創(chuàng)建對象和賦值；

惰性單例模式

我們經(jīng)常會有這樣的場景：頁面多次調用都有彈窗提示，只是提示內容不一樣；

這個時候我們可以立馬想到是單例模式，彈窗就是單例實例，提示內容是參數(shù)傳遞；我們可以用惰性單例模式來實現(xiàn)它；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="loginBtn">有夢想的咸魚</div>
</body>
<script>
let getSingleton = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments)); // 確定this上下文并傳遞參數(shù)
    }
}
let createAlertMessage = function(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
}

let createSingleAlertMessage = getSingleton(createAlertMessage);
    document.getElementById('loginBtn').onclick=function(){
        let alertMessage = createSingleAlertMessage('看來真的是個咸魚');
        alertMessage.style.display = 'block';
    }
</script>
</html>

惰性單例是指的是頁面開始加載的時候我們的實例是沒有進行創(chuàng)建的，是當我們點擊頁面的div之后才開始創(chuàng)建實例（按需創(chuàng)建），這可以提高我們的網(wǎng)頁性能，加快我們的頁面渲染速度；

以上就是怎樣用Javascript實現(xiàn)單例模式的詳細內容，更多關于Javascript單例模式的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: