前端设计模式（一）：单例模式

单例模式就是保证类的实例只有一个，这就是它的作用，比如在前端中，创建全局唯一的对话框实例，记录日志信息全局唯一实例等等。

单例模式在前端的两种实现方式：

1.通过原型方法实现

const Singleton = function () {
    this.instance = null;
};
Singleton.getInstance = function (name) {
    if (!this.instance) {
        this.instance = new Singleton();
    }
    return this.instance;
};
const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true

2.通过静态方法实现

class SingleDog {

  static instance;

  show() {
    console.log('我是一个单例对象')
  }
  static getInstance() {
    // 判断是否已经new过1个实例
    if (!SingleDog.instance) {
      // 若这个唯一的实例不存在，那么先创建它
      SingleDog.instance = new SingleDog()
    }
    // 如果这个唯一的实例已经存在，则直接返回
    return SingleDog.instance
  }
}
const s3 = SingleDog.getInstance()
const s4 = SingleDog.getInstance()
console.log(s3 === s4); // true

实际上，上面两种方法模仿的是Java语言中的单例实现方式，平常我们前端开发，基于ES6使用模块导入导出，也可以看作单例模式：

// 比如这是SingletonExample.js
// 可以定义一些属性，方法等等，然后通过export导出，其他模块再分别导入

const array_state = [];

const methodTest = function() {
    console.log('这是测试方法')
}

export default {
    array_state, methodTest
}

单例模式的应用场景：

1.利用单例模式思想来实现登录框的显示和隐藏

class LoginForm {
    constructor(){
        this.state = 'hide'
    }
    
    show(){
        if(this.state === 'show'){
            console.log('已经显示');
            return
        }
        this.state = 'show';
        console.log('登录框已显示')
    }
    
    hide(){
        if(this.state === 'hide'){
            console.log('已经隐藏');
            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.hide(); //打印：登录框隐藏成功

console.log(login1 === login2)