设计模式 ~ 单例模式

概念

单例模式:指在确保一个类只有一个实例,创建之后缓存以便继续使用,并提供一个全局访问点来访问该实例;
前端对于单例模式不常用,但对于单例的思想无处不在;
如:弹窗、遮罩层、登录框、vuex redux 中的 store;


TypeScript

class Singleton {
  name: string
  // 禁止外部实例化
  private constructor(name: string) {
    this.name = name
  }
  private static insatance: Singleton | null // 单例对象
  static getInstance(name: string): Singleton {
    if (Singleton.insatance == null) {
      Singleton.insatance = new Singleton(name)
    }
    return Singleton.insatance
  }
}

const p1 = Singleton.getInstance('a')
const p2 = Singleton.getInstance('b') // 返回 p1
console.log(p1 === p2) // true

JavaScript

闭包:

function genGetInstance() {
  let instance // 闭包
  class Singleton{}
  return () => {
    if (instance == null) {
      instance = new Singleton()
    }
    return instance
  }
}

const getInstance = genGetInstance()
const s1 = getInstance()
const s2 = getInstance()
console.log(s1 === s2) // true

模块化:

let instance
class Singleton {}
export default () => {
  if (instance == null) {
    instance = new Singleton()
  }
  return instance
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值