es6實現單例模式及其應用
阿新 • • 發佈：2019-02-18
單例模式的定義是：保證一個類僅有一個例項，並提供一個訪問它的全域性訪問點
單例模式能在合適的時候建立物件，並且建立唯一的一個。
比如一個網站的登入，點選登入後彈出一個登入彈框，即使再次點選，也不會再出現一個相同的彈框。又或者一個音樂播放程式，如果使用者打開了一個音樂，又想開啟一個音樂，那麼之前的播放介面就會自動關閉，切換到當前的播放介面、這些都是單例模式的應用場景。
要實現一個單例模式，一個經典的方式是建立一個類，類中又一個方法能建立該類的例項物件，還有一個標記，記錄是否已經建立過了例項物件，如果物件已經存在，就返回第一個例項化物件的引用。
單例模式應用例項
我們用一個生活中常見的一個場景來說明單例模式的應用。
任意一個網站，點選登入按鈕，只會彈出有且僅有一個登入框，即使後面再點選登入按鈕，也不會再彈出多一個彈框。這就是單例模式的典型應用。接下來我們實現它。為了注重單例模式的展示，我們把登入框簡化吧��
在頁面上設定一個按鈕
<button id="loginBtn">登入</button>為這個按鈕新增點選事件
const btn = document.getElementById('loginBtn');
btn.addEventListener('click',function(){
loginLayer.getInstance();
},false);我們先給一個初始化方法init，在點選按鈕之後，在頁面上新增一個框框（權當登陸框了）
init(){
var div 那麼接下來要用單例模式實現，點選按鈕出現有且僅有一個浮窗，方法就是在建構函式中建立一個標記，第一次點選時建立一個浮窗，用來改變標記的狀態，再次點選按鈕時，根據標記的狀態判斷是否要再建立一個浮窗。
// 靜態方法作為廣為人知的介面
static 當然不要忘記為浮窗新增一個樣式，讓浮窗顯示啦
.login-layer{
width:200px;
height:200px;
background:rgba(0,0,0,.6);
text-align:center;
line-height:200px;
display:inline-block;
}完整程式碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
.login-layer{
width:200px;
height:200px;
background: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>
