前言
在傳統開發工程師眼里，單例就是保證一個類只有一個實例，實現的方法一般是先判斷實例存在與否，如果存在直接返回，如果不存在就創建了再返回，這就確保了一個類只有一個實例對象。在JavaScript里，單例作為一個命名空間提供者，從全局命名空間里提供一個唯一的訪問點來訪問該對象。
單例模式的定義是：保證一個類僅有一個一個實例，并提供一個訪問它的全局訪問點。
單例模式能在合適的時候創建對象，并且創建唯一的一個。
代碼接近于生活，很有意思。比如一個網站的登錄，點擊登錄后彈出一個登錄彈框，即使再次點擊，也不會再出現一個相同的彈框。又或者一個音樂播放程序，如果用戶打開了一個音樂，又想打開一個音樂，那么之前的播放界面就會自動關閉，切換到當前的播放界面。這些都是單例模式的應用場景。
要實現一個單例模式，一個經典的方式是創建一個類，類中又一個方法能創建該類的實例對象，還有一個標記，記錄是否已經創了過了實例對象。如果對象已經存在，就返回第一次實例化對象的引用。
單例模式的實現
es5實現方式
var Singleton = function(name) { this.name = name; //一個標記，用來判斷是否已將創建了該類的實例 this.instance = null;}// 提供了一個靜態方法，用戶可以直接在類上調用Singleton.getInstance = function(name) { // 沒有實例化的時候創建一個該類的實例 if(!this.instance) { this.instance = new Singleton(name); } // 已經實例化了，返回第一次實例化對象的引用 return this.instance;}用戶可以通過一個廣為人知的接口，對該實例進行訪問。
我們嘗試對該對象進行兩次實例化，觀察兩次實例化結果是否指向同一個對象。
var a = Singleton.getInstance('sven1');var b = Singleton.getInstance('sven2');// 指向的是唯一實例化的對象console.log(a === b);返回結果是：true。說明a、b之間是引用關系。
es6實現方式
創建Singleton類。class關鍵字和靜態函數都是es6新增的。
class Singleton { constructor(name) { this.name = name; this.instance = null; } // 構造一個廣為人知的接口，供用戶對該類進行實例化 static getInstance(name) { if(!this.instance) { this.instance = new Singleton(name); } return this.instance; }}單例模式應用實例
我們用一個生活中常見的一個場景來說明單例模式的應用。
任意一個網站，點擊登錄按鈕，只會彈出有且僅有一個登錄框，即使后面再點擊登錄按鈕，也不會再彈出多一個彈框。這就是單例模式的典型應用。接下來我們實現它。為了注重單例模式的展示，我們把登錄框簡化吧😜
在頁面上設置一個按鈕
<button id="loginBtn">登錄</button>
為這個按鈕添加點擊事件
const btn = document.getElementById('loginBtn');btn.addEventListener('click', function() { loginLayer.getInstance();}, false);我們先給一個初始化方法init，在點擊按鈕之后，在頁面上添加一個框框（權當登錄框了）
init() { var div = document.createElement('div'); div.classList.add('login-layer'); div.innerHTML = "我是登錄浮窗"; document.body.appendChild(div);}那么接下來要用單例模式實現，點擊按鈕出現有且僅有一個浮窗，方法就是在構造函數中創建一個標記，第一次點擊時創建一個浮窗，用改變標記的狀態，再次點擊按鈕時，根據標記的狀態判斷是否要再創建一個浮窗。
上源碼：
class loginLayer { constructor() { // 判斷頁面是否已有浮窗的標記 this.instance = null; this.init(); } init() { var div = document.createElement('div'); div.classList.add('login-layer'); div.innerHTML = "我是登錄浮窗"; document.body.appendChild(div); } // 靜態方法作為廣為人知的接口 static getInstance() { // 根據標記的狀態判斷是否要再添加浮窗，如果標記不為空就創建一個浮窗 if(!this.instance) { this.instance = new loginLayer(); } return this.instance; }}當然不要忘記為浮窗添加一個樣式，讓浮窗顯示啦
.login-layer { width: 200px; height: 200px; background-color: rgba(0, 0, 0, .6); text-align: center; line-height: 200px; display: inline-block;}最后奉上該實例的源碼：
<!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>單例實現登錄彈窗</title> <style> .login-layer { width: 200px; height: 200px; background-color: rgba(0, 0, 0, .6); text-align: center; line-height: 200px; display: inline-block; } </style></head><body> <button id="loginBtn">登錄</button> <script> const btn = document.getElementById('loginBtn'); btn.addEventListener('click', function() { loginLayer.getInstance(); }, false); class loginLayer { constructor() { this.instance = null; this.init(); } init() { var div = document.createElement('div'); div.classList.add('login-layer'); div.innerHTML = "我是登錄浮窗"; document.body.appendChild(div); } static getInstance() { if(!this.instance) { this.instance = new loginLayer(); } return this.instance; } } </script></body></html>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
