JS设计模式之单例模式原理与用法详解

前言

单例模式是一种常见的设计模式，在实际项目中也被广泛应用。在JavaScript中的应用也非常普遍，本文将详细讲解单例模式的原理及用法。

什么是单例模式

单例模式是一种只允许创建一个实例的模式。一般使用该模式的主要目的有以下两点：

• 避免全局变量的污染
• 保证对象只有一个实例，节约系统资源，提高代码效率

单例模式的实现

JavaScript中的单例模式实现非常简单，我们可以定义一个全局对象来存储单例实例。

1. 最简单的单例模式

最简单的单例模式就是定义一个全局对象，每次创建实例时先判断该全局对象是否已经有实例了，如果有则返回该实例，如果没有则创建新的实例并存储到全局对象中。

var singleton = {
    instance: null,
    getInstance: function() {
        if (!this.instance) {
            this.instance = {};
        }
        return this.instance;
    }
};

我们可以通过以下代码来使用该单例模式：

var instance1 = singleton.getInstance();
var instance2 = singleton.getInstance();
console.log(instance1 === instance2); // true

2. 单例模式与构造函数

上面的示例是基于一个单例对象来实现的，我们也可以使用构造函数来实现单例模式，只需要在构造函数中添加判断即可。

var Singleton = function() {
    if (Singleton.instance) {
        return Singleton.instance;
    }
    Singleton.instance = this;
};

var instance1 = new Singleton();
var instance2 = new Singleton();
console.log(instance1 === instance2); // true

3. 惰性单例模式

惰性单例模式指的是在需要的时候才创建对象实例。这主要是为了减少页面加载时不必要的资源浪费，只有当用户需要时才会加载相关资源。

我们可以通过以下代码来实现惰性单例模式：

var createInstance = function() {
    // 创建单例对象的代码
    return {};
};

var Singleton = (function() {
    var instance;
    return function() {
        if (!instance) {
            instance = createInstance();
        }
        return instance;
    }
})();

// 第一次调用时会创建实例
var instance1 = new Singleton();
// 第二次调用时不会再创建实例，而是返回之前创建的实例
var instance2 = new Singleton();
console.log(instance1 === instance2); // true

在上面的示例中，createInstance函数用来创建单例对象的代码，Singleton使用了闭包来存储单例对象实例。在第一次调用时会创建实例，以后调用时则直接返回之前创建的实例。

单例模式的应用场景

单例模式在实际项目中有一些典型的应用场景。

1. 页面登录框

在很多网站中都会使用登录框，由于登录框只需要有一个实例，因此可以使用单例模式来实现。

var loginBox = (function() {
    var box;
    return function() {
        if (!box) {
            box = document.createElement('div');
            box.innerHTML = '登录框';
            document.body.appendChild(box);
        }
        return box;
    };
})();

var btn = document.getElementById('show_login_box');
btn.onclick = function() {
    var box = loginBox();
    box.style.display = 'block';
};

在这个示例中，我们使用函数来创建一个登录框，由于只需要有一个实例，因此使用单例模式来实现。在第一次调用时，创建并添加登录框元素，以后调用时直接返回之前创建的元素。

2. 购物车实例

再举一个应用单例模式的例子：购物车实例。在一个网站中往往只需要一个购物车实例，因此可以使用单例模式来实现。

var ShoppingCart = (function() {
    var instance;
    var items = [];
    return function() {
        if (!instance) {
            instance = this;
        }
        instance.getItems = function() {
            return items;
        };
        return instance;
    };
})();

// 创建购物车实例
var cart1 = new ShoppingCart();
// 向购物车中添加商品
cart1.getItems().push({id: 1, name: '商品1', price: 10});
cart1.getItems().push({id: 2, name: '商品2', price: 20});

// 获取购物车实例
var cart2 = new ShoppingCart();

// cart2中的商品与cart1相同
console.log(cart2.getItems()); // [{id: 1, name: '商品1', price: 10}, {id: 2, name: '商品2', price: 20}]

总结

单例模式是一种非常常见的设计模式，在实际开发过程中也经常使用。没有一种单例模式是绝对正确的，每种实现方法都有优缺点，开发者需要根据实际场景来选择适合的单例模式实现。通过学习本文，您应该对单例模式有了更深入的理解。