JavaScript之单例模式（内附vuex安装源码解析）

其实单例模式很简单，它指的就是保证一个类无论你实例化几个，它都指向同一个实例。

而在我们身边也见过许多类似的场景：如，redux，vuex等。

单例模式： 保证一个类仅有一个实例。

实现思路：先判断是否创建过，如果创建过直接返回。否则就创建新的即可。

1. 如何使用单例模式：

class SingleDog {
    show (){
        console.log("一个单例对象")    
    }
    static getInstance () {
        // 判断是否已经存在实例
        if(!SingleDog.instance) {
            // 若这个唯一的实例不存在，则创建
            SingleDog.instance = new SingleDog()        
        }
        // 如果这个唯一的实例已经存在，则直接返回
        return SingleDog.instance
    }
}

    const storage1 = SingleDog.getInstance()
    const storage2 = SingleDog.getInstance()

在上述代码中，我们创建了一个class 类 SingleDog。它里面我们声明了一个静态方法。

这个静态方法就是来判断这个SingleDog是否已经被实例化的方法。

如果已经被实例化，那么它将直接返回这个实例。

如果不存在，那么它会实例化一个新的SingleDog类并且返回它。

并且最后我们实例化的两个 storage1 与 storage2 它两相等一定是为 true的。

除过以上的clss实现之外。我们还可以使用闭包的方式来进行实现 单例模式。

SingleDog.getInstance = (function () {
    // 定义自由变量instance 
    let instance = null
    return function (){
        // 判断是否有值
        if(!instance){
            // 创建
            instance = new SingleDog()
                    
        }   
        return instance 
    } 
})()

在实战中我们如何使用单例模式呢？

比如：实现一个全局唯一的弹窗。

const modal  = (function (){
    let modal = null
    return function () {
        if(!modal){
            modal.document.createElement('div')
            modal.innerHTML = '我是一个全局弹框'
            modal.id = 'modal'
            modal.style.display = 'none'
            document.body.appendChild(modal)                                    
        }    
        
    }
})()

// 打开方法
const modal = new Modal()
modal.style.display = 'block'

// 关闭方法
const modal = new Modal()
modal.style.display = 'none'

这样我们就成功的使用单例模式创建了一个全局的弹窗。不管是打开方法还是关闭方法他们都指向了同一个弹窗。

说到这里了，就给大家扒一下vue的源码吧。看看vuex 在vue的单例模式是如何实现的。

在vue中，一个vue实例只能对应一个Store。

我们熟知的vue中，安装vuex 使用的是 

Vue.use(Vuex)

那你知道它是如何在vue中运行的吗？

答案是vuex内部实现了一个install 方法，这个方法会在安装的时候被调用，从而把vuex注入到vue实例中去，也就是说每一次的install，都会尝试给vue实例注入一个vuex。

 

但是同时，install方法做了单例模式的判断。如：

 它每次都在判断是否存在vue，存在就直接抛出。所以这样的vuex不管怎样在vue的实例中都会只有一个。