本文共 2108 字，大约阅读时间需要 7 分钟。

单例模式与 ES5/ES6 实现

什么是单例模式？

在软件开发中，单例模式是一种软件设计模式，确保一个类只存在一个实例。这种模式常用于需要对资源进行控制管理的场景，例如全局缓存或弹窗组件。

单例模式的实现方式

单例模式的核心思想是确保某个类只能有一个实例。常见的实现方式包括：

ES5 与 ES6 的单例模式实现

ES5 实现：

var createLoginLayer = (function() {
    var div = document.createElement('div');
    div.innerHTML = '我是登录的弹窗';
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
})();
document.getElementById('button').onclick = function() {
    loginLayer.style.display = 'block';
};

ES6 实现：

class LoginLayer {
    constructor() {
        this.div = document.createElement('div');
        this.div.innerHTML = '我是登录的弹窗';
        this.div.style.display = 'none';
        document.body.appendChild(this.div);
    }
    show() {
        this.div.style.display = 'block';
    }
}
const loginInstance = new LoginLayer();
loginInstance.show = () => {
    loginInstance.div.style.display = 'block';
};
document.getElementById('button').addEventListener('click', () => {
    loginInstance.show();
});

单例模式优化

在 ES6 中，可以借助 static 关键字实现单例模式。通过在类级别定义一个静态属性 instance，确保只创建一个实例。

代码示例：

class LyEdu {
    static getInstance(name, creator, products) {
        if (!LyEdu.instance) {
            LyEdu.instance = new LyEdu(name, creator, products);
        }
        return LyEdu.instance;
    }
    constructor(name, creator, products) {
        this.name = name;
        this.creator = creator;
        this.products = products;
    }
}
// 创建实例
const lyCom = LyEdu.getInstance('零元教育', '裴老师', ['js', 'css', 'html']);
// 创建第二个实例
const lyCom2 = LyEdu.getInstance('零元教育2', '裴老师2', ['js2', 'css', 'html']);
console.log(lyCom === lyCom2); // true

静态方法与单例模式

静态方法可以在类级别定义，避免实例调用。通过在静态方法中管理单例实例，可以实现更高效的资源管理。

代码示例：

class Foo {
    static classMethod() {
        return 'hello';
    }
}
const foo = new Foo();
console.log(Foo.classMethod()); // 输出 'hello'

结论

单例模式通过确保类只存在一个实例，优化了资源管理，避免了频繁的对象创建和销毁带来的性能消耗。在 ES5 和 ES6 中，可以通过不同的方式实现单例模式。借助静态属性和方法，可以进一步优化代码结构，提升开发效率。