單例模式
介紹
保證全局只存在一個(gè)實(shí)例
實(shí)現(xiàn): 判斷實(shí)例是否存在告私，存在則直接返回，不存在就創(chuàng)建了再返回
uml類(lèi)圖
demo代碼
class LoginForm {
constructor() {
this.state = 'hide'
}
show() {
if (this.state === 'show') {
alert('已經(jīng)顯示')
return
}
this.state = 'show'
console.log('登錄框顯示成功');
}
hide() {
if (this.state === 'hide') {
alert('已經(jīng)隱藏')
return
}
this.state = 'hide'
console.log('登錄框隱藏成功');
}
}
LoginForm.getInstance = (function () {
let instance
return function() {
if (!instance) {
instance = new LoginForm()
}
return instance
}
})()
// 測(cè)試
let login1 = LoginForm.getInstance()
login1.show()
let login2 = LoginForm.getInstance()
login2.show()
// login1 === login2, 代碼生成的是同一個(gè)實(shí)例
console.log('login1 === login2 :>> ', login1 === login2);
經(jīng)典應(yīng)用場(chǎng)景
- jquery的$存在
if (window.jQuery != null) {
return window.jQuery
} else {
// 初始化...
}
購(gòu)物車(chē)(和登錄框類(lèi)似)
vuex 和 redux 中的store
element的彈窗組件
https://github.com/ElemeFE/element/blob/dev/packages/message-box/src/main.js#L79
