溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
在傳統開發工程師眼里，單例就是保證一個類只有一個實例，實現的方法一般是先判斷實例存在與否，如果存在直接返回，如果不存在就創建了再返回，這就確保了一個類只有一個實例對象。在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>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
