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

前言

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),天河網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:天河等地區(qū)。天河做網(wǎng)站價(jià)格咨詢:18980820575

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

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

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

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

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

單例模式的實(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í)例化對(duì)象的引用
 return this.instance;
}

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

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

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一實(shí)例化的對(duì)象
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è)廣為人知的接口，供用戶對(duì)該類進(jìn)行實(shí)例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}

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

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

任意一個(gè)網(wǎng)站，點(diǎn)擊登錄按鈕，只會(huì)彈出有且僅有一個(gè)登錄框，即使后面再點(diǎn)擊登錄按鈕，也不會(huì)再彈出多一個(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)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

文章名稱：利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用詳解
網(wǎng)頁URL：http://www.chinadenli.net/article38/gocspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、、搜索引擎優(yōu)化、Google、網(wǎng)站制作、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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