JavaScript之单例模式(内附vuex安装源码解析)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: JavaScript之单例模式(内附vuex安装源码解析)

其实单例模式很简单,它指的就是保证一个类无论你实例化几个,它都指向同一个实例。

而在我们身边也见过许多类似的场景:如,redux,vuex等。


单例模式: 保证一个类仅有一个实例。


实现思路:先判断是否创建过,如果创建过直接返回。否则就创建新的即可。

1. 如何使用单例模式:

class SingleDog {
    show (){
        console.log("一个单例对象")    
    }
    static getInstance () {
        // 判断是否已经存在实例
        if(!SingleDog.instance) {
            // 若这个唯一的实例不存在,则创建
            SingleDog.instance = new SingleDog()        
        }
        // 如果这个唯一的实例已经存在,则直接返回
        return SingleDog.instance
    }
}
    const storage1 = SingleDog.getInstance()
    const storage2 = SingleDog.getInstance()

在上述代码中,我们创建了一个class 类 SingleDog。它里面我们声明了一个静态方法。


这个静态方法就是来判断这个SingleDog是否已经被实例化的方法。


如果已经被实例化,那么它将直接返回这个实例。


如果不存在,那么它会实例化一个新的SingleDog类并且返回它。


并且最后我们实例化的两个 storage1 与 storage2 它两相等一定是为 true的。


除过以上的clss实现之外。我们还可以使用闭包的方式来进行实现 单例模式。

SingleDog.getInstance = (function () {
    // 定义自由变量instance 
    let instance = null
    return function (){
        // 判断是否有值
        if(!instance){
            // 创建
            instance = new SingleDog()
        }   
        return instance 
    } 
})()

在实战中我们如何使用单例模式呢?

比如:实现一个全局唯一的弹窗。

const modal  = (function (){
    let modal = null
    return function () {
        if(!modal){
            modal.document.createElement('div')
            modal.innerHTML = '我是一个全局弹框'
            modal.id = 'modal'
            modal.style.display = 'none'
            document.body.appendChild(modal)                                    
        }    
    }
})()
// 打开方法
const modal = new Modal()
modal.style.display = 'block'
// 关闭方法
const modal = new Modal()
modal.style.display = 'none'

这样我们就成功的使用单例模式创建了一个全局的弹窗。不管是打开方法还是关闭方法他们都指向了同一个弹窗。


说到这里了,就给大家扒一下vue的源码吧。看看vuex 在vue的单例模式是如何实现的。


在vue中,一个vue实例只能对应一个Store。


我们熟知的vue中,安装vuex 使用的是


Vue.use(Vuex)


那你知道它是如何在vue中运行的吗?


答案是vuex内部实现了一个install 方法,这个方法会在安装的时候被调用,从而把vuex注入到vue实例中去,也就是说每一次的install,都会尝试给vue实例注入一个vuex。


但是同时,install方法做了单例模式的判断。如:


818bb3bb79b64ba688c42262b9353e16.png


它每次都在判断是否存在vue,存在就直接抛出。所以这样的vuex不管怎样在vue的实例中都会只有一个。

目录
相关文章
|
23天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
19天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
96 59
|
5天前
|
设计模式 JavaScript 前端开发
一文理解JavaScript中的单例模式
js 单例模式是一种常用的设计模式,它可以保证一个类只有一个实例。这种模式主要用于管理全局变量,避免命名冲突和重复加载,同时也可以减少内存占用,提高代码的可维护性和可扩展性。
16 1
|
9天前
|
设计模式 安全 Java
Java编程中的单例模式深入解析
【10月更文挑战第31天】在编程世界中,设计模式就像是建筑中的蓝图,它们定义了解决常见问题的最佳实践。本文将通过浅显易懂的语言带你深入了解Java中广泛应用的单例模式,并展示如何实现它。
|
15天前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
28天前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
24 4
|
11天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
26 0
|
17天前
|
设计模式 SQL 安全
Java编程中的单例模式深入解析
【10月更文挑战第24天】在软件工程中,单例模式是设计模式的一种,它确保一个类只有一个实例,并提供一个全局访问点。本文将探讨如何在Java中使用单例模式,并分析其优缺点以及适用场景。
10 0
|
27天前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
28 0
|
28天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
79 0

推荐镜像

更多