理解：
- 對于一個類滑绒，只能實(shí)例化一次闷堡。
- 在 javascript 中對象字面量創(chuàng)建時就是單例模式，此時沒有類疑故。
- 但是當(dāng)需要有更復(fù)雜的對象杠览，例如有私有變量等，需要以類的形式去寫的時候软舌，要考慮是否需要使用單例模式；如果使用單例模式的話可以延遲初始化鸳玩，例如：
let timeTool = (function() {
let _instance = null;
function init() {
//私有變量
let now = new Date();
//公用屬性和方法
this.name = '處理時間工具庫',
this.getISODate = function() {
return now.toISOString();
}
this.getUTCDate = function() {
return now.toUTCString();
}
}
return function() {
if(!_instance) {
_instance = new init();
}
return _instance;
}
})()
這段代碼，只有當(dāng)執(zhí)行timeTool() 時见间，才會進(jìn)行初始化操作史侣。（惰性單例，懶漢模式）
- 更多使用單例的場景是為了
延遲初始化。例如正林，唯一作用的彈框杈绸，可以用惟一實(shí)例的單例模式。思路是，首先第一次調(diào)用時加載 dom奇瘦，第二次時返回之前的實(shí)例，僅做 dom 的 style 修改。這種做法相比于常規(guī)做法，可以在初次加載時少加載一些 dom元素症脂，加快首屏加載速度。
例子：
class Login {
//構(gòu)造器
constructor() {
this.init();
}
//初始化方法
init() {
//新建div
let mask = document.createElement('div');
//添加樣式
mask.classList.add('mask-layer');
//添加模板字符串
mask.innerHTML =
`
<div class="login-wrapper">
<div class="login-title">
<div class="title-text">登錄框</div>
<div class="close-btn">×</div>
</div>
<div class="username-input user-input">
<span class="login-text">用戶名:</span>
<input type="text">
</div>
<div class="pwd-input user-input">
<span class="login-text">密碼:</span>
<input type="password">
</div>
<div class="btn-wrapper">
<button class="confrim-btn">確定</button>
<button class="clear-btn">清空</button>
</div>
</div>
`;
//插入元素
document.body.insertBefore(mask, document.body.childNodes[0]);
//注冊關(guān)閉登錄框事件
Login.addCloseLoginEvent();
}
//靜態(tài)方法: 獲取元素
static getLoginDom(cls) {
return document.querySelector(cls);
}
//靜態(tài)方法: 注冊關(guān)閉登錄框事件
static addCloseLoginEvent() {
this.getLoginDom('.close-btn').addEventListener('click', () => {
//給遮罩層添加style, 用于隱藏遮罩層
this.getLoginDom('.mask-layer').style = "display: none";
})
}
//靜態(tài)方法: 獲取實(shí)例(單例)
static getInstance() {
if(!this.instance) {
this.instance = new Login();
} else {
//移除遮罩層style, 用于顯示遮罩層
this.getLoginDom('.mask-layer').removeAttribute('style');
}
return this.instance;
}
}
//注冊點(diǎn)擊事件
Login.getLoginDom('.login-btn').addEventListener('click', () => {
Login.getInstance();
})
- 核心： 確保只有一個實(shí)例笑撞， 并提供全局訪問
補(bǔ)充一個項(xiàng)目中遇到的例子：
背景： 需要調(diào)用一個方法瓤狐，并傳入 true 參數(shù)時對chrome.debugger.onEvent事件綁定處理函數(shù)皆警，當(dāng)傳入 false 參數(shù)時對取消該綁定绸罗。
難點(diǎn)：1.解綁和綁定傳參必須為一個函數(shù) 2. 事件處理函數(shù)參數(shù)依賴調(diào)用時狀態(tài)
解決： 將該函數(shù)作為單例進(jìn)行獲取育灸，同時可傳入運(yùn)行時參數(shù)趟薄。
問題：該傳入?yún)?shù)若為不可變類型羡铲，則獲取不到更新值
getListener(interfaceStoreParams) {
if(this.listener) {
return this.listener;
} else {
const listener = (...args) => netWortListener(...args, interfaceStoreParams);
this.listener = listener;
return listener;
}
}
@action.bound switchListener(open, interfaceStore) {
const listen = this.getListener(interfaceStore);
if(open) {
chrome.debugger.onEvent.addListener(listen)
} else {
chrome.debugger.onEvent.removeListener(listen)
this.listener = null;
}
this.listenerOpen = open;
}
ps 參數(shù)為引用類型和不可變類型的區(qū)別
引用類型
let listener = null;
function getListener(interfaceStoreParams) {
if(listener) {
return listener;
} else {
const l = (...args) => { console.log(...args, interfaceStoreParams) }
listener = l;
return listener;
}
}
function switchListener(open, v) {
const listen = getListener(v);
if(open) {
setTimeout(() => {
console.log('open');
listen(1,2);
v.name = 'wang';
}, 2000)
} else {
setTimeout(() => {
console.log('close');
listen(1,2);
}, 2000)
listener = null;
}
}
let obj = { name: 'nena' };
console.log('5秒后打開')
setTimeout(() => {
switchListener(true, obj);
}, 2000)
setTimeout(() => {
switchListener(false, obj);
}, 5000)
5秒后打開
open
1 2 { name: 'nena' }
close
1 2 { name: 'wang' }
不可變類型
let listener = null;
function getListener(interfaceStoreParams) {
if(listener) {
return listener;
} else {
const l = (...args) => { console.log(...args, interfaceStoreParams) }
listener = l;
return listener;
}
}
function switchListener(open, v) {
const listen = getListener(v);
if(open) {
setTimeout(() => {
console.log('open');
listen(1,2);
v = 44;
}, 2000)
} else {
setTimeout(() => {
console.log('close');
listen(1,2);
}, 2000)
listener = null;
}
}
let obj = 33;
console.log('5秒后打開')
setTimeout(() => {
switchListener(true, obj);
}, 2000)
setTimeout(() => {
switchListener(false, obj);
}, 5000)
5秒后打開
open
1 2 33
close
1 2 33
