共计 2130 个字符，预计需要花费 6 分钟才能阅读完成。
普通的构造函数加原型方式
function Singleton (uName){
this.userName =uName
this.ins = null
}
Singleton.prototype.showUserName = function(){return this.userName;}
var obj1 = new Singleton('hi')
var obj2 = new Singleton('hei')
console.log(obj1==obj2) //false
每次 new 都会在内存中生成一块新的内存区域保存新的实例，所以这种方式就不能保证只能 new 出一个单例，所以，我们想要创建一个单例，就要能够控制 new 创建实例的过程！！！，这就是单例的关键，那么要控制这个过程，肯定不能让用户直接调用构造函数，所以我们要另外想办法.第一种办法：在函数中添加一个静态方法，来控制创建实例的过程
<script>
function Singleton (uName){this.userName = uName;}
Singleton.prototype.showUserName = function(){return this.userName;}
Singleton.getInstance = function(uName){if(!this.ins){this.ins= new Singleton(uName);
}
return this.ins;
}
var obj1 = Singleton.getInstance('jdksa')
var obj2= Singleton.getInstance('jdkjsf')
console.log(obj1==obj2)//true
</script>
判断 ins 这个变量是否保存了一个实例，如果没有就 new 一个，否则直接返回。第二次在调用的时候，由于已经存在了 ins，所以直接返回，就不需要在 new 了，这要就能确保是单例 传统面向对象方式，每次点击都会弹出新的模态框
<style>
div{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #aaa;
box-shadow: 1px 1px 1px #000;
}
</style>
</head>
<body>
<input type="button" value="创建">
<script>
var btn = document.querySelector('input')
offset = 20,index=1;
function module(ops){this. offset=ops||20;}
module.prototype.create=function(){var div = document.createElement('div')
div.style.left=(++index)*offset+'px'
div.style.top=(++index)*offset+'px'
div.innerHTML="藏着真话"
return div
}
btn.onclick=function(){var odiv = new module();
document.body.appendChild(odiv.create())
}
</script>
用单例改造
<style>
div {
width: 200px;
height: 200px;
border:1px solid #09f;
box-shadow: 2px 2px 1px #666;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<script>
var oBtn = document.querySelectorAll('input')
offset=20,index=1
function Module(pos){this.offset=pos||20}
Module.prototype.create=function(){var oDiv=document.createElement('div')
oDiv.style.left=(++index)*offset+'px'
oDiv.style.right=(++index)*offset+'px'
oDiv.innerHTML="router.getMat"
return oDiv
}
Module.info=(function(){
var ins = null,isTure=false;
return function(pos){if(!ins) ins=new Module(pos)
if(!isTure){document.body.appendChild(ins.create())
isTure= true
}
}
})();
oBtn[0].onclick=function(){Module.info(10)
}
oBtn[1].onclick=function(){Module.info(29)
}
</script>在 Module.info 中通过变量 isTure 的两种状态和闭包特性控制元素只能被添加一次
正文完
发表至： javascript
2019-07-28
