设计模式——单例模式（单例模式介绍实战案例及vuex的简单分析）

本文链接：https://blog.csdn.net/qq_32930863/article/details/106205123

有一个实例化的过程（只有一次），产生实例化对象 new提供返回实例对象的方法。

每次实例化都会产生一个新的对象这肯定不是单例模式

class SingleCase{
    log(){
        console.log('我是一个单例对象')
    }
}
const singl1 = new SingleCase()
const singl2 = new SingleCase()
console.log(singl1==singl2) // false

让我们改造下上面的代码

class SingleCase{
    log(){
        console.log('我是一个单例对象')
    }
    static getInstance(){
        if(!SingleCase.instance){
            SingleCase.instance = new SingleCase
        }
        return SingleCase.instance
    }
}
const singl1 = SingleCase.getInstance()
const singl2 = SingleCase.getInstance()
console.log(singl1==singl2) // true

通过闭包+构造方式单例写法

function SingleCaseBase() {

}
SingleCaseBase.prototype.log = function () {
    console.log('我是一个单例对象')
}
SingleCase= (function() {
    let instance = null
    return function () {
        if (!instance) {
            instance = new SingleCaseBase()
        }
        return instance
    }
})()
const singl1 = SingleCase()
const singl2 = SingleCase()
console.log(singl1==singl2) // true

单例模式如何使用呢

实现一个简单的状态管理机

class SingleState {
    // 状态存储机制
    data={}
    // 获取对象
    get(key){
        return this.data[key]||''
    }
    // 存储对象
    set(key,value){
        return  this.data[key]=value
    }
    // 外部调用此函数实例化
    static getInstance() {
        if (!SingleState.instance) {
            SingleState.instance = new SingleState
        }
        return SingleState.instance
    }
}
const state_1 = SingleState.getInstance()
state_1.set('hi','hello') // 设置 key = hi value = hello
const state_2 = SingleState.getInstance()
console.log(state_2.get('hi')) // hello

Vuex使用的就是单例模式，使用过程中通过 Vue.use(Vuex) 安装了Vuex插件,而Vuex 插件是一个对象，它在内部实现了一个 install 方法，这个方法会在插件安装时被调用，从而把 Store 注入到Vue实例里去。也就是说每 install 一次，都会尝试给 Vue 实例注入一个 Store。

对localStorage进行封装

原理与上面的代码大致相同。当然下面的封装相对简单，可以封装为微信小程序的Storage 存的是什么类型那么取出来还是什么类型，后续的系列文章策略模式会对此重新进行封装。

class Storage {
    // 获取方法
    get(key){
        return localStorage.getItem(key)
    }
    // 存储方法
    set(key,value){
        return  localStorage.setItem(key,value)
    }
    // 外部调用此函数实例化
    static getInstance() {
        if (!Storage.instance) {
            Storage.instance = new Storage
        }
        return Storage.instance
    }
}
const state_1 = Storage.getInstance()
state_1.set('hi','hello')

实现全局弹框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #modal {
            height: 200px;
            width: 200px;
            line-height: 200px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <button id="open">打开</button>
    <button id="close">关闭</button>
</body>
<script>
    class ModelBase {
        // 初始化方法
        constructor() {
            this.target = document.createElement('div')
            this.target.innerHTML = '我是一个全局唯一的Modal'
            this.target.id = 'modal'
            this.target.style.display = 'none'
            document.body.appendChild(this.target)
        }
        initElement() {

        }
        // 开启
        open() {
            this.target.style.display = 'block'
        }
        // 关闭
        close() {
            this.target.style.display = 'none'
        }
    }
    // 通过闭包封装，这里只是想告诉大家可以这样使用
    Model = (function () {
        let instance = null
        return function () {
            if (!instance) {
                instance = new ModelBase()
            }
            return instance
        }
    })()
    // 打开按钮
    document.querySelector('#open').addEventListener('click', function () {
        const model = new Model()
        model.open()
        console.log('open')
    })
    // 关闭按钮
    document.querySelector('#close').addEventListener('click', function () {
        const model = new Model()
        model.close()
        console.log('close')
    })
</script>

</html>