单例模式的概念:
单例模式是指创建一个只有一个实例的类,像js里的全局对象即是最简单的单例模式
- 用闭包实现的一个单例模式
let CreateSingleton=(function(){
var instance=null
return function(name){
this.name=name
if(instance){
return instance
}
return instance=this
}
})()
CreateSingleton.prototype.getName=function(){
console.log(this.name)
}
var s1=new CreateSingleton("张三")
var s2=new CreateSingleton("李四")
console.log(s1===s2)
s1.getName() //张三
s2.getName() //张三
- 闭包实现代理单例以实现创建对象和对象判断的解耦
//改造下,实现代理单例,将创建对象和,对象判断解耦
let CreateSingleton=(function(){
var instance=null
return function(name){
if(instance){
return instance
}
return instance=new Singleton(name)
}
})()
function Singleton(name){
this.name=name
}
Singleton.prototype.getName=function(){
console.log(this.name)
}
var s1=new CreateSingleton("张三")
var s2=new CreateSingleton("李四")
console.log(s1===s2)
s1.getName()
s2.getName()
- 实现一个惰性单例,创建一个唯一的提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单例模式</title>
</head>
<body>
<button id="button">点我一下</button>
<script src="singleton.js"></script>
<script>
// 使用惰性单例
let getSingleton=function(fn){
var result=null
return function(){
return result||(result=fn.apply(this,arguments))
}
}
let CreateMessage=function(html){
var div=document.createElement("div")
div.innerHTML=html
div.style.display='none'
document.body.appendChild(div)
return div
}
let singleMessage=getSingleton(CreateMessage)
document.getElementById("button").onclick=function(){
let message=singleMessage('<a href="https://www.w3cschool.cn/" style="text-decoration:none;" target="_blank">W3Cschool.cn</a>')
message.style.display='block'
}
</script>
</body>
</html>