乐趣区

JavaScript设计模式一单例模式

停更许久,近期计划更新:设计模式系列。

单例模式:限制类实例化次数只能一次,一个类只有一个实例,并提供全局访问点。(归属创建型设计模式)

模式特点

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

实现方式

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

代码实现

class Singleton {constructor(name) {this.name = name;}
  getName() {return this.name;}
}
Singleton.getInstance = (function () {
  let instance;
  return function (name) {if (!instance) {instance = new Singleton(name);
    }
    return instance;
  }
})();

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

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

代码中定义了一个 Singleton 类,并定义 Singleton.getInstance() 方法来生成实例对象。而不是通过 new 操作符来创建类实例。

Singleton.getInstance() 中,通过闭包引用存储类实例的对象,判断类是否实例化过。(这里闭包的使用能够使 getInstance() 多次调用都能获取到之前类实例的存储值)。因此无论执行多少次 Singleton.getInstance() 方法,都只会返回同一个 Singleton 类实例对象。

使用场景

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

  1. 引用第三方库
  2. 弹窗登录框
  3. 购物车
  4. 全局态管理 store (Vuex / Redux)

项目中引入第三方库时,重复加载库文件,全局只会实例化一个库对象,如 jQuerylodashmoment …, 其实它们的实现方式也是单例模式应用的一种:

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

单例设计模式实现全局弹窗登录框:

class LoginModal {constructor() {const div = document.createElement('div');
        div.innerHTML = '登录框 HTML 内容';
        div.style.display = 'none';
        this.el = div;
        this.visible = false;
        document.body.append(div);
        return div;
    }
    show() {this.el.style.display = 'block';}
    hide() {this.el.style.display = 'none';}
    toggle() {
        this.visible = !this.visible;
        this.visible ? this.show() : this.hide();
    }
}

LoginModal.getInstance = (function() {
    let instance;
    return function() {if (!instance) {instance = new LoginModal();
        }
        return instance;
    }
})();

// 按钮切换显示登录框
document.getElementById('btn-login').addEventListener('click', function(){LoginModal.getInstance().toggle();})

优缺点

  • 优点:适用单一对象,只生成一个对象实例,减少内存开销,避免频繁创建和销毁实例。
  • 缺点:不适用动态扩展对象,如通过对象继承扩展新对象。

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


参考文章

  • 《JavaScript 设计模式》
  • 《JavaScript 设计模式系统讲解与应用》

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

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

退出移动版