单例模式

什么是单例？

保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。

具体实现

闭包实现，单一职责

     function createDiv(html) {
        var div = document.createElement('div');
        div.innerHTML = html;
        document.body.appendChild(div)
        return div;
    }

    function singleObj(fun) {
        var instance;
        return function () {
            return instance || (instance = fun.apply(this, arguments))
        }
    }
    var aaa = singleObj(createDiv)      
    aaa('123123');
    aaa('3455334')
    
    var bbb = singleObj(createDiv);
    bbb('3451231233534')

利用es6 class

  class abc {
        name;
        static getInstance(instan) {
            if (!abc.instance) {
                abc.instance = new abc()
            }
            abc.instance.name = instan
            return abc.instance
        }
    }

    var a = abc.getInstance('12312')
    var b = abc.getInstance('2342342')
    console.log(a,b,a===b)   //结果 {name: "2342342"} abc {name: "2342342"} true

3.vue 源码中具体应用

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 ——Vuex官方文档

//安装vuex插件
Vue.use(Vuex)

//将store注入到vue实例
new Vue({
 el:"#app",
 store
})

vue.use里实现了一个install方法。具体:

  let Vue   //和instance一样
  if (Vue && _Vue === Vue) { 
      if (process.env.NODE_ENV !== 'production') { 
          console.error( '[vuex] already installed. 
          Vue.use(Vuex) should be called only once.' ) 
      } 
    return 
  } 
  // 若没有，则为这个Vue实例对象install一个唯一的Vuex 
  Vue = _Vue 
  // 将Vuex的初始化逻辑写进Vue的钩子函数里 
  applyMixin(Vue)

这样可以确保一个vue实例只有一个vuex插件，也就是一个Vue实例只有一个store。

参考资料

javaScript 设计模式开发与实践 --曾探著
javaScript 设计模式核心原理与应用实践 --修言

前端必会的设计模式之一-单例

单例模式

什么是单例？

具体实现

参考资料