JavaScript 设计模式核⼼原理与应⽤实践之单例模式——Vuex的数据管理哲学

偏执的太偏执、 2023-03-01 10:47 14阅读 0赞

## JavaScript 设计模式核⼼原理与应⽤实践之单例模式——Vuex的数据管理哲学 ##

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

## ##

### 单例模式的实现思路 ###

> 思考这样一个问题：如何才能保证一个类仅有一个实例？

一般情况下，当我们创建了一个类（本质是构造函数）后，可以通过new关键字调用构造函数进而生成任意多的实例对象。像这样：

class SingleDog {
        show() {
            console.log('我是一个单例对象')
        }
    }
    
    const s1 = new SingleDog()
    const s2 = new SingleDog()
    
    // false
    s1 === s2

楼上我们先 new 了一个 s1，又 new 了一个 s2，很明显 s1 和 s2 之间没有任何瓜葛，两者是相互独立的对象，各占一块内存空间。而单例模式想要做到的是，**不管我们尝试去创建多少次，它都只给你返回第一次所创建的那唯一的一个实例**。

要做到这一点，**就需要构造函数具备判断自己是否已经创建过一个实例的能力**。我们现在把这段判断逻辑写成一个静态方法(其实也可以直接写入构造函数的函数体里）：

class SingleDog {
        show() {
            console.log('我是一个单例对象')
        }
        static getInstance() {
            // 判断是否已经new过1个实例
            if (!SingleDog.instance) {
                // 若这个唯一的实例不存在，那么先创建它
                SingleDog.instance = new SingleDog()
            }
            // 如果这个唯一的实例已经存在，则直接返回
            return SingleDog.instance
        }
    }
    
    const s1 = SingleDog.getInstance()
    const s2 = SingleDog.getInstance()
    
    // true
    s1 === s2

除了楼上这种实现方式之外，getInstance的逻辑还可以用闭包来实现：

SingleDog.getInstance = (function() {
        // 定义自由变量instance，模拟私有变量
        let instance = null
        return function() {
            // 判断自由变量是否为null
            if(!instance) {
                // 如果为null则new出唯一实例
                instance = new SingleDog()
            }
            return instance
        }
    })()

可以看出，在getInstance方法的判断和拦截下，我们不管调用多少次，SingleDog都只会给我们返回一个实例，s1和s2现在都指向这个唯一的实例。

## ##

### 生产实践：Vuex中的单例模式 ###

理解 Vuex 中的 Store

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

在Vue中，组件之间是独立的，组件间通信最常用的办法是 props（限于父组件和子组件之间的通信），稍微复杂一点的（比如兄弟组件间的通信）我们通过自己实现简单的事件监听函数也能解决掉。

但当组件非常多、组件间关系复杂、且嵌套层级很深的时候，这种原始的通信方式会使我们的逻辑变得复杂难以维护。这时最好的做法是将共享的数据抽出来、放在全局，供组件们按照一定的的规则去存取数据，保证状态以一种可预测的方式发生变化。于是便有了 Vuex，这个用来存放共享数据的唯一数据源，就是 Store。

[\#][Link 1]4.2.2 Vuex如何确保Store的唯一性

// 安装vuex插件
    Vue.use(Vuex)
    
    // 将store注入到Vue实例中
    new Vue({
        el: '#app',
        store
    })

通过调用Vue.use()方法，我们安装了 Vuex 插件。Vuex 插件是一个对象，它在内部实现了一个 install 方法，这个方法会在插件安装时被调用，从而把 Store 注入到Vue实例里去。也就是说每 install 一次，都会尝试给 Vue 实例注入一个 Store。

在 install 方法里，有一段逻辑和我们楼上的 getInstance 非常相似的逻辑：

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)
    }

楼上便是 Vuex 源码中单例模式的实现办法了，套路可以说和我们的getInstance如出一辙。通过这种方式，可以保证一个 Vue 实例（即一个 Vue 应用）只会被 install 一次 Vuex 插件，所以每个 Vue 实例只会拥有一个全局的 Store。

## ##

### 小结 ###

思考一下：如果我在 install 里没有实现单例模式，会带来什么样的麻烦？

我们通过上面的源码解析可以看出，每次 install 都会为Vue实例初始化一个 Store。假如 install 里没有单例模式的逻辑，那我们如果在一个应用里不小心多次安装了插件：

// 在主文件里安装Vuex
    Vue.use(Vuex)
    
    ...(中间添加/修改了一些store的数据)
    
    // 在后续的逻辑里不小心又安装了一次
    Vue.use(Vuex)

失去了单例判断能力的 install 方法，会为当前的Vue实例重新注入一个新的 Store，也就是说你中间的那些数据操作全都没了，一切归 0。因此，单例模式在此处是非常必要的。

# #

## 创建型：单例模式——面试真题手把手教学 ##

**实现一个 Storage**

**描述**

> 实现Storage，使得该对象为单例，基于 localStorage 进行封装。实现方法 setItem(key,value) 和 getItem(key)。

**思路**

拿到单例模式相关的面试题，大家首先要做的是回忆我们上个小节的“基本思路”部分——至少要记起来`getInstance`方法和`instance`这个变量是干啥的。

具体实现上，把判断逻辑写入静态方法或者构造函数里都没关系，最好能把闭包的版本也写出来，多多益善。

总之有了上节的基础，这个题简直是默写！

> **实现：静态方法版**

// 定义Storage
    class Storage {
        static getInstance() {
            // 判断是否已经new过1个实例
            if (!Storage.instance) {
                // 若这个唯一的实例不存在，那么先创建它
                Storage.instance = new Storage()
            }
            // 如果这个唯一的实例已经存在，则直接返回
            return Storage.instance
        }
        getItem (key) {
            return localStorage.getItem(key)
        }
        setItem (key, value) {
            return localStorage.setItem(key, value)
        }
    }
    
    const storage1 = Storage.getInstance()
    const storage2 = Storage.getInstance()
    
    storage1.setItem('name', '李雷')
    // 李雷
    storage1.getItem('name')
    // 也是李雷
    storage2.getItem('name')
    
    // 返回true
    storage1 === storage2

> **实现： 闭包版**

// 先实现一个基础的StorageBase类，把getItem和setItem方法放在它的原型链上
    function StorageBase () {}
    StorageBase.prototype.getItem = function (key){
        return localStorage.getItem(key)
    }
    StorageBase.prototype.setItem = function (key, value) {
        return localStorage.setItem(key, value)
    }
    
    // 以闭包的形式创建一个引用自由变量的构造函数
    const Storage = (function(){
        let instance = null
        return function(){
            // 判断自由变量是否为null
            if(!instance) {
                // 如果为null则new出唯一实例
                instance = new StorageBase()
            }
            return instance
        }
    })()
    
    // 这里其实不用 new Storage 的形式调用，直接 Storage() 也会有一样的效果 
    const storage1 = new Storage()
    const storage2 = new Storage()
    
    storage1.setItem('name', '李雷')
    // 李雷
    storage1.getItem('name')
    // 也是李雷
    storage2.getItem('name')
    
    // 返回true
    storage1 === storage2

## ##

### 实现一个全局的模态框 ###

**描述**

> 实现一个全局唯一的Modal弹框

**思路**

这道题比较经典，基本上所有讲单例模式的文章都会以此为例，同时它也是早期单例模式在前端领域的最集中体现。

万变不离其踪，记住getInstance方法、记住instance变量、记住闭包和静态方法，这个题除了要多写点 HTML 和 CSS 之外，对大家来说完全不成问题。

**实现**

完整代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单例模式弹框</title>
    </head>
    <style>
        #modal {
            height: 200px;
            width: 200px;
            line-height: 200px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <body>
    	<button id='open'>打开弹框</button>
    	<button id='close'>关闭弹框</button>
    </body>
    <script>
        // 核心逻辑，这里采用了闭包思路来实现单例模式
        const Modal = (function() {
        	let modal = null
        	return function() {
                if(!modal) {
                	modal = document.createElement('div')
                	modal.innerHTML = '我是一个全局唯一的Modal'
                	modal.id = 'modal'
                	modal.style.display = 'none'
                	document.body.appendChild(modal)
                }
                return modal
        	}
        })()
        
        // 点击打开按钮展示模态框
        document.getElementById('open').addEventListener('click', function() {
            // 未点击则不创建modal实例，避免不必要的内存占用;此处不用 new Modal 的形式调用也可以，和 Storage 同理
        	const modal = new Modal()
        	modal.style.display = 'block'
        })
        
        // 点击关闭按钮隐藏模态框
        document.getElementById('close').addEventListener('click', function() {
        	const modal = new Modal()
        	if(modal) {
        	    modal.style.display = 'none'
        	}
        })
    </script>
    </html>

是不是发现又是熟悉的套路？又可以默写了？（ES6 版本的实现大家自己尝试默写一下，相信对现在的你来说已经非常简单了）。

这就是单例模式面试题的特点，准确地说，是所有设计模式相关面试题的特点——牢记核心思路，就能举一反三。所以说设计模式的学习是典型的一分耕耘一分收获，性价比极高。

## ##

### 创建型：原型模式——谈Prototype无小事 ###

原型模式不仅是一种设计模式，它还是一种**编程范式（programming paradigm）**，是 JavaScript 面向对象系统实现的根基。

在原型模式下，当我们想要创建一个对象时，会先找到一个对象作为原型，然后通过**克隆原型**的方式来创建出一个与原型一样（共享一套数据/方法）的对象。在 JavaScript 里，`Object.create`方法就是原型模式的天然实现——准确地说，只要我们还在借助`Prototype`来实现对象的创建和原型的继承，那么我们就是在应用原型模式。

有的设计模式资料中会强调，原型模式就是拷贝出一个新对象，认为在 JavaScript 类里实现了深拷贝方法才算是应用了原型模式。这是非常典型的对 JAVA/C++ 设计模式的生搬硬套，更是对 JavaScript 原型模式的一种误解。事实上，在JAVA中，确实存在原型模式相关的克隆接口规范。但在 JavaScript 中，我们使用原型模式，并不是为了得到一个副本，而是为了得到与构造函数（类）相对应的类型的实例、实现数据/方法的共享。克隆是实现这个目的的方法，但克隆本身并不是我们的目的。

## ##

### 以类为中心的语言和以原型为中心的语言 ###

相信很多小伙伴读到这儿还会有些迷惑：使用 JavaScript 以来，我确实离不开Prototype，按照上面的说法，也算是原型模式重度用户了。但这个原型模式用得我一脸懵逼啊——难道我还有除了Prototype以外的选择？

[\#][Link 2]6.1.1 Java 中的类

作为 JavaScript 开发者，我们确实没有别的选择 —— 毕竟开头我们说过，原型模式是 JavaScript 这门语言面向对象系统的根本。但在其它语言，比如 JAVA 中，类才是它面向对象系统的根本。所以说在 JAVA 中，我们可以选择不使用原型模式 —— 这样一来，所有的实例都必须要从类中来，当我们希望创建两个一模一样的实例时，就只能这样做（假设实例从 Dog 类中来,必传参数为姓名、性别、年龄和品种）：

Dog dog = new Dog('旺财', 'male', 3, '柴犬')
    
    Dog dog_copy = new Dog('旺财', 'male', 3, '柴犬')

没错，我们不得不把一模一样的参数传两遍，非常麻烦。而原型模式允许我们通过调用克隆方法的方式达到同样的目的，比较方便，所以 Java 专门针对原型模式设计了一套接口和方法，在必要的场景下会通过原型方法来应用原型模式。当然，在更多的情况下，Java 仍以“实例化类”这种方式来创建对象。

[\#][Link 3]6.1.2 JavaScript 中的“类”

这时有一部分小伙伴估计要炸毛了：啥？？？JavaScript 只能用Prototype？我看你还活在上世纪，ES6 早就支持类了！现在我们 JavaScript 也是以类为中心的语言了。

这波同学的思想非常危险，因为 ES6 的类其实是原型继承的语法糖:

> ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为 JavaScript 引入新的面向对象的继承模型。 ——MDN

当我们尝试用 class 去定义一个 Dog 类时：

class Dog {
      constructor(name ,age) {
       this.name = name
       this.age = age
      }
      
      eat() {
        console.log('肉骨头真好吃')
      }
    }

其实完全等价于写了这么一个构造函数:

function Dog(name, age) {
      this.name = name
      this.age = age
    }
    
    Dog.prototype.eat = function() {
      console.log('肉骨头真好吃')
    }

所以说 JavaScript 这门语言的根本就是原型模式。在 Java 等强类型语言中，原型模式的出现是为了实现类型之间的解耦。而 JavaScript 本身类型就比较模糊，不存在类型耦合的问题，所以说咱们平时根本不会刻意地去使用原型模式。因此我们此处不必强行把原型模式当作一种设计模式去理解，把它作为一种编程范式来讨论会更合适。

## ##

### 谈原型模式，其实是谈原型范式 ###

原型编程范式的核心思想就是**利用实例来描述对象，用实例作为定义对象和继承的基础**。在 JavaScript 中，原型编程范式的体现就是**基于原型链的继承**。这其中，对原型、原型链的理解是关键。

原型

在 JavaScript 中，每个构造函数都拥有一个`prototype`属性，它指向构造函数的原型对象，这个原型对象中有一个 construtor 属性指回构造函数；每个实例都有一个`__proto__`属性，当我们使用构造函数去创建实例时，实例的`__proto__`属性就会指向构造函数的原型对象。

具体来说，当我们这样使用构造函数创建一个对象时：

// 创建一个Dog构造函数
    function Dog(name, age) {
      this.name = name
      this.age = age
    }
    
    Dog.prototype.eat = function() {
      console.log('肉骨头真好吃')
    }
    
    // 使用Dog构造函数创建dog实例
    const dog = new Dog('旺财', 3)

这段代码里的几个实体之间就存在着这样的关系：

![\-w492][-w492]

[\#][Link 4]6.2.1 **原型链**

现在我在上面那段代码的基础上，进行两个方法调用:

// 输出"肉骨头真好吃"
    dog.eat()
    
    // 输出"[object Object]"
    dog.toString()

明明没有在 dog 实例里手动定义 eat 方法和 toString 方法，它们还是被成功地调用了。这是因为当我试图访问一个 JavaScript 实例的属性/方法时，它首先搜索这个实例本身；当发现实例没有定义对应的属性/方法时，它会转而去搜索实例的原型对象；如果原型对象中也搜索不到，它就去搜索原型对象的原型对象，这个搜索的轨迹，就叫做原型链。

以我们的 eat 方法和 toString 方法的调用过程为例，它的搜索过程就是这样子的：

![\-w1022][-w1022] 楼上这些彼此相连的`prototype`，就组成了一个原型链。 注： 几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例，除了`Object.prototype`（当然，如果我们手动用`Object.create(null)`创建一个没有任何原型的对象，那它也不是 Object 的实例）。

以上为大家介绍了原型、原型链等 JavaScript 中核心的基础知识。这些不仅是基础中的基础，也是面试中的重点。此外在面试中，一些面试官可能会刻意混淆 JavaScript 中原型范式和强类型语言中原型模式的区别，当他们这么做的时候不一定是因为对语言、对设计模式的理解有问题，而很有可能是为了考察你对象的深拷贝。

## ##

### 对象的深拷贝 ###

这类题目的发问方式又很多，除了“模拟 JAVA 中的克隆接口”、“JavaScript 实现原型模式”以外，它更常见、更友好的发问形式是“请实现JS中的深拷贝”。

实现 JavaScript 中的深拷贝，有一种非常取巧的方式 —— JSON.stringify：

const liLei = {
        name: 'lilei',
        age: 28,
        habits: ['coding', 'hiking', 'running']
    }
    
    const liLeiStr = JSON.stringify(liLei)
    const liLeiCopy = JSON.parse(liLeiStr)
    
    liLeiCopy.habits.splice(0, 1) 
    console.log('李雷副本的habits数组是', liLeiCopy.habits)
    console.log('李雷的habits数组是',  liLei.habits)

丢进控制台检验一下，我们发现引用类型也被成功拷贝了，副本和本体相互不干扰，正合我意~

![\-w559][-w559] 但是注意，这个方法存在一些局限性，比如无法处理 function、无法处理正则等等——只有当你的对象是一个严格的 JSON 对象时，可以顺利使用这个方法。在面试过程中，大家答出这个答案没有任何问题，但不要仅仅答这一种做法。

\*\*深拷贝没有完美方案，每一种方案都有它的边界 case。\*\*而面试官向你发问也并非是要求你破解人类未解之谜，多数情况下，他只是希望考查你对递归的熟练程度。所以递归实现深拷贝的核心思路，大家需要重点掌握（解析在注释里）：

function deepClone(obj) {
        // 如果是 值类型 或 null，则直接return
        if(typeof obj !== 'object' || obj === null) {
            return obj
        }
        
        // 定义结果对象
        let copy = {}
        
        // 如果对象是数组，则定义结果数组
        if(obj.constructor === Array) {
            copy = []
        }
        
        // 遍历对象的key
        for(let key in obj) {
            // 如果key是对象的自有属性
            if(obj.hasOwnProperty(key)) {
                // 递归调用深拷贝方法
                copy[key] = deepClone(obj[key])
            }
        }
        
        return copy
    }

调用深拷贝方法，若属性为值类型，则直接返回；若属性为引用类型，则递归遍历。这就是我们在解这一类题时的核心的方法。

**拓展阅读**

深拷贝在命题时，可发挥的空间主要在于针对不同数据结构的处理，比如除了考虑 Array、Object，还需要考虑一些其它的数据结构（Map、Set 等）；此外还有一些极端 case（循环引用等）的处理等等。深拷贝的实现细节，这里为大家推荐两个阅读材料：

*  [jQuery中的extend方法源码][jQuery_extend]
 *  [深拷贝的终极探索][Link 5]

# #

[Link 1]: https://www.weisuoke.com/fe2020/Gof/juejin-GoF.html#_4-2-2-vuex%E5%A6%82%E4%BD%95%E7%A1%AE%E4%BF%9Dstore%E7%9A%84%E5%94%AF%E4%B8%80%E6%80%A7
[Link 2]: https://www.weisuoke.com/fe2020/Gof/juejin-GoF.html#_6-1-1-java-%E4%B8%AD%E7%9A%84%E7%B1%BB
[Link 3]: https://www.weisuoke.com/fe2020/Gof/juejin-GoF.html#_6-1-2-javascript-%E4%B8%AD%E7%9A%84%E2%80%9C%E7%B1%BB%E2%80%9D
[-w492]: /images/20230208/e2212e09e34a42ab990c1787fa6ddcb4.png
[Link 4]: https://www.weisuoke.com/fe2020/Gof/juejin-GoF.html#_6-2-1-%E5%8E%9F%E5%9E%8B%E9%93%BE
[-w1022]: https://imgconvert.csdnimg.cn/aHR0cDovL3dzay1td2ViLm9zcy1jbi1oYW5nemhvdS5hbGl5dW5jcy5jb20vMjAyMC8wMS8yMS8xNTc5NTI5NjM3OTQ0Ni5qcGc?x-oss-process=image/format,png
[-w559]: https://imgconvert.csdnimg.cn/aHR0cDovL3dzay1td2ViLm9zcy1jbi1oYW5nemhvdS5hbGl5dW5jcy5jb20vMjAyMC8wMS8yMS8xNTc5NTMyMzk0MzU4Mi5qcGc?x-oss-process=image/format,png
[jQuery_extend]: https://github.com/jquery/jquery/blob/1472290917f17af05e98007136096784f9051fab/src/core.js#L121
[Link 5]: https://juejin.im/book/5c70fc83518825428d7f9dfb/section/5c84d96ee51d453b7666b2ad