单例模式
介绍
保证全局只存在一个实例
实现: 判断实例是否存在，存在则直接返回，不存在就创建了再返回
uml类图
demo代码
class LoginForm {
constructor() {
this.state = 'hide'
}
show() {
if (this.state === 'show') {
alert('已经显示')
return
}
this.state = 'show'
console.log('登录框显示成功');
}
hide() {
if (this.state === 'hide') {
alert('已经隐藏')
return
}
this.state = 'hide'
console.log('登录框隐藏成功');
}
}
LoginForm.getInstance = (function () {
let instance
return function() {
if (!instance) {
instance = new LoginForm()
}
return instance
}
})()
// 测试
let login1 = LoginForm.getInstance()
login1.show()
let login2 = LoginForm.getInstance()
login2.show()
// login1 === login2, 代码生成的是同一个实例
console.log('login1 === login2 :>> ', login1 === login2);
经典应用场景
- jquery的$存在
if (window.jQuery != null) {
return window.jQuery
} else {
// 初始化...
}
购物车(和登录框类似)
vuex 和 redux 中的store
element的弹窗组件
https://github.com/ElemeFE/element/blob/dev/packages/message-box/src/main.js#L79
