单例模式是设计模式中最为简单的一种。此模式会确保一个类只有一个实例,并提供一个它的全局访问点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 设计模式-单例模式</title>
<style media="screen">
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 charset="utf-8">
<title>JavaScript 设计模式-单例模式</title>
<style media="screen">
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>
var getSingle = function(fn){ var result; return function(){ return result || (result = fn.apply(this,arguments)); } }; 创建实例对象职责和管理单例职责分别放置两个方法里,这两个方法可以独立变化互不影响