November 09, 2023·vincent

深入理解单例模式：ES6 实现与实际应用

本文深入探讨了单例模式在 JavaScript 中的应用，使用 ES6 语法重写了传统的单例模式，并介绍了透明单例模式、通用惰性单例和代理模式单例的实现方式。通过实际应用场景，展示了如何使用单例模式来优化代码，实现惰性加载对象，以及管理全局缓存。学习单例模式有助于提高 JavaScript 编程技巧，提供了一种有效的设计模式来确保对象的唯一性和全局访问。

设计模式

单例模式是一种重要的设计模式，它旨在确保一个类只有一个实例，并提供一个全局访问点。在本文中，我们将深入探讨单例模式的不同实现方式，使用ES6语法进行重写，并结合实际应用场景进行演示，以便更全面地理解和应用这一模式。

传统的单例模式

传统的单例模式实现方式在JavaScript中通常使用构造函数和原型链，再通过静态方法来创建单例。这种方式如下所示：

javascript

1class Singleton {
2  constructor(name) {
3    this.name = name;
4  }
5
6  static instance = null;
7
8  static getInstance(name) {
9    if (!this.instance) {
10      this.instance = new Singleton(name);
11    }
12    return this.instance;
13  }
14}

这段代码使用ES6的类语法，通过getInstance静态方法来确保只有一个实例存在。虽然这是一种有效的实现方式，但不太符合JavaScript的特性。

透明的单例模式

透明的单例模式使单例的创建更为透明，使用者无需知道对象是单例的。以下是一个示例：

javascript

1class CreateDiv {
2  constructor(html) {
3    this.html = html;
4    this.init();
5  }
6
7  init() {
8    const div = document.createElement('div');
9    div.innerHTML = this.html;
10    div.style.display = 'none';
11    document.body.appendChild(div);
12  }
13}
14
15const createSingleLoginLayer = (function() {
16  let instance = null;
17  
18  return function(html) {
19    if (!instance) {
20      instance = new CreateDiv(html);
21    }
22    return instance;
23  };
24})();

上面的代码中，我们创建了一个CreateDiv类，它用于创建div元素。然后，使用一个闭包包裹的自执行函数创建了createSingleLoginLayer函数，以确保只有一个div元素实例存在。当用户点击登录按钮时，将调用createSingleLoginLayer函数来显示登录浮窗。

这是一种更加透明和易用的单例模式实现方式。

通用的惰性单例

通用的惰性单例模式将创建对象和管理单例的逻辑分离，使代码更具灵活性。以下是示例代码：

javascript

1const getSingle = function(fn) {
2  let instance = null;
3  
4  return function(...args) {
5    if (!instance) {
6      instance = fn.apply(this, args);
7    }
8    return instance;
9  };
10};

上面的代码定义了一个getSingle函数，它接受一个函数fn作为参数。getSingle函数返回一个新的函数，这个新函数用于创建对象实例并确保只有一个实例存在。

我们可以使用getSingle函数来创建各种类型的单例对象，无论是登录浮窗、iframe还是其他任何需要惰性加载的对象。

javascript

1const createSingleLoginLayer = getSingle(function(html) {
2  const div = document.createElement('div');
3  div.innerHTML = html;
4  div.style.display = 'none';
5  document.body.appendChild(div);
6  return div;
7});
8
9const createSingleIframe = getSingle(function() {
10  const iframe = document.createElement('iframe');
11  document.body.appendChild(iframe);
12  return iframe;
13});

上述代码使用getSingle函数分别创建了登录浮窗和iframe的懒惰单例。这些模式确保对象只在需要时才被创建，避免不必要的资源浪费。

惰性单例与实际应用

在实际应用中，惰性单例模式非常有用，它在需要的时候才创建对象实例，避免不必要的资源开销。让我们看一下如何将惰性单例应用于实际场景。

登录浮窗

假设我们是Web应用的开发人员，需要实现一个登录浮窗，用户点击登录按钮时才显示。我们可以使用惰性单例来确保只有一个登录浮窗实例存在：

javascript

1const createSingleLoginLayer = getSingle(function(html) {
2  const div = document.createElement('div');
3  div.innerHTML = html;
4  div.style.display = 'none';
5  document.body.appendChild(div);
6  return div;
7});
8
9document.getElementById('loginBtn').onclick = function() {
10  const loginLayer = createSingleLoginLayer('我是登录浮窗');
11  loginLayer.style.display = 'block';
12};

在上面的示例中，我们使用createSingleLoginLayer函数创建登录浮窗实例。只有在用户点击登录按钮时，浮窗才会被创建和显示，确保了惰性加载和单例的效果。

全局缓存

另一个实际应用场景是全局缓存。惰性单例模式可以用来管理全局缓存对象，确保只有一个缓存实例存在，并提供全局访问点。以下是一个示例：

javascript

1const createSingleCache = getSingle(function() {
2  const cache = {};
3  return {
4    set(key, value) {
5      cache[key] = value;
6    },
7    get(key) {
8      return cache[key];
9    },
10  };
11});
12
13const globalCache = createSingleCache();
14
15// 在不同模块中使用全局缓存
16globalCache.set('user', { name: 'John' });
17const user = globalCache.get('user');

在上面的示例中，我们使用createSingleCache函数创建全局缓存实例。不同模块中都可以使用globalCache来存储和获取数据，确保数据的一致性和唯一性。

代理实现单例

代理模式可以用来实现单例，通过引入代理类来管理单例对象的创建和访问。以下是一个代理实现的示例：

javascript

1class CreateDiv {
2  constructor(html) {
3    this.html = html;
4    this.init();
5  }
6
7  init() {
8    const div = document.createElement('div');
9    div.innerHTML = this.html;
10    div.style.display = 'none';
11   
12
13 document.body.appendChild(div);
14  }
15}
16
17class ProxyCreateDiv {
18  constructor(html) {
19    this.createDiv = new CreateDiv(html);
20  }
21
22  display() {
23    this.createDiv.style.display = 'block';
24  }
25}
26
27const createSingleLoginLayer = (function() {
28  let instance = null;
29  
30  return function(html) {
31    if (!instance) {
32      instance = new ProxyCreateDiv(html);
33    }
34    return instance;
35  };
36})();
37
38document.getElementById('loginBtn').onclick = function() {
39  const loginLayer = createSingleLoginLayer('我是登录浮窗');
40  loginLayer.display();
41};

在上面的示例中，我们引入了ProxyCreateDiv代理类，用于管理CreateDiv的创建和访问。通过代理模式，我们可以实现更灵活的单例管理方式。

总结

单例模式是一个重要的设计模式，在不同的编程场景中都有广泛的应用。通过使用ES6语法，我们可以更清晰地实现单例模式，使代码更易于理解和维护。无论是传统的单例模式、透明的单例模式、通用的惰性单例模式还是代理实现的单例模式，都有其适用的场景和优势。

根据具体需求，选择适当的实现方式来提高代码的可维护性和可读性。在实际应用中，惰性单例模式非常有用，可以确保对象在需要时才被创建，避免不必要的资源浪费。代理模式可以用来实现更灵活的单例管理方式，引入代理类来管理单例对象的创建和访问，增加了代码的可扩展性和灵活性。