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！ github.com/ZengLingYon…

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