es6實現單例模式及其應用
阿新 • • 發佈:2019-02-18
單例模式的定義是:保證一個類僅有一個例項,並提供一個訪問它的全域性訪問點
單例模式能在合適的時候建立物件,並且建立唯一的一個。
比如一個網站的登入,點選登入後彈出一個登入彈框,即使再次點選,也不會再出現一個相同的彈框。又或者一個音樂播放程式,如果使用者打開了一個音樂,又想開啟一個音樂,那麼之前的播放介面就會自動關閉,切換到當前的播放介面、這些都是單例模式的應用場景。
要實現一個單例模式,一個經典的方式是建立一個類,類中又一個方法能建立該類的例項物件,還有一個標記,記錄是否已經建立過了例項物件,如果物件已經存在,就返回第一個例項化物件的引用。
單例模式應用例項
我們用一個生活中常見的一個場景來說明單例模式的應用。
任意一個網站,點選登入按鈕,只會彈出有且僅有一個登入框,即使後面再點選登入按鈕,也不會再彈出多一個彈框。這就是單例模式的典型應用。接下來我們實現它。為了注重單例模式的展示,我們把登入框簡化吧��
在頁面上設定一個按鈕
<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);
}
那麼接下來要用單例模式實現,點選按鈕出現有且僅有一個浮窗,方法就是在建構函式中建立一個標記,第一次點選時建立一個浮窗,用來改變標記的狀態,再次點選按鈕時,根據標記的狀態判斷是否要再建立一個浮窗。
// 靜態方法作為廣為人知的介面
static getInstance(){
// 根據標記的狀態判斷是否要再新增浮窗,如果標記為空就建立一個浮窗
if(!this.instance){
this.instance = new loginLayer();
}
return this.instance;
}
當然不要忘記為浮窗新增一個樣式,讓浮窗顯示啦
.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>