JavaScript设计模式——单例模式

单例模式

单例模式顾名思义就是只生成一个实例对象的一种模式。无论调用多少次都只返回相同的实例。

当我们单击登录按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个浮窗都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建

应用场景

单例模式一般应用于创建全局的配置对象、全局元素,例如:全局弹出框、全局提示、全局遮罩层等。

全局弹出层

该示例的作用为创建一个全聚德弹出层,用于显示提示信息,用户点击关闭按钮可以隐藏弹出层。

let Tip = (function () {
  class Tip {
    constructor() {
      this.ele = document.createElement('div');
      this.ele.className = 'tip';
    }
    // 设置弹出层的显示信息
    setContent(text) {
      this.ele.innerHTML = '';
      this.ele.style.display = 'block';
    }

    bindEvent() {
      this.ele.addEventListener('click', e => {
        e = e || window.e;
        let target = e.target || e.srcElement;
        if (target.className === 'close') {
          this.ele.style.display = 'none';
        }
        if (target.className === 'cancel') {
          console.log('false')
        }
        if (target.className === 'ok') {
          console.log("ok");
        }
      });
    }
  }
  // 单例模式核心代码,用变量保存需要返回的实例,判断是否已经存在,如果已经存在就返回变量保存的实例,否则就创建实例用变量保存并返回。
  let instance = null;
  return function () {
    if (!instance) {
      instance = new Tip();
    }
    return instance;
  }
})()

上面的代码先构建一个Tip类,并添加方法,然后使用instance存储已经创建的对象,并返回函数,函数内部判断是否已经创建实例,如果已经创建就返回已经存在的实例,否则就创建然后返回。虽然也能实现功能,但是返回实例,与构建类的代码耦合在一起,因此,把返回实例部分的代码进行封装,由此,构建类的代码可以和单例模式代码解耦

function createSingle(constructor){
  let instance;
  return function(){
    if(!instance){
      instance = new constructor(...arguments); 
    }
    return instance;
  }
}

该函数接受一个构造函数,使用 instance 变量保存实例对象,返回一个函数,这个被返回的函数用于判断,如果不存在实例对象就创建并返回实例对象,如果存在就直接返回已创建的实例对象

在使用时,可以传入一个构造函数,用于创建某一类的实例对象,这种模式属于懒汉式单例模式,对象在需要使用的使用才创建。除此之外还有饿汉式单例模式。

function createSingle(constructor){
	let instance = new constructor();
	return function (){
		return instance;
	}
}

饿汉式单例模式中对象在程序加载时就创建

总结

单例模式比较简单,主要用于创建唯一实例,由此可以扩大其唯一的范围,除了创建实例外也可以创建DOM元素、变量、函数、全局缓存等。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端御书房

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值