JS 编程如何实现单例模式

单例模式是一种设计模式，它确保一个特定类只有一个实例，并提供了一个全局访问点。在JavaScript 编程中实现单例模式通常包括创建一个对象，并确保重复的实例化操作返回同样的对象实例、通过控制全局访问来管理单个对象实例。

要详细描述其中一点，比如控制全局访问来管理单个对象实例，我们会涉及闭包和即时函数的使用。通过创建一个自执行的函数，我们可以封装私有变量，这个自执行的函数返回一个构造器或者一个对象。在这个构造器或者对象中，判断实例是否已经被创建，如果已经创建，则返回这个实例引用；如果没有创建，则创建一个新的实例并返回。这样，无论我们尝试实例化对象多少次，都只能得到最初的那个实例。

一、单例模式的基本实现

创建单例构造函数

要创建一个单例模式，你首先需要一个构造函数，用于创建实例。但是为了确保只有一个实例，必须在构造函数内进行管理。

var Singleton = (function(){
    var instance;
    function createInstance() {
        var obj = new Object("I am the instance");
        return obj;
    }
    return {
        getInstance: function(){
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

在这个例子中，我们声明了一个匿名自执行函数，它返回了包含 getInstance 方法的对象。getInstance 方法会检查变量 instance 是否已经存在，如果不存在就创建一个新的 Object 实例。

单例实例的全局访问

function run() {
    var instance1 = Singleton.getInstance();
    var instance2 = Singleton.getInstance();
    console.log("Same instance? " + (instance1 === instance2));  
}
run();

在 run 函数中，我们尝试获取两次单例实例，按照单例模式的原则，instance1 和 instance2 应该指向同一个对象，因此输出结果将为 true。

二、单例模式的高级实践

使用闭包确保私有性

为了防止外部代码直接修改单例实例，可以使用闭包隐藏 instance 变量。

var Singleton = (function() {
    var instance;
    function initializeNewInstance() {
        var _privateNumber = Math.random();
        function privateMethod() {
            console.log(_privateNumber);
        }
        return {
            publicMethod: function() {
                privateMethod();
            },
            publicProperty: 'singletonPublicProperty'
        };
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = initializeNewInstance();
            }
            return instance;
        }
    };
})();

在这个改进的单例模式中，并非直接返回一个对象实例，我们返回经过初始化的对象，该对象拥有公有方法和属性。私有成员 _privateNumber 和 privateMethod 由于闭包的特性，它们无法从外部直接访问，只能通过公有方法来访问。

模块化单例模式

在更复杂的场景下，你可能需要将单例对象作为一个模块，为此你可以采用现代的模块系统，如 ES6 模块或 CommonJS。

// singleton.js
let instance;
class Singleton {
    constructor() {
        if (!instance) {
            instance = this;
        }
        // Initialize all your singleton properties here
        this.singletonProperty = 'Singleton Property';
        return instance;
    }
    // Instance methods
    singletonMethod() {
        return 'Singleton Method';
    }
}
export default Singleton;

然后在需要的文件中引入并使用它。

// mAIn.js
import Singleton from './singleton';
const singletonInstance = new Singleton();
console.log(singletonInstance.singletonMethod()); // 'Singleton Method'

在此模块系统中，无论 Singleton 类被实例化多少次，导入的 singletonInstance 总是同一个实例。

三、单例模式的应用实例

全局状态管理

在前端框架中，单例模式常用于管理全局状态。例如，我们可以管理全局的配置对象。

const GlobalState = (function() {
    let instance;
    function Singleton() {
        if (instance) {
            return instance;
        }
        instance = this;
        // 全局状态的属性
        this.globalConfig = {
            theme: 'dark',
            language: 'en'
        };
        // 管理全局状态的方法
        this.changeLanguage = function(lang) {
            this.globalConfig.language = lang;
        };
        return instance;
    }
    return Singleton;
})();
const globalStateInstance1 = new GlobalState();
globalStateInstance1.changeLanguage('es');
console.log(globalStateInstance1.globalConfig.language);  // 'es'
const globalStateInstance2 = new GlobalState();
console.log(globalStateInstance2.globalConfig.language);  // 'es'

这个全局状态实例，不管在哪里被创建，都会访问到相同的 globalConfig 对象和 changeLanguage 方法。

单例与事件管理

单例模式在事件管理中也非常有用。你可以创建一个单例的事件管理器，所有事件的监听和触发都通过这个单例来调度。

var EventManager = (function() {
    var instance;
    function SingletonEventManager() {
        if (instance) {
            return instance;
        }
        instance = this;
        this.events = {};
        this.on = function(eventName, callback) {
            if (!this.events[eventName]) {
                this.events[eventName] = [];
            }
            this.events[eventName].push(callback);
        };
        this.emit = function(eventName, data) {
            if (!this.events[eventName]) return;
            this.events[eventName].forEach(callback => {
                callback(data);
            });
        };
        return instance;
    }
    return SingletonEventManager;
})();
const eventManager1 = new EventManager();
eventManager1.on('dataReceived', data => console.log('Data received: ' + data));
const eventManager2 = new EventManager();
eventManager2.emit('dataReceived', 'Some data');  // 'Data received: Some data'