JavaScript设计模式之单例模式

什么是单例模式?

  • 系统中被唯一使用
  • 一个类只有一个实例

上面是单例模式的一个特点,看起来比较抽象,我们可以结合日常开发中的实例来理解,比如:

  • 登录框
  • 购物车

不难理解,一个大型的项目或者商城系统,不管系统多大,都只能有一个登录框,一个购物车,如果不使用单例模式,让其有多个登录框和购物车,那么将导致系统的bug。

单例模式的UML类图和代码

同样的,在学习或者研究一种设计模式的时候,我们首先要画出其UML类图,网上的关于单例模式的UML类图也是有很多,但大多数也是基于Java的,相对于java,JS作为弱类型语言,有一些概念是没有的或者没法实现的。



可以看到哈,上面的UML类图中,强依赖于“-”也就是‘private’,而JS中是没有这样的关键字的,这里我们要是强理解Java代码可能会比较费劲,但是我们可以通过JS的闭包来模拟出这一操作。

class SingleObject {
    login() {
        console.log('login...')
    }
}
// 为SingleObject赋一个静态的方法,这样在实例化的时候,不能让所有实例都访问到。模拟一个“private”私有属性

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

let obj1 = SingleObject.getInstance()
obj1.login()
let obj2 = SingleObject.getInstance()
obj2.login()

console.log(obj1 === obj2)

如果我们的代码是单例模式的,那么每次执行出来的结果,得到的实例应该是一模一样的,在JS中应该使用“===”来验证,反之,则不行。上面代码的运行结果为


可见,我们通过JS,模拟除了UML类图中的单例模式。因为JS语言的弱类型,我们无法像java一样去私有化一个构造函数,所以,这里如果你使用new SingleObject来做实例化,也是可以,只不过就不是单例模式了,我么你这里的代码,只是通过JS来做一个模拟,让大家知道单例模式是什么,在前端开发中的应用场景有哪些即可。太细节的东西,大家就不要纠结了。

单例模式在前端开发中的应用场景

  1. jQuery只有一个$

我们知道,不管你在网页中引入多少遍Jquery,最终都只有一个$,这就是一个单例模式,同样,我们在日常的开发或者学习中,也可以去使用单例模式,来避免一些重复的操作。

  1. 登录框
  2. 系统中的购物车
  3. vuex和redux中的store

设计原则验证

  • 符合单一职责原则,只实例化唯一的对象
  • 没法具体开放封闭原则,但是也不违反开放封闭原则

写在后面

受限于JS的语言特点,我们无法完全准确的写出单例模式,只能做一个简单的模拟,实际开发中,我们记住这种模式即可

(本节完...)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 介绍 系统中被唯一使用 一个类只有一个实例 实例 购物车 登录框 UML类图 外部无法直接new出SingleOb...
    w候人兮猗阅读 2,865评论 0 1
  • 单例模式:限制类实例化次数只能一次,一个类只有一个实例,并提供一个访问它的全局访问点。 单例模式是创建型设计模式的...
    以乐之名阅读 3,564评论 0 2
  • 单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象我们...
    peppermint_egg阅读 1,765评论 0 0
  • 单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象我们...
    yufawu阅读 3,783评论 0 7
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 12,238评论 16 22

友情链接更多精彩内容