单例模式是设计模式中最为简单的一种，由名称可以初步感受到它的作用。
此模式会确保一个类只有一个实例，并提供一个它的全局访问点。
下面通过一个简单的代码实例来介绍一下它，代码如下:
<!doctype html>
<html>
<head>
<meta name="author" content="http://www.chajianwo.com/" />
<meta charset="UTF-8" />
<title>js单例模式</title>
<style type="text/css">
div{color:red}
</style>
</head>
<body>
<button id="bt">查看演示</button>
<script type="text/javascript">
var createDiv = (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('bt').onclick = function () {
var odiv = createDiv();
odiv.style.display = 'block'
};
</script>
</body>
</html>无论点击多少次按钮，都会只生成一个div元素，代码还不够好，下面进行一下改造:
<!doctype html>
<html>
<head>
<meta name="author" content="http://www.chajianwo.com/" />
<meta charset="UTF-8" />
<title>js单例模式</title>
<style type="text/css">
div{color:red}
</style>
</head>
<body>
<button id="bt">登录</button>
<script type="text/javascript">
var getSingle = function(fn) {
var result;
return function() {
return result || (result = fn.apply(this, arguments));
}
}
//生成单例函数
var createDiv = getSingle(function() {
var div = document.createElement('div');
div.innerHTML = '我是登录弹出窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
})
document.getElementById('bt').onclick = function() {
var odiv = createLoginLayer();
odiv.style.display = 'block';
}
</script>
</body>
</html>将上管理单例的逻辑从原来的代码中抽离出来，封装在getSingle函数内部:
var getSingle= function(fn) {
var result;
return function() {
return result || (result = fn.apply(this, arguments));
}
}创建实例对象职责和管理单例职责分别放置在两个方法里，这两个方法可以独立变化互不影响。