js设计模式--创建型--单例模式

  创建型:单例模式

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

  单例模式的实现思路:

 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,中间的数据操作就都没有了。

  

  

原文地址:https://www.cnblogs.com/Sabo-dudu/p/14647258.html