JavaScript 设计模式（一）：单例模式

停更许久，近期计划更新：设计模式系列。

单例模式：限制类实例化次数只能一次，一个类只有一个实例，并提供一个访问它的全局访问点。

单例模式是创建型设计模式的一种。针对全局仅需一个对象的场景，如线程池、全局缓存、window 对象等。

模式特点

1. 类只有一个实例
2. 全局可访问该实例
3. 自行实例化（主动实例化）
4. 可推迟初始化，即延迟执行（与静态类/对象的区别）

JavaScript 是一门非正规面向对象的语言，并没有类的定义。而单例模式要求一个 “唯一” 和 “全局访问” 的对象，在 JavaScript 中类似全局对象，刚好满足单例模式的两个特点：“唯一” 和 “可全局访问”。虽然它不是正规的单例模式，但不可否认确实具备类单例模式的特点。

// 全局对象
var globaObj = {};

使用全局变量会有以下问题：

1. 命名空间污染（变量名冲突）
2. 维护时不方便管控（容易不小心覆盖）

全局变量问题折中的应对方案：

1. 使用命名空间
2. 闭包封装私有变量（利用函数作用域）
3. ES6的 const/symbol

虽然全局变量可以实现单例，但因其自身的问题，不建议在实际项目中将其作为单例模式的应用，特别是中大型项目的应用中，全局变量的维护该是考虑的成本。

模式实现

实现方式：使用一个变量存储类实例对象（值初始为 null/undefined ）。进行类实例化时，判断类实例对象是否存在，存在则返回该实例，不存在则创建类实例后返回。多次调用类生成实例方法，返回同一个实例对象。

“简单版” 单例模式：

let Singleton = function(name) {
    this.name = name;
    this.instance = null;
}

Singleton.prototype.getName = function() {
    console.log(this.name);
}

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

let Winner = Singleton.getInstance('Winner');
let Looser = Singleton.getInstance('Looser');

console.log(Winner === Looser); // true
console.log(Winner.getName());  // 'Winner'
console.log(Looser.getName());  // 'Winner'

代码中定义了一个 Singleton 函数，函数在 JavaScript 中是“一等公民“，可以为其定义属性方法。因此我们可以在函数 Singleton 中定义一个 getInstance() 方法来管控单例，并创建返回类实例对象，而不是通过传统的 new 操作符来创建类实例对象。

this.instance 存储创建的实例对象，每次接收到创建实例对象时，判断 this.instance 是否有实例对象，有则返回，没有则创建并更新 this.instance 值，因此无论调用多少次 getInstance()，最终都只会返回同一个 Singleton 类实例对象。

存在问题：

1. 不够“透明”，无法使用 new 来进行类实例化，需约束该类实例化的调用方式： Singleton.getInstance(...);
2. 管理单例的操作，与对象创建的操作，功能代码耦合在一起，不符合 “单一职责原则”

“透明版” 单例模式：

实现 “透明版” 单例模式，意图解决：统一使用 new 操作符来获取单例对象， 而不是 Singleton.getInstance(...)。

let CreateSingleton = (function(){
    let instance;
    return function(name) {
        if (instance) {
            return instance;
        }
        this.name = name;
        return instance = this;
    }
})();
CreateSingleton.prototype.getName = function() {
    console.log(this.name);
}

let Winner = new CreateSingleton('Winner');
let Looser = new CreateSingleton('Looser');

console.log(Winner === Looser); // true
console.log(Winner.getName());  // 'Winner'
console.log(Looser.getName());  // 'Winner'

“透明版”单例模式解决了不够“透明”的问题，我们又可以使用 new 操作符来创建实例对象。

“代理版“ 单例模式：

通过“代理”的形式，意图解决：将管理单例操作，与对象创建操作进行拆分，实现更小的粒度划分，符合“单一职责原则”

let ProxyCreateSingleton = (function(){
    let instance;
    return function(name) {
        // 代理函数仅作管控单例
        if (instance) {
            return instance;
        }
        return instance = new Singleton(name);
    }
})();

// 独立的Singleton类，处理对象实例
let Singleton = function(name) {
    this.name = name;
}
Singleton.prototype.getName = function() {
    console.log(this.name);
}

let Winner = new PeozyCreateSingleton('Winner');
let Looser = new PeozyCreateSingleton('Looser');

console.log(Winner === Looser); // true
console.log(Winner.getName());  // 'Winner'
console.log(Looser.getName());  // 'Winner'

惰性单例模式

惰性单例，意图解决：需要时才创建类实例对象。对于懒加载的性能优化，想必前端开发者并不陌生。惰性单例也是解决 “按需加载” 的问题。

需求：页面弹窗提示，多次调用，都只有一个弹窗对象，只是展示信息内容不同。

开发这样一个全局弹窗对象，我们可以应用单例模式。为了提升它的性能，我们可以让它在我们需要调用时再去生成实例，创建 DOM 节点。

let getSingleton = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments)); // 确定this上下文并传递参数
    }
}
let createAlertMessage = function(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
}

let createSingleAlertMessage = getSingleton(createAlertMessage);
document.body.addEventListener('click', function(){
    // 多次点击只会产生一个弹窗
    let alertMessage = createSingleAlertMessage('您的知识需要付费充值！');
    alertMessage.style.display = 'block';
})

代码中演示是一个通用的 “惰性单例” 的创建方式，如果还需要 createLoginLayer 登录框, createFrame Frame框, 都可以调用 getSingleton(...) 生成对应实例对象的方法。

适用场景

“单例模式的特点，意图解决：维护一个全局实例对象。”

1. 引用第三方库（多次引用只会使用一个库引用，如 jQuery）
2. 弹窗（登录框，信息提升框）
3. 购物车 (一个用户只有一个购物车)
4. 全局态管理 store (Vuex / Redux)

项目中引入第三方库时，重复多次加载库文件时，全局只会实例化一个库对象，如 jQuery，lodash，moment ..., 其实它们的实现理念也是单例模式应用的一种：

// 引入代码库 libs(库别名）
if (window.libs != null) {
  return window.libs;    // 直接返回
} else {
  window.libs = '...';   // 初始化
}

优缺点

• 优点：适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用。
• 缺点：不适用动态扩展对象，或需创建多个相似对象的场景。

TIPS: 多线程编程语言中，单例模式会涉及同步锁的问题。而 JavaScript 是单线程的编程语言，暂可忽略该问题。

---

参考文章

• 《JavaScript 设计模式》
• 《JavaScript 设计模式与开发实践》
• 《JavaScript 设计模式系统讲解与应用》

本文首发Github，期待Star！
https://github.com/ZengLingYong/blog

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。