设计模式1——单例模式

我很高兴能够开始一个新系列，我们将深入探讨一些针对前端开发人员的流行设计模式。

设计模式是软件开发的重要组成部分，它为常见问题提供了经过尝试和测试的解决方案，可用于在与同一项目上的许多人合作时改善协作。

在本系列的第一篇文章中，我们将探讨单例模式，该模式确保一个类只有一个实例，并提供一个全局访问点。敬请期待本系列中更多探讨不同设计模式的文章。

单例模式

单例模式是一种设计模式，它将一个类的创建限制为仅一个实例。这在需要单点控制或协调的场景中非常有用。换句话说，它确保一个类只有一个实例，并提供一个全局访问点。

此模式通常用于配置数据、缓存、连接池或日志记录，在这些情况下，运行一个实例供应用程序中的其他进程使用会更高效。当需要维护状态、初始化字段或管理调用和回调队列时，它也很有用。

例如，如果一个应用程序有一个下拉列表，可以从多个地方访问，那么单例可以管理这个共享资源。这确保了如果在一个地方修改了列表，则更改会反映到整个应用程序中。

如果您需要在应用程序的多个实例（例如不同的设备）之间共享这些信息，可以使用SuperViz的实时数据引擎。该引擎专为开发人员设计，可轻松无缝集成到您的项目中，使您能够实现诸如发布者/订阅者模式之类的设计模式。我们的引擎确保高效实时的更新，从而提升应用程序的响应速度和整体用户体验。

单例示例

下面是如何在 JavaScript 中实现此下拉列表的基本示例：

let dropdownListItems;
class DropdownList {
    constructor(items = []) {
        if (dropdownListItems) {
            return dropdownListItems;
        }

        dropdownListItems = items;
    }

    addItem(item) {
        dropdownListItems.push(item);
    }

    removeItem(item) {
        dropdownListItems = dropdownListItems.filter(i => i !== item);
    }
}

const dropdownList = new DropdownList();
export default dropdownList;

这段 JavaScript 代码定义了一个类 DropdownList 及其一个实例。

1. dropdownListItems 是一个最初为的变量 undefined。
2. 该类 DropdownList 使用构造函数定义，该构造函数接受一个项目数组作为参数，如果没有提供参数，则默认为空数组。
3. 在构造函数中，如果 dropdownListItems 已经定义，则返回定义的那个。如果 dropdownListItems 未定义，则将 items 参数 赋给dropdownListItems。
4. 此类 DropdownList 有两种方法： addItem 和 removeItem。
   • addItem 方法：此方法接受一个项目作为参数并将其推送到 dropdownListItems 数组。
   • removeItem 方法：此方法接受一个项作为参数，并将其从 dropdownListItems 数组中删除。它通过重新赋值 dropdownListItems 给一个新数组来实现，该新数组会过滤掉要删除的项。
5. 的实例 DropdownList 创建时不带任何参数，因此它将被初始化为一个空数组。该实例存储在 dropdownList 常量中。

ES2016 中的单例模式

上面的代码展示了如何用 ES2015 实现单例，我选择先以这种方式展示给你，以便让你更容易理解单例的含义。

然而，ES2016 引入了static关键字，它可以用来在类上创建静态实例属性。这个静态实例属性可以用来保存类的单个实例。

class DropdownList {
  static dropdownListItems = [];

  constructor(items = []) {
    if (DropdownList.dropdownListItems.length) {
      return DropdownList.dropdownListItems;
    }
    DropdownList.dropdownListItems = items;
  }

  addItem(item) {
    DropdownList.dropdownListItems.push(item);
  }

  removeItem(item) {
    DropdownList.dropdownListItems = DropdownList.dropdownListItems.filter(i => i !== item);
  }
}

const dropdownList = new DropdownList();

export default dropdownList;

在 ES2016 版本中，实例是类本身的静态属性，而不是单独的变量。这清楚地表明实例与类相关联，而不仅仅是类上的某个随机变量。

实例在模块加载时创建，每次导入类时都会返回相同的实例。这也意味着我们不再需要了Object.freeze(player);。

敬请期待本系列的更多文章，我们将继续探讨不同的设计模式。如果您觉得本文有用，别忘了关注和点赞。如有任何问题，欢迎在评论区留言。