JavaScript 设计模式之单体模式

什么是单体模式？

单体模式，也叫单例模式，是一种面向对象设计模式，它保证一个类只能有一个实例，并提供一个访问它的全局访问点。

单体模式的优点

提供了对唯一实例的受控访问。
在一个应用程序中，这样的实例很少，因为这会节约系统资源。
可以用于全局变量，避免命名空间污染。
提供了对单例对象的集中化管理。

实现单体模式

在 JavaScript 中，单体模式有很多实现方式，下面是一种最常见的实现方式：

var Singleton = (function () {
    var instance;

    function SingletonConstructor() {
        // 单例对象的属性和方法
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = new SingletonConstructor();
            }
            return instance;
        }
    };
})();

在这个实现中，Singleton 是一个函数，它定义了一个包装器，并返回一个对象，这个对象有一个名为 getInstance 的方法。这个方法检查是否已经存在实例了，如果不存在，它就创建一个实例，并返回。

通过 new SingletonConstructor() 创建的实例为单体模式中的单例对象。通过 getInstance 方法访问单例对象。

这种实现方式使用了闭包来保持对 SingletonConstructor 的引用，从而避免了将其暴露在全局作用域。

示例说明

下面两个示例说明如何在 JavaScript 中使用单体模式。

示例一：全局配置对象

在一个 Web 应用程序中，可能需要一个全局的配置对象，用于保存各种配置信息。

var Config = (function () {
    var instance;
    var configData = {
        apiURL: "http://api.example.com",
        apiToken: "xxxxxxxx"
    };

    function ConfigConstructor() {
        // 给单例对象添加属性和方法
        this.getApiURL = function () {
            return configData.apiURL;
        };
        this.getApiToken = function () {
            return configData.apiToken;
        };
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = new ConfigConstructor();
            }
            return instance;
        }
    };
})();

console.log(Config.getInstance().getApiURL());

在这个示例中，单例对象 Config 保存了一个名为 configData 的配置对象。通过调用 Config.getInstance().getApiURL() 方法，可以获取配置对象中的 apiURL 属性的值。

示例二：模态框

在一个 Web 应用程序中，可能需要一个全局的模态框来展示各种弹窗。

var Modal = (function () {
    var instance;
    var modalContainer = document.createElement("div");
    modalContainer.className = "modal-container";

    function ModalConstructor() {
        // 给单例对象添加属性和方法
        this.show = function () {
            document.body.appendChild(modalContainer);
        };
        this.hide = function () {
            document.body.removeChild(modalContainer);
        };
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = new ModalConstructor();
            }
            return instance;
        }
    };
})();

// 显示模态框
Modal.getInstance().show();
// 隐藏模态框
Modal.getInstance().hide();

在这个示例中，单例对象 Modal 保存了一个名为 modalContainer 的模态框容器。通过调用 Modal.getInstance().show() 方法，可以显示模态框，在调用 Modal.getInstance().hide() 方法后，模态框会被隐藏。