js设计模式之单例模式

简介: js设计模式之单例模式1、定义保证一个类仅生成一个实例,并可以全局访问。2、应用范围单列模式应用非常广泛,有些场景下某些对象只需要一个,比如浏览器中的window对象,全局缓存对象等。在实际开发过程中应用也比较多,比如点击一个按钮产生一个登陆框,无论点击多少次都应该只在第一次产生这个登录框,而在后面点击N次也只能是复用这个登陆框,而非重新创建,这样的场景就可以使用单列模式来创建这个登陆框。

js设计模式之单例模式
1、定义
保证一个类仅生成一个实例,并可以全局访问。

2、应用范围
单列模式应用非常广泛,有些场景下某些对象只需要一个,比如浏览器中的window对象,全局缓存对象等。在实际开发过程中应用也比较多,比如点击一个按钮产生一个登陆框,无论点击多少次都应该只在第一次产生这个登录框,而在后面点击N次也只能是复用这个登陆框,而非重新创建,这样的场景就可以使用单列模式来创建这个登陆框。

3、实现一个简单的单例模式
//简单版单列模式
const Singleton = function (name) {

this.name = name
//这个instance来保存生成的实例
this.instance = null

}
Singleton.prototype.getName = function () {

return this.name

}

//静态方法
Singleton.getInstance = function (name) {

if (!this.instance){
    this.instance = new Singleton(name)
}
return this.instance

}

const A = Singleton.getInstance('A')
const B = Singleton.getInstance('B')
console.log(A === B); //true
console.log(A.getName()); //A
console.log(B.getName()); //A
要实现起来并不复杂,无非就是使用一个私有变量去保存已生成的实例,在下新建时判断是否存在这个实例,若存在直接返回,而不创建就OK了。

4、透明版
透明板也就要用new Constructor的形式创建对象,使用单例的类就像使用普通的类一样。
下面我们使用闭包的形式来写一个单列类,并使用闭包的局部变量来保存已生成的实例。

//透明板单列模式

const Singleton = (function () {

let instance = null
//实现一个简单的类
function createDiv(html){
    if (instance){
        return instance
    }
    this.html = html

    return instance = this
}
createDiv.prototype.init = function () {
    let div = document.createElement('div')
    div.innerHTML = this.html
    document.body.append(div)
}

return createDiv

})()
const A = new Singleton('A')
const B = new Singleton('B')
console.log(A === B); //true
5、代理版
代理版本要实现的目标是将定义类的代码和管理单例的代码分开,实现更小粒度的划分,遵循单一职责原则

const Singleton = function (name){

this.name = name

}
const proxySingleton = (function () {

let instance = null
return function (name) {
    if (!instance){
        instance = new Singleton(name)
    }
    return instance
}

})()
6、惰性单例
前面写的例子都是基于'类'的单例模式,其目的在与创建一个唯一的由'类'生成的对象(这里的'类'指的是伪类,也就是我们把javascript中的构造函数当做其他传统语言中的类来进行理解,而其实javascript中是不存在类的的概念,所有对象都是构造函数基于原型克隆出来的,快扯到面向对象去了,这里就不多说了)
理解惰性单例有如下两点
1、而现在要理解的 "惰性单例"的概念,我们的思想不再局限于去实现一个全局唯一的由伪类生成的对象,我们维持的唯一单例可能是一个div,可能是一个列表,也自然可能是一个对象。
2、另外要理解的是 '惰性'二字,也即 我们维持的单例在不需要的情况下是不会产生的,只有在需要的情况才会生成,其实这一点在第二节简单的单例模式里面就已经实现了,只有调用Singleton.getInstance才会生成,并且生成后会一直存在,等待复用
一个例子:
比如我们需要一个登陆框,而在页面上点击登陆就会弹出这个登陆框,无论多次点击生成的都应该是同一个DOM节点,而这个DOM节点只在第一次调用生成,后面点击登陆只会复用这个DOM节点。这里我们维持的唯一单例应该是登陆框的DOM节点,并且是惰性生成的,即永不点击登录,就永远不会生成该DOM节点。
下面给出惰性单例的通用代码

//惰性单例通用代码
const getSingle = function (fn){

let instance = null;
return function (){
    return instance || (instance = fn.call(this, arguments))
}

}
要实现上面维持登录框单例的例子, 这里说一下思路, fn的功能是产生登录框,并返回登录框的DOM,代码如下

const createLoginLayer = function(){

let div = document.createElement( 'div' );
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild( div );
return div;

};
let createSingleLoginLayer = getSingle( createLoginLayer );
document.getElementById( 'loginBtn' ).onclick = function(){

let loginLayer = createSingleLoginLayer();
loginLayer.style.display = 'block';

};
7、小结
单例模式在开发过程中应用很广泛,特别是惰性单例,所以也是我们必须要掌握的点。然后要再啰嗦几句的就是关于,单一职责原则,开放封闭原则,最少知识原则等等面向对象的概念,无论是上面提到的还是没提到的,我们都需要有一定的了解,熟悉这些原则并应用于实际对于代码质量的提升肯定是巨大的。
原文地址https://www.cnblogs.com/chenlei987/p/11356439.html

相关文章
|
19小时前
|
设计模式 JavaScript 前端开发
js设计模式-观察者模式与发布/订阅模式
观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。
|
19小时前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
13天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
14天前
|
设计模式 安全 Java
【设计模式学习】单例模式和工厂模式
【设计模式学习】单例模式和工厂模式
|
14天前
|
设计模式 安全 Java
|
16天前
|
设计模式 存储 安全
Java 设计模式:深入单例模式的理解与应用
【4月更文挑战第27天】单例模式是一种常用的设计模式,在 Java 开发中扮演着重要角色。此模式的主要目的是保证一个类只有一个实例,并提供一个全局访问点。
20 0
|
16天前
|
设计模式 安全 Java
【JAVA】Java 中什么叫单例设计模式?请用 Java 写出线程安全的单例模式
【JAVA】Java 中什么叫单例设计模式?请用 Java 写出线程安全的单例模式
|
19天前
|
设计模式 安全 Java
[设计模式Java实现附plantuml源码~创建型] 确保对象的唯一性~单例模式
[设计模式Java实现附plantuml源码~创建型] 确保对象的唯一性~单例模式
|
19天前
|
设计模式 安全 测试技术
[设计模式 Go实现] 创建型~单例模式
[设计模式 Go实现] 创建型~单例模式
|
23天前
|
设计模式 安全 Java
【设计模式系列笔记】单例模式
单例模式是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点,以便全局范围内访问这个实例。单例模式的目标是限制一个类的实例化,确保在整个应用程序中只有一个实例存在,并提供对这个唯一实例的全局访问点。这对于控制对资源的访问、限制特定类的实例数量等场景非常有用。
122 5