JavaScript設計模式——單例模式

時間 2019-11-09

原文原文鏈接

　　單例模式也稱爲單體模式，規定一個類只有一個實例，而且提供可全局訪問點；html

　　在讀這篇文章以前，也許你對單例模式的概念感到模糊或者不清楚，可是其實在平常的開發中你確定用到過單例模式；閉包

　　JavaScript中沒有類的定義，單例模式的特色是」惟一「和」全局訪問「，那麼咱們能夠聯想到JavaScript中的全局對象，利用ES6的let不容許重複聲明的特性，恰好符合這兩個特色；是的，全局對象是最簡單的單例模式；app

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

　　上述代碼中能夠知道obj就是一個單例，由於obj恰好就符合單例模式的兩大特色："惟一"和"可全局訪問"；性能

　　可是咱們並不建議這麼實現單例，由於全局對象/全局變量會有一些弊端：學習

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

　　簡單版單例模式：ui

　　　　分析：只能有一個實例，因此咱們須要使用if分支來判斷，若是已經存在就直接返回，若是不存在就新建一個實例；this

    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；spa

　　可是上面的代碼仍是存在問題，由於建立對象的操做和判斷實例的操做耦合在一塊兒，並不符合」單一職責原則「；prototype

　　改良版：代理

　　　　思路：經過一個閉包，來實現判斷實例的操做；

　　　　閉包警告：不理解閉包的同窗請先學習閉包 http://www.javashuo.com/article/p-cgfnevvn-gm.html

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())

　　代理版單例模式：

　　　　經過代理的形式，將建立對象的操做和實例判斷的操做進行解耦拆分，實現更小粒度的劃分，符合」單一職責原則「；

    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只負責建立對象和賦值；

　　惰性單例模式

　　　　咱們常常會有這樣的場景：頁面屢次調用都有彈窗提示，只是提示內容不同；

　　　　這個時候咱們能夠立馬想到是單例模式，彈窗就是單例實例，提示內容是參數傳遞；咱們能夠用惰性單例模式來實現它；

<!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上下文並傳遞參數
    }
}
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>