其实单例模式很简单,它指的就是保证一个类无论你实例化几个,它都指向同一个实例。
而在我们身边也见过许多类似的场景:如,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的实例中都会只有一个。