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

2023-11-09 Javascript

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

传统的单例模式

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

class Singleton {
  constructor(name) {
    this.name = name;
  }

  static instance = null;

  static getInstance(name) {
    if (!this.instance) {
      this.instance = new Singleton(name);
    }
    return this.instance;
  }
}

class Singleton {
  constructor(name) {
    this.name = name;
  }

  static instance = null;

  static getInstance(name) {
    if (!this.instance) {
      this.instance = new Singleton(name);
    }
    return this.instance;
  }
}

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

透明的单例模式

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

class CreateDiv {
  constructor(html) {
    this.html = html;
    this.init();
  }

  init() {
    const div = document.createElement('div');
    div.innerHTML = this.html;
    div.style.display = 'none';
    document.body.appendChild(div);
  }
}

const createSingleLoginLayer = (function() {
  let instance = null;
  
  return function(html) {
    if (!instance) {
      instance = new CreateDiv(html);
    }
    return instance;
  };
})();

class CreateDiv {
  constructor(html) {
    this.html = html;
    this.init();
  }

  init() {
    const div = document.createElement('div');
    div.innerHTML = this.html;
    div.style.display = 'none';
    document.body.appendChild(div);
  }
}

const createSingleLoginLayer = (function() {
  let instance = null;
  
  return function(html) {
    if (!instance) {
      instance = new CreateDiv(html);
    }
    return instance;
  };
})();

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

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

通用的惰性单例

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

const getSingle = function(fn) {
  let instance = null;
  
  return function(...args) {
    if (!instance) {
      instance = fn.apply(this, args);
    }
    return instance;
  };
};

const getSingle = function(fn) {
  let instance = null;
  
  return function(...args) {
    if (!instance) {
      instance = fn.apply(this, args);
    }
    return instance;
  };
};

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

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

const createSingleLoginLayer = getSingle(function(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
});

const createSingleIframe = getSingle(function() {
  const iframe = document.createElement('iframe');
  document.body.appendChild(iframe);
  return iframe;
});

const createSingleLoginLayer = getSingle(function(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
});

const createSingleIframe = getSingle(function() {
  const iframe = document.createElement('iframe');
  document.body.appendChild(iframe);
  return iframe;
});

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

惰性单例与实际应用

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

登录浮窗

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

const createSingleLoginLayer = getSingle(function(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
});

document.getElementById('loginBtn').onclick = function() {
  const loginLayer = createSingleLoginLayer('我是登录浮窗');
  loginLayer.style.display = 'block';
};

const createSingleLoginLayer = getSingle(function(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
});

document.getElementById('loginBtn').onclick = function() {
  const loginLayer = createSingleLoginLayer('我是登录浮窗');
  loginLayer.style.display = 'block';
};

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

全局缓存

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

const createSingleCache = getSingle(function() {
  const cache = {};
  return {
    set(key, value) {
      cache[key] = value;
    },
    get(key) {
      return cache[key];
    },
  };
});

const globalCache = createSingleCache();

// 在不同模块中使用全局缓存
globalCache.set('user', { name: 'John' });
const user = globalCache.get('user');

const createSingleCache = getSingle(function() {
  const cache = {};
  return {
    set(key, value) {
      cache[key] = value;
    },
    get(key) {
      return cache[key];
    },
  };
});

const globalCache = createSingleCache();

// 在不同模块中使用全局缓存
globalCache.set('user', { name: 'John' });
const user = globalCache.get('user');

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

代理实现单例

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

class CreateDiv {
  constructor(html) {
    this.html = html;
    this.init();
  }

  init() {
    const div = document.createElement('div');
    div.innerHTML = this.html;
    div.style.display = 'none';
   

 document.body.appendChild(div);
  }
}

class ProxyCreateDiv {
  constructor(html) {
    this.createDiv = new CreateDiv(html);
  }

  display() {
    this.createDiv.style.display = 'block';
  }
}

const createSingleLoginLayer = (function() {
  let instance = null;
  
  return function(html) {
    if (!instance) {
      instance = new ProxyCreateDiv(html);
    }
    return instance;
  };
})();

document.getElementById('loginBtn').onclick = function() {
  const loginLayer = createSingleLoginLayer('我是登录浮窗');
  loginLayer.display();
};

class CreateDiv {
  constructor(html) {
    this.html = html;
    this.init();
  }

  init() {
    const div = document.createElement('div');
    div.innerHTML = this.html;
    div.style.display = 'none';
   

 document.body.appendChild(div);
  }
}

class ProxyCreateDiv {
  constructor(html) {
    this.createDiv = new CreateDiv(html);
  }

  display() {
    this.createDiv.style.display = 'block';
  }
}

const createSingleLoginLayer = (function() {
  let instance = null;
  
  return function(html) {
    if (!instance) {
      instance = new ProxyCreateDiv(html);
    }
    return instance;
  };
})();

document.getElementById('loginBtn').onclick = function() {
  const loginLayer = createSingleLoginLayer('我是登录浮窗');
  loginLayer.display();
};

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

总结

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

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

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# 设计模式
···