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

简介: 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的实例中都会只有一个。

目录
相关文章
|
4天前
|
Java Android开发
Android12 双击power键启动相机源码解析
Android12 双击power键启动相机源码解析
13 0
|
11天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
2天前
|
安全 Linux 开发者
CentOS 7安装全解析:适合初学者的指导
CentOS 7安装全解析:适合初学者的指导
|
4天前
|
分布式计算 Java API
Java8 Lambda实现源码解析
Java8的lambda应该大家都比较熟悉了,本文主要从源码层面探讨一下lambda的设计和实现。
|
4天前
|
SQL 缓存 JavaScript
深入解析JavaScript中的模板字符串
深入解析JavaScript中的模板字符串
13 1
|
5天前
|
算法 Java Go
ArrayList源码解析
ArrayList源码解析
10 1
|
5天前
|
存储 安全 Java
【HashMap源码解析(一)(佬你不来看看?)】
【HashMap源码解析(一)(佬你不来看看?)】
11 1
|
11天前
|
JavaScript 网络协议 数据处理
Node.js中的Buffer与Stream:深入解析与使用
【4月更文挑战第30天】本文深入解析了Node.js中的Buffer和Stream。Buffer是处理原始数据的全局对象,适用于TCP流和文件I/O,其大小在V8堆外分配。创建Buffer可通过`alloc`和`from`方法,它提供了读写、切片和转换等操作。Stream是处理流式数据的抽象接口,分为可读、可写、双工和转换四种类型,常用于处理大量数据而无需一次性加载到内存。通过监听事件和调用方法,如读取文件的可读流示例,可以实现高效的数据处理。理解和掌握Buffer及Stream能提升Node.js应用的性能。
|
11天前
|
JavaScript 前端开发 开发者
Node.js的包管理和npm工具深度解析
【4月更文挑战第30天】本文深入解析Node.js的包管理和npm工具。包管理促进代码复用和社区协作,包包含元数据描述文件`package.json`和入口文件。npm提供搜索、安装、发布等功能,通过命令行进行操作,如`install`、`search`、`uninstall`。npm支持版本控制、全局安装、脚本定义及私有仓库。理解和熟练运用npm能提升Node.js开发效率。
|
12天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握

推荐镜像

更多