js设计模式-单例模式

定义

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

• 代理模式实现单例

class CreateDiv {
  constructor(html) {
    this.html = html;
    this.init()

  }
  init() {
    const div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div)
  }
}
const ProxySingletonCreateDiv = (()=>{
  let instance;
  return (html) => {
    if (!instance) {
      instance = new CreateDiv(html);
    }
    return instance
  }
})()
const a = ProxySingletonCreateDiv('sven1')
const b = ProxySingletonCreateDiv('sven2')
console.log(a === b)

• 通用的惰性单例 惰性单例指的是在需要的时候才创建对象实例，将单例管理方法与创建实例方法分开，可以复用单例管理方法创建不同的实例

<template>
<button @click="login">
  login
</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    // 单例管理方法 可以传入任意的创建实例方法获取单一实例
    const getSingle = function(fn) {
      let result;
      return function() {
        return result || (result = fn.apply(this, arguments))
      }
    }
    // 创建实例方法
    const createLayer = function() {
      const div = document.createElement('div');
      div.innerHTML = '登录';
      div.style.display = 'none';
      document.body.appendChild(div)
      return div
    }
    return {
      singletonLayer: getSingle(createLayer)
    }
  },
  methods: {
    login() {
      const loginLayer = this.singletonLayer();
      loginLayer.style.display = 'block'
    },
    }
})
</script>