理解：
- 对于一个类，只能实例化一次。
- 在 javascript 中对象字面量创建时就是单例模式，此时没有类。
- 但是当需要有更复杂的对象，例如有私有变量等，需要以类的形式去写的时候，要考虑是否需要使用单例模式；如果使用单例模式的话可以延迟初始化，例如：
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;
}
})()
这段代码，只有当执行timeTool() 时，才会进行初始化操作。（惰性单例，懒汉模式）
- 更多使用单例的场景是为了
延迟初始化。例如，唯一作用的弹框，可以用惟一实例的单例模式。思路是，首先第一次调用时加载 dom，第二次时返回之前的实例，仅做 dom 的 style 修改。这种做法相比于常规做法，可以在初次加载时少加载一些 dom元素，加快首屏加载速度。
例子：
class Login {
//构造器
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]);
//注册关闭登录框事件
Login.addCloseLoginEvent();
}
//静态方法: 获取元素
static getLoginDom(cls) {
return document.querySelector(cls);
}
//静态方法: 注册关闭登录框事件
static addCloseLoginEvent() {
this.getLoginDom('.close-btn').addEventListener('click', () => {
//给遮罩层添加style, 用于隐藏遮罩层
this.getLoginDom('.mask-layer').style = "display: none";
})
}
//静态方法: 获取实例(单例)
static getInstance() {
if(!this.instance) {
this.instance = new Login();
} else {
//移除遮罩层style, 用于显示遮罩层
this.getLoginDom('.mask-layer').removeAttribute('style');
}
return this.instance;
}
}
//注册点击事件
Login.getLoginDom('.login-btn').addEventListener('click', () => {
Login.getInstance();
})
- 核心： 确保只有一个实例， 并提供全局访问
补充一个项目中遇到的例子：
背景： 需要调用一个方法，并传入 true 参数时对chrome.debugger.onEvent事件绑定处理函数，当传入 false 参数时对取消该绑定。
难点：1.解绑和绑定传参必须为一个函数 2. 事件处理函数参数依赖调用时状态
解决： 将该函数作为单例进行获取，同时可传入运行时参数。
问题：该传入参数若为不可变类型，则获取不到更新值
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 参数为引用类型和不可变类型的区别
引用类型
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
