js设计模式中单例模式的简要说明
作者：石头山_S
一. 认识单例模式
单例模式的意思是，保证一个类只有一个实例，并且有一个接口供全局访问。它的作用就是防止频繁创建实例，浪费不必要的内存空间和资源消耗，那它有什么实用场景呢，假如我们在页面中有一个点击跳出一个弹窗操作，弹窗应该是唯一的，无论点击多少次它都应该被构建一次，那么这个弹窗就适合用单例模式来创建。
二. 单例模式的分类
- 简单实现单例模式
- 透明实现单例模式
- 代理实现单例模式
- js单例模式
- 惰性单例模式
- 通用惰性单例模式（主要用于 js）
注： 前三种单例模式为用类实现的思想，通过 new 的方式来创建实例，而 javascript 是没有类的，可以直接创建实例，因此并不适用，主要用于后边三种。
三. 具体实现和思想学习
1. 简单实现单例模式
let Singleton = function ( name ) {
this.name = name;
}
Singleton.instance = null;
Singleton.prototype.getName = function () {
console.log( this.name )
}
Singleton.getInstance = function ( name ) {
if( !this.instance ) {
this.instance = new Singleton( name );
}
return this.instance;
}
let a = Singleton.getInstance('sk');
let b = Singleton.getInstance('ss');
console.log(a);
console.log(a === b) // true实现思想：将第一次创建的实例进行保存，之后再次创建前判断是否已经创建，如果之前创建过则返回已经保存的实例，否则创建一个实例，将实例创建和判断封装到了一个 getInstance 函数中，这种方式相对简单，但增加了类的“不透明性”，用一个函数来获取一个实例，而不是以往通过 new 来创建。
2. 透明单例模式
let CreateDiv = function () {
let instance ;
let CreateDiv = function ( html ) {
if( instance ) {
return instance;
}
this.html = html;
this.init();
return instance = this;
}
CreateDiv.prototype.init = function () {
let element = document.createElement('div');
element.innerHTML = this.html;
document.body.appendChild(element);
}
return CreateDiv;
}();
let a = new CreateDiv('石头山');
let b = new CreateDiv('哈哈');
console.log(a === b); // true 实现思想：该方式与前一实现不同的在于用 new 来创建实例，运用了闭包来保存实例标识，从而达到只能创建唯一实例，但是如果有一天想创建多个 div 实例，该代码就不实用了，必须修改代码，因此扩展除了代理实现。
3. 代理实现单例模式
let CreateDiv = function ( html ) {
this.html = html;
this.init();
}
CreateDiv.prototype.init = function () {
let div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild(div);
}
let ProxySingletonCreateDiv = function () {
let instance ;
return function ( html ) {
if( !instance ) {
instance = new CreateDiv( html );
}
return instance;
}
}();
let a = new ProxySingletonCreateDiv('sven1');
let b = new ProxySingletonCreateDiv('sven2');
console.log(a === b); // true实现思想：CreateDiv 为一个普通类，将创建和判断唯一实例封装在了代理函数中，增加了代码复用性，弥补了透明单例的不足，需要单例则直接 new ProxySingletonCreateDiv（），需要普通实例则直接 new CreateDiv（），但是该方式代码可读性差，也不采用。
4. js的单例模式
① 使用命名空间来创建：将所有变量和方法直接放在一个全局对象中
let S = {
name: '石头山',
getName() {
console.log(this.name);
}
}② 使用闭包封装私有变量：将变量封装在闭包内部，只向全局暴露一个访问接口
let name = "石头山";
return {
getName() {
return name;
}
}
}5. 通用惰性单例
// 写一个通用的获取单例的函数 , fn 为执行单次的函数
let getSingle = function ( fn ) {
let result;
return function () {
return result || ( result = fn.apply(this, arguments))
}
}
// 绑定事件
let bindEvent = function () {
document.getElementById('div').addEventListener('click',()=>{
console.log('我出现了')
});
}();
// 无论渲染多少次，事件只绑定一次
let render = function () {
console.log('开始渲染！');
getSingle(bindEvent)
}
render();
render();
render();该方式是 js 中常用的单例实现方法，再页面重复渲染三次时，监听事件只绑定了一次，减少了开销。
惰性体现：惰性体现在实例实在需要时创建，并不会在页面加载好就创建。
实现思想：首先利用闭包和高阶函数封装了一个返回单一实例的函数，其参数就是一个只执行一次的函数，可以随时改变单例的作用，大大增加了代码的可复用性。
四. 总结
单例模式是一种简单但非常使用的开发模式，js 开发中，通用惰性单例实现方式最常用的一中方式，它将创建对象和管理单例的职责封装在两个不同的方法中，组合在一起就具有了单例模式的威力。
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!