美文网首页
js设计模式-单例模式

js设计模式-单例模式

作者: hzl的学习小记 | 来源:发表于2019-08-13 15:24 被阅读0次

单例模式(Singleton Pattern)
什么是单例模式

单例模式,是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中,应用该模式的一个类只有一个实例。即一个类只有一个对象实例。

把一堆代码放入一个逻辑单元,可通过一个单一的变量来访问。
单例模式最大的好处是封装代码,减少全局变量。

var btn = document.querySelector('#btn')
btn.onclick = function() {
    render()
}
function render() {
    console.log('render')
}

用单例模式,把一坨代码代码整合到一个对象里,作为它的属性和方法。只保留一个全局变量,通过预留的“入口”启动

var app = {
  btn: document.querySelector('#btn'),
  init: function() {
      this.bind()
  },
  bind: function() {
      var _this = this
      this.btn.onclick = function() {
          _this.render()
      }
  },
  render() {
      console.log('render jirengu.com')
  }
}
app.init()

使用闭包,来隐藏部分不需要暴露的变量,只暴露出init方法。这种特殊的单例模式也叫模块模式(module pattern)

var app = (function(){
   var btn = document.querySelector('#btn')
   function bind() {
       btn.onclick = function() {
           render()
       }
   }
   function render() {
       console.log('render jirengu.com')
   }

    return {
        init: function() {
            bind()
        }
    }
})()

app.init()

改进, 不立即创建实例,等需要的时候再创建。

var Singleton = (function(){
    var instance
    function createInstance() {
      // code here
     return {a: 1, b:2}
    }
    return {
        getInstance: function() {
            if(!instance) {
               return  createInstance()
            }
            return instance
        }
    }
})()
var instance1 = Singleton.getInstance()
var instance2 = Singleton.getInstance()
console.log(instance1 === instance2)

完整代码

var Singleton = (function(){
    var instance
    function createInstance() {
        var btn = document.querySelector('#btn')
        function bind() {
            btn.onclick = function() {
                render()
            }
        }
        function render() {
            console.log('render Singleton')
        }
        return {
            init: function() {
                bind()
            }
        }
    }
    return {
        getInstance: function() {
            if(!instance) {
                return createInstance()
            }
            return instance
        }
    }
})()

var app = Singleton.getInstance()
app.init()

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 单例模式Java篇

    单例设计模式- 饿汉式 单例设计模式 - 懒汉式 单例设计模式 - 懒汉式 - 多线程并发 单例设计模式 - 懒汉...

  • python中OOP的单例

    目录 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 单例

    目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计模式 是 前人...

  • 设计模式 - 单例模式

    设计模式 - 单例模式 什么是单例模式 单例模式属于创建型模式,是设计模式中比较简单的模式。在单例模式中,单一的类...

  • js的4种设计模式及Vue小结(1)

    4种js设计模式 模块模式(module) 原型模式(prototype) 观察者模式(observer) 单例模...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 2018-04-08php实战设计模式

    一、单例模式 单例模式是最经典的设计模式之一,到底什么是单例?单例模式适用场景是什么?单例模式如何设计?php中单...

  • 十道前端面试题第【05】篇

    摘要:本篇是设计模式专题,分享了10个设计模式的JS示例代码——工厂模式、单例模式、原型模式、建造者模式、外观模式...

  • python 单例

    仅用学习参考 目标 单例设计模式 __new__ 方法 Python 中的单例 01. 单例设计模式 设计模式设计...

网友评论

      本文标题:js设计模式-单例模式

      本文链接:https://www.haomeiwen.com/subject/sitbjctx.html