JavaScript設計模式——單例模式
- 2019 年 10 月 11 日
- 筆記
單例模式也稱為單體模式，規定一個類只有一個實例，並且提供可全局訪問點；
在讀這篇文章之前，也許你對單例模式的概念感到模糊或者不清楚，但是其實在日常的開發中你肯定用到過單例模式；
JavaScript中沒有類的定義，單例模式的特點是”唯一“和”全局訪問“，那麼我們可以聯想到JavaScript中的全局對象，利用ES6的let不允許重複聲明的特性，剛好符合這兩個特點；是的，全局對象是最簡單的單例模式；
let obj = { name:"鹹魚", getName:function(){} }
上述代碼中可以知道obj就是一個單例，因為obj剛好就符合單例模式的兩大特點：”唯一”和”可全局訪問”；
但是我們並不建議這麼實現單例，因為全局對象/全局變量會有一些弊端：
- 污染命名空間（容易變量名衝突）
- 維護時不容易管控 (搞不好就直接覆蓋了)
簡單版單例模式：
分析：只能有一個實例，所以我們需要使用if分支來判斷，如果已經存在就直接返回，如果不存在就新建一個實例；
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；
但是上面的代碼還是存在問題，因為創建對象的操作和判斷實例的操作耦合在一起，並不符合”單一職責原則“；
改良版：
思路：通過一個閉包，來實現判斷實例的操作；
閉包警告：不理解閉包的同學請先學習閉包 https://www.cnblogs.com/dengyao-blogs/p/11475575.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>
惰性單例是指的是頁面開始加載的時候我們的實例是沒有進行創建的，是當我們點擊頁面的div之後才開始創建實例（按需創建），這可以提高我們的網頁性能，加快我們的頁面渲染速度；
