🚀 单例模式:前端开发的效率神器

48 阅读1分钟

单例模式: 一个对象/实例只能被创建一次

classDiagram
Singleton <-- Singleton

class Singleton{
-instance:Singleton|null
+getInstance():Singleton
}
class Singleton{
    //无法再外面获取
    private static instance:Singleton | null=null
    private constructor(){}
    
    static getInstance():Singleton{
        if(Singleton.instance===null){
            Singleton.instance = new Singleton();
        }
        return Singleton.instance
    }
}
Singleton.getInstance();

使用场景

  1. 登录框
  2. 自定义事件全局唯一EventBus
  3. store全局唯一
//登录框
class LoginForm{
    private state:string='hide';
    private constructor(){};
    
    show(){
        if(this.state==="show"){
            console.log("show");
            return ;
        }
        console.log("....显示操作")
        this.state="show"
    }
    
    hide(){
        if(this.state==="hide"){
            console.log("hide");
            return ;
        }
        console.log("....隐藏操作")
        this.state="hide"
    }

    private static instance:LoginForm | null=null
    static getInstance():LoginForm{
        if(LoginForm.instance===null){
            LoginForm.instance= new LoginForm();
        }
        return LoginForm.instance
    }
}
const login1=LoginForm.getInstance();
const login2=LoginForm.getInstance();
//login1===login2