快捷導(dǎo)航

利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用詳解

更新時(shí)間：2017年12月09日 13:46:56 作者：TeanLee

單例是在程序設(shè)計(jì)非常基礎(chǔ)的東西，這篇文章主要給大家介紹了關(guān)于利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

在傳統(tǒng)開發(fā)工程師眼里，單例就是保證一個(gè)類只有一個(gè)實(shí)例，實(shí)現(xiàn)的方法一般是先判斷實(shí)例存在與否，如果存在直接返回，如果不存在就創(chuàng)建了再返回，這就確保了一個(gè)類只有一個(gè)實(shí)例對象。在JavaScript里，單例作為一個(gè)命名空間提供者，從全局命名空間里提供一個(gè)唯一的訪問點(diǎn)來訪問該對象。

單例模式的定義是：保證一個(gè)類僅有一個(gè)一個(gè)實(shí)例，并提供一個(gè)訪問它的全局訪問點(diǎn)。

單例模式能在合適的時(shí)候創(chuàng)建對象，并且創(chuàng)建唯一的一個(gè)。

代碼接近于生活，很有意思。比如一個(gè)網(wǎng)站的登錄，點(diǎn)擊登錄后彈出一個(gè)登錄彈框，即使再次點(diǎn)擊，也不會再出現(xiàn)一個(gè)相同的彈框。又或者一個(gè)音樂播放程序，如果用戶打開了一個(gè)音樂，又想打開一個(gè)音樂，那么之前的播放界面就會自動(dòng)關(guān)閉，切換到當(dāng)前的播放界面。這些都是單例模式的應(yīng)用場景。

要實(shí)現(xiàn)一個(gè)單例模式，一個(gè)經(jīng)典的方式是創(chuàng)建一個(gè)類，類中又一個(gè)方法能創(chuàng)建該類的實(shí)例對象，還有一個(gè)標(biāo)記，記錄是否已經(jīng)創(chuàng)了過了實(shí)例對象。如果對象已經(jīng)存在，就返回第一次實(shí)例化對象的引用。

單例模式的實(shí)現(xiàn)

es5實(shí)現(xiàn)方式

var Singleton = function(name) {
 this.name = name;
 //一個(gè)標(biāo)記，用來判斷是否已將創(chuàng)建了該類的實(shí)例
 this.instance = null;
}
// 提供了一個(gè)靜態(tài)方法，用戶可以直接在類上調(diào)用
Singleton.getInstance = function(name) {
 // 沒有實(shí)例化的時(shí)候創(chuàng)建一個(gè)該類的實(shí)例
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 // 已經(jīng)實(shí)例化了，返回第一次實(shí)例化對象的引用
 return this.instance;
}

用戶可以通過一個(gè)廣為人知的接口，對該實(shí)例進(jìn)行訪問。

我們嘗試對該對象進(jìn)行兩次實(shí)例化，觀察兩次實(shí)例化結(jié)果是否指向同一個(gè)對象。

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一實(shí)例化的對象
console.log(a === b);

返回結(jié)果是：true。說明a、b之間是引用關(guān)系。

es6實(shí)現(xiàn)方式

創(chuàng)建Singleton類。class關(guān)鍵字和靜態(tài)函數(shù)都是es6新增的。

class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 // 構(gòu)造一個(gè)廣為人知的接口，供用戶對該類進(jìn)行實(shí)例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}

單例模式應(yīng)用實(shí)例

我們用一個(gè)生活中常見的一個(gè)場景來說明單例模式的應(yīng)用。

任意一個(gè)網(wǎng)站，點(diǎn)擊登錄按鈕，只會彈出有且僅有一個(gè)登錄框，即使后面再點(diǎn)擊登錄按鈕，也不會再彈出多一個(gè)彈框。這就是單例模式的典型應(yīng)用。接下來我們實(shí)現(xiàn)它。為了注重單例模式的展示，我們把登錄框簡化吧😜

在頁面上設(shè)置一個(gè)按鈕

<button id="loginBtn">登錄</button>

為這個(gè)按鈕添加點(diǎn)擊事件

const btn = document.getElementById('loginBtn');
btn.addEventListener('click', function() {
 loginLayer.getInstance();
}, false);

我們先給一個(gè)初始化方法init，在點(diǎn)擊按鈕之后，在頁面上添加一個(gè)框框（權(quán)當(dāng)?shù)卿浛蛄耍?/p>

init() {
 var div = document.createElement('div');
 div.classList.add('login-layer');
 div.innerHTML = "我是登錄浮窗";
 document.body.appendChild(div);
}

那么接下來要用單例模式實(shí)現(xiàn)，點(diǎn)擊按鈕出現(xiàn)有且僅有一個(gè)浮窗，方法就是在構(gòu)造函數(shù)中創(chuàng)建一個(gè)標(biāo)記，第一次點(diǎn)擊時(shí)創(chuàng)建一個(gè)浮窗，用改變標(biāo)記的狀態(tài)，再次點(diǎn)擊按鈕時(shí)，根據(jù)標(biāo)記的狀態(tài)判斷是否要再創(chuàng)建一個(gè)浮窗。

上源碼：

class loginLayer {
 constructor() {
  // 判斷頁面是否已有浮窗的標(biāo)記
  this.instance = null;
  this.init();
 }
 init() {
  var div = document.createElement('div');
  div.classList.add('login-layer');
  div.innerHTML = "我是登錄浮窗";
  document.body.appendChild(div);
 }
 // 靜態(tài)方法作為廣為人知的接口
 static getInstance() {
  // 根據(jù)標(biāo)記的狀態(tài)判斷是否要再添加浮窗，如果標(biāo)記不為空就創(chuàng)建一個(gè)浮窗
  if(!this.instance) {
   this.instance = new loginLayer();
  }
  return this.instance;
 }
}

當(dāng)然不要忘記為浮窗添加一個(gè)樣式，讓浮窗顯示啦

.login-layer {
 width: 200px;
 height: 200px;
 background-color: rgba(0, 0, 0, .6);
 text-align: center;
 line-height: 200px;
 display: inline-block;
}

最后奉上該實(shí)例的源碼：

<!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>單例實(shí)現(xiàn)登錄彈窗</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>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。