javascript 设计模式- 单例模式
定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点
适用场景:例如:线程池、全局缓存、浏览器中的window对象,登陆弹框等等
例子:登陆弹框
代码1:
<body>
<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>
</body>
分析:登陆弹框loginLayer预先已经创建好,如果我没有点击登陆按钮,而去做其他操作,那么就白白浪费了这个节点
改进思路:点击登陆按钮时候再进行创建
代码2:
<body>
<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>
</body>
分析:每点击一个登陆,就生成一个登陆loginLayer,又白白浪费
改进思路: 判断是否已经存在loginLayer,如果存在loginLayer,返回loginLayer,不存在则创建loginLayer
代码3:
<body>
<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>
</body>
分析: 这已经是单例模式了,但是,如果我想再生成一个iframe,那我不是要重新写一遍createIframe函数
改进思路:把不变的部分分离处理,把变的部分作为参数传入
代码4:
<body>
<button id="loginBtn">登陆</button>
<button id="showIframe">显示iframe</button>
<script>
var getSingle = function(fn) {
var result;
return function(){
return result || (result = fn.apply(this, arguments))
}
}
var createLoginLayer = function () {
var div = document.createElement('div')
div.innerHTML = "我是登陆弹框"
div.style.display = "none"
document.body.appendChild(div)
return div
}
var createIframe = function () {
var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
return iframe
}
var createSinleLoginLayer = getSingle(createLoginLayer)
document.getElementById("loginBtn").onclick = function() {
var loginLayer = createSinleLoginLayer()
loginLayer.style.display = 'block'
}
var createIframe = function () {
var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
return iframe
}
var createSinleIframe = getSingle(createIframe)
document.getElementById("showIframe").onclick = function() {
var loginLayer = createSinleIframe()
}
</script>
</body>
分析: 方法getSingle,创建一个单例,可以作为通用的惰性单例