普通的构造函数加原型方式
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的两种状态和闭包特性控制元素只能被添加一次
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。