从单例模式看Vue单例组件

什么是单例模式

单例模式可以说是众多设计模式的基石,今天我们不聊别的就说说单例模式

保证一个类仅有一个实例，并且提供一个访问它的全局访问点

之所以叫单例模式就是因为他保证了不管你调用我几次,老子就输出一次实例的特点,我们用ES6语法举个简单的例子

非单例模式实现的类

class Per {
  constructor(name) {
    this.name = name;
  }
  static sayName(name) {
    return new Per(name);
  }
}
var a = Per.sayName("码不停息");
var b = Per.sayName("码不停息2");
console.log(a); // Per {name: "码不停息"}
console.log(b); // Per {name: "码不停息2"}
console.log(a === b); // false

单例模式实现的类

class Per {
  constructor(name) {
    this.name = name;
  }
  static sayName(name) {
    if (!this.instance) {
      this.instance = new Per(name);
    }
    return this.instance;
  }
}
var a = Per.sayName("码不停息");
var b = Per.sayName("码不停息2");
console.log(a); // Per {name: "码不停息"}
console.log(b); // Per {name: "码不停息"}
console.log(a === b); // true

可以看出,在非单例模式下我们调用几次sayName就会new几次Per并且每次new出来的结果不相同;在单例模式下不管你调用sayName几次,都会返回第一次的结果

单例模式的实际用途

需要对页面资源进行统一调度。最典型的就是弹窗，单个弹窗当然没问题，但如果用户还没看清第一个弹窗的时候，第二个弹窗又来了，两个弹窗不管是覆盖还是叠加，体验都是极为糟糕的，这种时候就应该将所有弹窗放到一个单例下进行管理。

需要复用对象以节约资源。比如使用 webSocket 与后台通信的时候。 webSocket虽然使用方便，但是多个 webSocket 连接会占用大量的服务端资源，因此，一个页面内绝对不能初始化多个接口相同的 webSocket。最好的实现是：同一个浏览器内不管有多少页面，都共享同一个连接，不过，维持连接的页面关闭的时候，其他页面需要及时发起新的连接来保持通信，这样的功能需要后端的支持才能达到。

手写 vue单例组件之全局提示框

首先先做个提示框组件 toast.vue

<template>
  <div class="app-toast info" v-if="isShow">
    {{ text }}
  </div>
</template>
<style scoped>
.app-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  background: #ccc;
  padding: 10px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  color: #fff;
}
.info {
  background: #00aaee;
}
</style>

在toast.vue同级目录下新建index.js

import vue from "vue";
import toast from "./toast.vue";
// 组件构造器，构造出一个 vue组件实例
const ToastConstructor = vue.extend(toast);
function showToast({ text, type, duration = 1000 }) {
  this.toastDom = new ToastConstructor({
    el: document.createElement("div"),
    data() {
      return {
        isShow: true, // 是否显示
        text: text, // 文本内容
      };
    }
  });
  // 添加节点
  document.body.appendChild(this.toastDom.$el);
  // 过渡时间
  setTimeout(() => {
    this.toastDom.isShow = false;
  }, duration);
}
// 全局注册
function registryToast() {
  vue.prototype.$toast = showToast;
}
export default registryToast;

在main.js中去挂载

import toastRegistry from "./components/Toast/index";
Vue.use(toastRegistry);

在项目文件使用

this.$toast({
     text: "我是消息"
});

这就是典型的单例组件

vlambda博客
学习文章列表