资讯专栏INFORMATION COLUMN

JavaScript 设计模式(一):单例模式

xialong / 1800人阅读

摘要:停更许久,近期计划更新设计模式系列。单例模式是创建型设计模式的一种。虽然它不是正规的单例模式,但不可否认确实具备类单例模式的特点。适用场景单例模式的特点,意图解决维护一个全局实例对象。

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

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

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

模式特点

类只有一个实例

全局可访问该实例

自行实例化(主动实例化)

可推迟初始化,即延迟执行(与静态类/对象的区别)

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

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

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

命名空间污染(变量名冲突)

维护时不方便管控(容易不小心覆盖)

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

使用命名空间

闭包封装私有变量(利用函数作用域)

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 类实例对象。

存在问题:

不够“透明”,无法使用 new 来进行类实例化,需约束该类实例化的调用方式: Singleton.getInstance(...);

管理单例的操作,与对象创建的操作,功能代码耦合在一起,不符合 “单一职责原则”

“透明版” 单例模式:

实现 “透明版” 单例模式,意图解决:统一使用 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(...) 生成对应实例对象的方法。

适用场景

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

引用第三方库(多次引用只会使用一个库引用,如 jQuery)

弹窗(登录框,信息提升框)

购物车 (一个用户只有一个购物车)

全局态管理 store (Vuex / Redux)

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

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

优点:适用于单一对象,只生成一个对象实例,避免频繁创建和销毁实例,减少内存占用。

缺点:不适用动态扩展对象,或需创建多个相似对象的场景。

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

参考文章

《JavaScript 设计模式》

《JavaScript 设计模式与开发实践》

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104863.html

相关文章

  • JavaScript设计模式单例模式

    摘要:此时我们创建的对象内保存静态变量通过取值器访问,最后将这个对象作为一个单例放在全局空间里面作为静态变量单例对象供他人使用。 单例模式 又被称为单体模式,是只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间,井井有条的管理对象上面的属性和方法。 传统的面向对象语言中单例模式的实现,均是单例对象从类中创建而来,在以类为中心的语言中,这是很常见的做法。如果需要某个对象,就必须先...

    zhaot 评论0 收藏0
  • JavaScript设计模式与开发实践 | 04 - 单例模式

    摘要:观察构造函数的代码,该构造函数实际上负责了两件事情第一是创建对象和执行初始化方法,第二是保证只有一个对象。惰性单例在实际开发中非常有用,是单例模式的重点。 单例模式 单例模式的定义是: 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器的window对象等。例如,当我们点击登录按钮时,页面会弹出一...

    awkj 评论0 收藏0
  • 再遇设计模式JavaScript

    摘要:在面向对象的语言中,比如,等,单例模式通常是定义类时将构造函数设为,保证对象不能在外部被出来,同时给类定义一个静态的方法,用来获取或者创建这个唯一的实例。 万事开头难,作为正经历菜鸟赛季的前端player,已经忘记第一次告诉自己要写一些东西出来是多久以的事情了。。。如果,你也和我一样,那就像我一样,从现在开始,从看到这篇文章开始,打开电脑,敲下你的第一篇文章(或者任何形式的文字)吧。 ...

    Clect 评论0 收藏0
  • JavaScript设计模式-第部分:单例模式、组合模式和外观模式

    摘要:但是,这并不是采用单例的唯一原因。使用命名空间单例模式也被称为模块设计模式。函数内部声明了一些局部函数和或变量。紧随函数声明放置即可立即执行外部函数,并将所得的对象文字费赔给变量。 JavaScript设计模式-第一部分:单例模式、组合模式和外观模式 设计模式是一些可靠的编程方式,有助于保证代码更加易于维护、扩展及分离,所有设计模式在创建大型JavaScript应用程序时均不可或缺 单...

    betacat 评论0 收藏0
  • JavaScript设计模式学习—单例模式

    摘要:什么是单例模式简单点来说,单例模式就是确保某个类只有一个实例,并且最好只被创建过一次。对计算机来说,像打印机,线程池都是经典的单例模式。 什么是单例模式 简单点来说,单例模式就是确保某个类只有一个实例,并且最好只被创建过一次。对计算机来说,像打印机,线程池都是经典的单例模式。对于JavaScript所处的前端环境来说,像登录悬浮框,在整个页面中只会有一个,无论用户点击多少次,只会被创建...

    TerryCai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<