设计模式1-单例模式

1.实现单例模式

var Singleton=function(name){
    this.name=name
}
Singleton.instance=null
Singleton.prototype.getName=function(){
    console.log(this.name)
}
Singleton.getInstance=function(name){
    if(!this.instance){
        this.instance=new Singleton(name)
    }
    console.log(this)
    return this.instance
}
var a=Singleton.getInstance('aa')
var b=Singleton.getInstance('bb')
console.log(a===b) // true

或者

var Singleton=function(name){
    this.name=name
}
Singleton.prototype.getName=function(){
    console.log(this.name)
}
Singleton.getInstance=(function(name){
    var instance=null
    return function(name){
        if(!instance){
            instance=new Singleton(name)
        }
        return instance
    }
})()
var a=Singleton.getInstance('aa')
var b=Singleton.getInstance('bb')

2.惰性单例

惰性单例指的是在需要的时候才创建对象实例

1.应用场景：假如我们是webQQ开发人员，当点击左边导航里的登录按钮时弹出一个登录浮窗，很明显这个浮窗在页面里总是唯一的，不可能出现两个登录窗口的情况，

下面是第一种解决方案，在页面加载完成时便创建好这个div浮窗，这个浮窗一开始是隐藏状态，当点击登录按钮时他才显示

缺点：也许我们进入webQQ仅仅是玩游戏，不需要进行登录操作，因为登录浮窗总是一开始就被创建好，那么很有可能将白白浪费一些DOM节点

	<button id="loginBtn">登录</button>
    <script>
        var loginLayer = (function(){
            var div=document.createElement('div')
            div.innerHTML='我是登录浮窗'
            div.style.display='none'
            document.body.appendChild(div)
            return div

        })()
        document.getElementById('loginBtn').onclick=function(){
            loginLayer.style.display='block'
        }
    </script>

下面是第二种方案
缺点：虽然达到了惰性的目的，但失去了单例的效果，每次点击登录按钮都会创建一个新的登录浮窗，虽然我们可以在点击浮窗上的关闭按钮时把这个浮窗从页面删除，但频繁操作dom显然时不合理也是不必要的

	<button id="loginBtn">登录</button>
    <script>
        var createLoginLayer = function(){
            var div=document.createElement('div')
            div.innerHTML='我是登录浮窗'
            div.style.display='none'
            document.body.appendChild(div)
            return div

        }
        document.getElementById('loginBtn').onclick=function(){
            var loginLayer = createLoginLayer()
            loginLayer.style.display='block'
        }
    </script>

第三种方案：用一个变量来保存是否创建过登录浮窗
缺点：这段代码违反了单一职责原则，创建对象和管理单例的逻辑都放在createLoginLayer对象内部，如果下次需要创建页面唯一的iframe或者script标签，就需要把createLoginLayer函数几乎照抄一遍

	<button id="loginBtn">登录</button>
    <script>
        var createLoginLayer = (function(){
            var div
            return  function(){
                if(!div){
                    div=document.createElement('div')
                    div.innerHTML='我是登录浮窗'
                    div.style.display='none'
                    document.body.appendChild(div)
                }
                return div
            }
        })()
        document.getElementById('loginBtn').onclick=function(){
            var loginLayer = createLoginLayer()
            loginLayer.style.display='block'
        }
    </script>

第四种方案：我们需要把不变的部分隔离出来，先不考虑创建一个div和创建一个iframe有多少差异，管理单例的逻辑其实完全可以抽离出来，这个逻辑始终是一样的，用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象

优点：把创建实例对象的职责和管理单例职责分别放在两个方法里，这两个方法可以独立变化而不互相影响，当它们连接在一起时，就完成创建唯一实例对象的功能

	    var getSingle = function(fn){
            var result
            return function(){
                return result || (result = fn.apply(this,arguments))
            }
        }
        var createLoginLayer = function(){
            div=document.createElement('div')
            div.innerHTML='我是登录浮窗'
            div.style.display='none'
            document.body.appendChild(div)
            return div
        }
        var createSingleLoginLayer = getSingle(createLoginLayer)
        document.getElementById('loginBtn').onclick=function(){
            var loginLayer = createSingleLoginLayer()
            loginLayer.style.display='block'
        }
    </script>

创建唯一的iframe

		var createSingleIframe =getSingle(function(){
            var iframe=document.createElement('iframe')
            document.body.appendChild(iframe)
            return iframe
        })
         document.getElementById('loginBtn').onclick=function(){
            var loginLayer = createSingleIframe()
            loginLayer.src="http://www.baidu.com"
        }