创建型:单例模式
保证一个类仅有一个实例,并提供一个访问它的全局访问点,这种模式叫做单例模式。
单例模式的实现思路:
1 // 首先先创建一个类,通过new关键字调用构造函数可以生成任意多得实例对象。 2 class Single { 3 show() { 4 console.log("我是一个单列对象"); 5 } 6 } 7 const s1 = new Single(); 8 const s2 = new Single(); 9 10 s1 === s2; // 返回false 11 // s1 和 s2 相互独立,各占内存空间。 12 13 // 单例模式:不管创建多少次,都返回第一次创建得那个唯一实例。 14 class SingleCl { 15 show() { 16 console.log("我是单例对象"); 17 } 18 static getInstance() { 19 // 先判断是否存在 instance 静态属性 20 if(!SingleCl.instance){ 21 // 若没有创建,就先给 instance 静态属性添加实例 22 SingleCl.instance = new SingleCl(); 23 } 24 // 如果唯一得实例存在,则直接返回 25 return SingleCl.instance; 26 } 27 } 28 const s3 = new SingleCl(); 29 const s4 = new SingleCl(); 30 s3 === s4 // 返回 true 不管调用多少次,都只返回一个实例
单例模式的业务场景:
Vuex 中的全局store 用于存储应用的所有状态,这个store正是 单例模式的典型应用。
Vuex 如何确保 Store的唯一性
Vue.use(Vuex) // 将store注入到Vue实例中
new Vue({ el: '#app', store })
// Vuex插件是一个对象,内部实现了一个 install 方法,会在安装的时候调用。把Store注入到 Vue中。 let Vue // 这个Vue的作用和上面的 instance 作用一样 ... export function install (_Vue) { // 判断传入的Vue实例对象是否已经被install过Vuex插件(是否有了唯一的state) 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) }
如果没有在 install 方法里面实现单例模式,如果一个应用不小心安装了多次,那么vue会重新注入一个新的 Store,中间的数据操作就都没有了。