<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>单利模式实例</title>
</head>
<body>
<button id="login">登陆</button>
</body>
<script type="text/javascript">
/*
例如；用户登陆后；进入应用；正在应用的c页面；一段时间后，登陆过期；需要在c页面弹出一个可以重新登陆的弹框；
在整个应用的任何页面；都有可能会弹出这个弹框；因为不能确定登录过期的时候用户会在应用的那个页面上
因此；这个弹框就是个全局的；也可以说是唯一的
用单利模式实现是这样的；
*/
//管理单例的逻辑
var getSingle = function(fn) {
var result;
return function() {
return result || (result = fn.apply(this, arguments));
}
};
//创建登陆的弹框
var createLoginLayer = function() {
var div = document.createElement('div'),
aa = document.createElement('i');
aa.innerHTML = '关闭';
aa.setAttribute('class', 'close');
aa.style.color = 'red';
div.innerHTML = '我是登陆弹框';
div.appendChild(aa);
div.style.display = 'none';
document.body.appendChild(div);
return div;
}
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('login').onclick = function() {
var loginLayer = createSingleLoginLayer();
loginLayer.style.display = 'block';
}
var closeEle = document.getElementByClassName('close')[0];
closeEle.onclick = function() {
}
</script>
</html>