JS设计模式— 单例模式（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 {

        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 jirengu.com')

        }

        return {

            init: function() {

                bind()

            }

        }

    }

    return {

        getInstance: function() {

            if(!instance) {

                return createInstance()

            }

            return instance

        }

    }

})()

var app = Singleton.getInstance()

app.init()