JS设计模式-单例模式

单例模式介绍

什么是单例设计模式

• 系统中被唯一使用
• 一个类中只有一个实例
• 属于三大设计类型中的创建型模式
  

UML 类图

单例模式UML类图

示例

• 登录框
• 购物车

说明

• 单例模式需要用到Java的特性 (private)
• ES6中没有（ typeScript除外）
• 只能用Java代码来演示 UML 图中的内容 （不要担心，JS中也会变相的实现单例模式）
  Java代码演示 (Java代码是最容易理解的编程语言之一）

public class SingleObject {
     // 注意，私有化构造函数，外部不能 new,  只能内部 new！！！！
     private SingleObejct(){
     }
     // 唯一被 new 出来的对象
     private SingleObject instance = null;
     // 获取对象的唯一接口
     public static SingleObject getInstance() {
           if(instance == null){
                 // 只 new一次
                 instance = new SingleObject();
           } 
           return instance;
     }
     // 对象方法
     public void login(username, password) {
            System.out.println("login...");
     }
}

public class  SingletonPatternDemo {
      public static void main(String[] args) {
            // 不合适的构造函数
            //  编译时错误， 构造函数 SingleObject 是不可见的。
            //   SingleObject object = new SingleObject();

            // 获取唯一可用的对象
            SingleObject object = SingleObject.getInstance();
            object.login();
      }
}

JS中使用单例模式

class SingleObject {
  login() {
    console.log("login..."):
  }
}

SingleObject.getInstance = (function () {
  let instance;
  return function () {
    if(!instance) {
      instance = new SingleObject();
    }
    return instance;
  }
})()
// 测试，注意这里只能使用静态函数 getInstance, 不能 new SingleObject() !!!
let obj1 = SingleObject.getInstance()
obj1.login();
let obj2 = SingleObject.getInstance()
obj2.login();
console.log(obj1 === obj2)  // true  两者必须完全相等

 // 区分
let obj3 = new SingleObejct();
console.log(obj1 === obj3);  // false 这里就不是单例模式了。

场景

Jquery 只有一个$
模拟登录框
其他

Jquery $ Demo 代码可能不一样，但是思路是一样的。

if (window.Jquery !== null ){
  return window.Jquery;
}else{
  // 初始化....   
}

模拟登录框

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

// 另一个页面中调用登录框
let login2 = LoginForm.getInstance()
login2.show()

// 两者是否相等
console.log('login1 === login2', login1 === login2)

其他
购物车（和登录框类似）
vuex 和 redux 中的 store

设计原则验证 （五大设计原则SOLID）

• 符合单一职责原则，只实例化唯一的对象。
• 没法具体体验开放封闭原则，但是绝对不违反开放封闭原则。