单例模式

2021-07-09  本文已影响0人  AAA前端

单例模式:限制类实例化次数只能一次,一个类只有一个实例,并提供一个访问它的全局访问点。

单例模式是创建型设计模式的一种。针对全局仅需一个对象的场景,如线程池、全局缓存、window 对象等。

特点:

用一个登录弹窗讲解

  1. 页面初始化创建弹窗 缺点:如果没有使用也会 创建 造成资源浪费
    var $div = document.createElement('div')
    $div.innerHTML = '我是登录弹窗'
    $div.style.display = 'none'

    document.querySelector('#btn').onclick = function(){
      $div.style.display = 'block'
      document.body.appendChild($div)
    }
  1. 点击时再创建弹窗 关闭按钮销毁弹窗 缺点: 每一次点击都要创建弹窗
    function createLogin(){
      var $div = document.createElement('div')
      $div.innerHTML = '我是登录弹窗'
      $div.style.display = 'block'
      document.body.appendChild($div)
      // 里面实现 点击关闭按钮 销毁弹窗 (不是重点,没有实现)
    }
    document.querySelector('#btn').onclick = function(){
      createLogin()
    }
  1. 单列模式
    // 如果已经创建过直接返回 ,如果没有创建,那么就创建
    function createSingle(fn) {
      var r;
      //  fn.apply(this, arguments)  apply 保存执行上行文,并且可以传入参数
      return function(){
        return r || (r = fn.apply(this, arguments))
      }      
    }

    function createLogin() {
      var $div = document.createElement('div')
      $div.innerHTML = '我是登录弹窗'
      $div.style.display = 'block'
      document.body.appendChild($div)
      // 这里要返回 $div  createSingle才能 得到返回值
      return $div
    }

    var loginDom = createSingle(createLogin)

    document.querySelector('#btn').onclick = function () {
      loginDom()
    }

ES6 实现单例模式

    class Login {
      constructor() {
        var $div = document.createElement('div')
        $div.innerHTML = '我是登录弹窗'
        $div.style.display = 'block'
        document.body.appendChild($div)
        console.log('执行了');
      }
      // static 静态返回不会被实例继承  只有类原型可以调用
      static create() {
        if (!this.instance) {
          this.instance = new Login()
        }
        return this.instance
      }
    }

    document.querySelector('#btn').onclick = function () {
      Login.create()
    }
上一篇下一篇

猜你喜欢

热点阅读