【十月打卡】第69天 前端常用的7種設(shè)計(jì)模式(5)
標(biāo)簽:
設(shè)計(jì)模式
单例模式
严格的单例模式不多,但是单例的思想随处可见
概念
什么是单例
一个对象或者实例只会被创建一次,创建后缓存起来,供全局使用
解决的问题
可以解决一个系统中只需要唯一的一个对象或者实例的场景。
代码示例以及UML类图
- 类的静态属性或方法需要使用 static
- 静态方法的this指向当前类
- 静态属性或方法在UML类图中需要使用下划线
TS代码演示:
class SingleTon {
private constructor() {}
private static instance: SingleTon | null = null;
static getInstance(): SingleTon {
if (this.instance === null) {
this.instance = new SingleTon();
}
return this.instance;
}
}
const ins1 = SingleTon.getInstance();
const ins2 = SingleTon.getInstance();
console.log(ins1 === ins2); // true
JS代码演示:
// 闭包的方式
function getInstanceGenerator() {
let instance = null;
class SingleTon {}
return () => {
if (instance === null) {
instance = new SingleTon();
}
return instance;
};
}
const getInstance = getInstanceGenerator();
const ins1 = getInstance();
const ins2 = getInstance();
console.log(ins1 === ins2); // true
// 模块的方式
let instance = null;
class SingleTon {}
export default () => {
if (instance === null) {
instance = new SingleTon();
}
return instance;
};
UML类图
应用场景
- 登录框、遮罩层,一个系统只有一个即可,多了没用,还浪费性能
- Vuex、Redux的store,一个系统只能有一个,多了会出错
- 自定义事件EventBus全局唯一
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦