前端---单例模式 （TS）

介绍：

这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。

1、单例类只能有一个实例。2、单例类必须自己创建自己的唯一实例。3、单例类必须给所有其他对象提供这一实例。

意图：

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

主要解决：

一个全局使用的类频繁地创建与销毁。

何时使用：

当您想控制实例数目，节省系统资源的时候。

如何解决：

判断系统是否已经有这个单例，如果有则返回，如果没有则创建。

关键代码：

构造函数是私有的。

优点：

• 1、在内存里只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例。
• 2、避免对资源的多重占用。

TS代码实现

// 有些功能全局只需要一个，所以只需要实例化一次，然后存起来，不用每次需要的时候都重新实例化一下
class SingleTon {
    name:string
    // 让该类只能在内部实例化，无法外部实例化（new）
    private constructor(name:string) {
        this.name = name
    }
    // private 只允许在类内访问
    private static instance: SingleTon | null
    // 获取单例
    static getInstance(name:string):SingleTon{
        // 判断系统是否已经有这个单例
        if(SingleTon.instance === null) {
            SingleTon.instance = new SingleTon(name)
        }
        return SingleTon.instance // 单例模式
    }
}

const s1 = SingleTon.getInstance('张三')
const s2 = SingleTon.getInstance('李四')
console.log(s1 === s2) /// true

前端使用单例模式的场景

1.登录框和遮罩层，整个系统只需要实例化一次，不需要每次需要显示的时候都重新实例化一下

代码演示：

// 登录框
// 全局只实例化一次 而且是在类内实例化 不在外部实例化
class LoginForm {
    // 只允许在内部实例化
    private constructor() { }
    // 控制显示状态
    private state: string = 'hide' // hide | show
    // 是否实例的标志
    private static instance: LoginForm | null = null

    // 单例模式
    static getInstance() {
        // 判断系统是否已经有单例了
        if (LoginForm.instance === null) {
            LoginForm.instance = new LoginForm()
        }
        return LoginForm.instance
    }

    show(){
        if(this.state === 'show') {
            console.log('已经显示了');
            return
        }
        console.log('显示 LoginForm')
        // 处理逻辑
        this.state = 'show'
    }
    hide(){
        if(this.state === 'hide') {
            console.log('已经隐藏了');
            return
        }
        console.log('隐藏 LoginForm')
        // 处理逻辑
        this.state = 'hide'
    }
}

const LoginForm1 = LoginForm.getInstance()
const LoginForm2 = LoginForm.getInstance()
console.log(LoginForm1 === LoginForm2);

2.Vuex 的 store 全局只有一个

3.自定义事件全局只有一个