js设计模式-单例模式

2019-08-13  本文已影响0人  hzl的学习小记

单例模式(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()
上一篇 下一篇

猜你喜欢

热点阅读