设计模式-单例模式

创建单例 LoginLayer.js

/**
 * 例一：登陆类
 */
class LoginLayer {//定义一个登陆的类
    constructor() {
        this.instance = null//初始化这个实例化对象
    }
    show(itemVue) {
        itemVue.isShow = true//处理逻辑
    }
    hide(itemVue) {
        itemVue.isShow = false//处理逻辑
    }
    static getInstance() {//单例模式 只会new出一个实例化对象 如果已经有了 会返回之前new好的实例化对象
        if (!this.instance) {
            this.instance = new LoginLayer()
        }
        return this.instance
    }
}

/**
 * 例二：购物车类
 */
class ShopingCar {
    constructor(){
        this.count = 0
        this.instance = null
    }
    add(){
        this.count += 1
    }
    remove(){
        this.count -= 1
    }
    static getInstance(){
        if(!this.instance){
            this.instance = new ShopingCar()
        }
        return this.instance
    }
}

/**
 * 工厂类
 */
class AllCalss {//工厂模式
    TLogionLayer(){//定义一个方法返回登陆的实例对象
        return LoginLayer.getInstance()//直接类名点静态方法名可调用静态方法
    }
    TShopingCar(){
        return ShopingCar.getInstance()
    }
}

/**
 * 创建工厂类的实例对象
 */
const allclass = new AllCalss()//new出工厂类的实例对象
export const loginlayer = allclass.TLogionLayer()//导出登录的方法
export const shopingcar = allclass.TShopingCar()//导出购物车方法

Vue中使用单例 danlie.vue

<template>
    <div>
        <div>例一：登录框</div>
        <div v-show="isShow" class="login-layer">我是登录框</div>
        <div @click="hideBtn" v-show="isShow">隐藏登录框</div>
        <div @click="showBtn">我是按钮</div>

        <hr/>

        <div>例二：购物车</div>
        <div>当前购物车商品数量： {{count}}</div>
        <div @click="add">增加一件商品</div>
        <div @click="remove">减少一件商品</div>
        <div @click="goOtherPage">跳转到另外一页进行测试</div>
    </div>
</template>
<script>
    import {loginlayer, shopingcar} from '../util/LoginLayer' //引入刚导出的方法
    export default {
        data(){
            return{
                isShow: false,
                count: null
            }
        },
        methods:{
            showBtn(){//显示登陆窗口
                loginlayer.show(this)
            },
            hideBtn(){//隐藏登陆窗口
                loginlayer.hide(this)
            },
            add(){//增加商品
                shopingcar.add()
                this.count = shopingcar.count
            },
            remove(){//减少商品
                shopingcar.remove()
                this.count = shopingcar.count
            },
            goOtherPage(){//跳转到其它页面
                this.$router.push({'name': 'Danlie2'})
            }
        },
        created(){
            this.count = shopingcar.count//初始化count
        }
    }
</script>
<style>
.login-layer {
     200px;
    height: 200px;
    background-color: rgba(0, 0, 0, .6);
    text-align: center;
    line-height: 200px;
    display: inline-block;
    color: #fff;
}
</style>

Vue中使用单例 danlie2.vue

<template>
    <div>
        <div>当前购物车商品数量： {{count}}</div>
        <div @click="add">增加一件商品</div>
        <div @click="remove">减少一件商品</div>
        <div @click="goBack">返回上一页</div>
    </div>
</template>
<script>
import {shopingcar} from '../util/LoginLayer'
export default {
    data(){
        return{
            count: null
        }
    },
    methods: {
        add(){
            shopingcar.add()
            this.count = shopingcar.count
        },
        remove(){
            shopingcar.remove()
            this.count = shopingcar.count
        },
        goBack(){
            this.$router.go(-1)
        }
    },
    created(){
        this.count = shopingcar.count
    }
}
</script>

总结：
当我们使用单例模式时，只会new出一个实例对象，该对象的初始值都会共享，每次改变该值，其它页面如果使用该值的，相应也会发生变化