前端仔学学设计模式--单例模式

简介: 设计模式知识提取将分为N篇文章,本篇文章是个开篇文,后期会进行其他相关的同步(会就分享,不会就折腾),旨在提升技能,更好地享受敲键盘的快感~

设计模式知识提取将分为N篇文章,本篇文章是个开篇文,后期会进行其他相关的同步(会就分享,不会就折腾),旨在提升技能,更好地享受敲键盘的快感~


定义


单例模式保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就保证了一个类只有一个实例对象。


使用场景:一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。


比如下面的代码:


class CreateUser {
    constructor(name) {
        this.name = name;
        this.getName();
    }
    getName() {
        return this.name;
    }
}
// 代理实现单例模式
var proxyMode = (function() {
    var instance = null;
    return function(name) {
        if(!instance) {
            instance = new CreateUser(name);
        }
        return instance;
    }
})();
// 测试单例模式
var a = proxyMode('aaa');
var b = proxyMode('bbb');
// 因为单例模式是只实例化一次,所以下面的实例是相等的
console.log(a === b); // true
// 打印下a,b连个对象的名字,其实是一个对象的名字
console.log(a.name); // aaa
console.log(b.name); // aaa


上面是讲了一些单例模式的原理,下面我们来用这个模式实现下弹窗功能。


实现一个弹窗


直接show you the code


<button id="btn1">
    点我创建新窗口
</button>
<button id="hide">
    点我隐藏
</button>


.common-box {
    background: rgb(233, 90, 90);
    width: 100px;
    height: 100px;
    overflow: hidden;
}


const btn1 = document.querySelector('#btn1');
const createWindow = (() => {
    let div = null;
    return (words) => {
        if (!div) {
            div = document.createElement('div');
            div.innerHTML = words || '我是默认的语句';
            div.className = 'common-box';
            div.style.display = 'none';
            document.body.appendChild(div);
        }
        return div;
    }
})();   
btn1.addEventListener('click', ()=>{
    let box = createWindow('content');
    box.style.display = 'block';
}, false);
//隐藏
document.querySelector('#hide').addEventListener('click', ()=>{
    document.querySelector('.common-box').style.display = 'none';
}, false);


效果如下:


image.png


相关文章
|
20天前
|
设计模式 缓存 安全
Java设计模式的单例模式应用场景
Java设计模式的单例模式应用场景
25 4
|
1月前
|
设计模式 SQL 安全
【设计模式】第二篇:单例模式的几种实现And反射对其的破坏
一个普通实例化,一个反射实例化 但是我们如果通过反射的方式进行实例化类,会有什么问题呢? public static void main(String[] args) throws Exception { Lazy1 lazy1 = getLazy1();
22 5
|
5天前
|
设计模式 安全 C++
C++一分钟之-C++中的设计模式:单例模式
【7月更文挑战第13天】单例模式确保类只有一个实例,提供全局访问。C++中的实现涉及线程安全和生命周期管理。基础实现使用静态成员,但在多线程环境下可能导致多个实例。为解决此问题,采用双重检查锁定和`std::mutex`保证安全。使用`std::unique_ptr`管理生命周期,防止析构异常和内存泄漏。理解和正确应用单例模式能提升软件的效率与可维护性。
12 2
|
8天前
|
设计模式 安全 Java
Java面试题:设计模式如单例模式、工厂模式、观察者模式等在多线程环境下线程安全问题,Java内存模型定义了线程如何与内存交互,包括原子性、可见性、有序性,并发框架提供了更高层次的并发任务处理能力
Java面试题:设计模式如单例模式、工厂模式、观察者模式等在多线程环境下线程安全问题,Java内存模型定义了线程如何与内存交互,包括原子性、可见性、有序性,并发框架提供了更高层次的并发任务处理能力
24 1
|
13天前
|
设计模式 安全 Java
技术成神之路:设计模式(一)单例模式
【7月更文挑战第3天】技术成神之路:设计模式(一)单例模式
18 1
|
17天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 单例模式
js设计模式【详解】—— 单例模式
8 1
|
25天前
|
设计模式 安全 Java
Java中的单例模式是一种设计模式,它保证一个类只有一个实例,并提供一个全局访问点
Java单例模式确保类仅有一个实例,并提供全局访问点。常见实现包括: - 饿汉式:静态初始化,线程安全。 - 懒汉式:延迟初始化,需同步保证线程安全。 - 双重检查锁定:优化懒汉式,减少同步开销。 - 静态内部类:延迟加载,线程安全。 - 枚举:简洁线程安全,不适用于复杂构造。 - 容器实现:如Spring框架,用于依赖注入。选择依据需求,如延迟加载、线程安全和扩展性。
41 10
|
25天前
|
设计模式 缓存 安全
Java设计模式的单例模式应用场景
Java设计模式的单例模式应用场景
22 8
|
22天前
|
设计模式 SQL 安全
Java设计模式:单例模式之六种实现方式详解(二)
Java设计模式:单例模式之六种实现方式详解(二)
|
25天前
|
设计模式 缓存 安全
java中的设计模式&单例模式
java中的设计模式&单例模式
12 1