一、单例模式概念解读
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
二、单例模式的作用和注意事项
模式作用:
1.模块间通信
2.系统中某个类的对象只能存在一个
3.保护自己的属性和方法
注意事项:
1.注意this的使用
2.闭包容易造成内存泄漏,不需要的赶快干掉
3.注意new的成本(继承)
三、单例模式的代码应用和总结
以小王家和小李家为例,进行代码的书写,他们要实现通信,可以通过门铃,可以一起走出来,也可以通过打电话的方式。下面是他们通过门铃交互的代码,如果没有门的话,那就创建一个门进行交互。代码本身没有特别大的实用价值,主要方便大家理解。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
//1.独立的对象 建2个 一个xiaowang 一个xiaoli(为了方便理解所以采用这种命名方式)
//2.让Xiaoli跟xiaowang通过门铃进行通讯
//3.先看一下xiaowang家有没有门 如果有门直接通过门铃通讯didi,如果没有则先剑门
//4.两个单例之间开始通信
var xiaowang = (function (argument) {
var xiaowangjia = function (message) {
this.menling = message;
};
var door;
var info = {
sendMessage:function (message) {
if(!door){
door = new xiaowangjia(message) //注意new的成本,静态方式
}
return door;
}
};
return info;
})();
var xiaoli = {
callXiaowang : function (msg) {
var _xw = xiaowang.sendMessage(msg);
alert(_xw.menling);
_xw = null //防止占用内存,等待垃圾回收
}
};
xiaoli.callXiaowang('dingding门铃响了');
</script>
最终交互成功 ,看完这个例子后再具一个更为实用的用法,
我们在做前端的时候经常会遇到这样的情景,下面的是一般的代码
<script type="text/javascript">
//页面上6个按钮a b c d e f 省略html代码
$('#a').click(function () {
//逻辑特别多
var a = 4; //在这种情况下,已经形成闭包,b中无法访问这个a
});
$('#b').click(function () {
});
$('#c').click(function () {
});
$('#d').click(function () {
});
$('#e').click(function () {
});
$('#f').click(function () {
});
</script>
那么我们通过单例模式进行改造后会怎么样呢?
<script type="text/javascript">
//页面上6个按钮a b c d e f 省略html代码
//a b c => top a,b,c属于top这个命名空间
//d e f => banner d,e,f属于banner这个命名空间
var top = {
init:function () {
this.render();
this.bind();
},
a:4,
render:function () {
var me =this;//这里的this指向top
me.btna = $('#a');
},
bind:function () {
var me = this;
me.btna.click(function () {
me.test();
});
},
test:function () {
a = 5
}
}
var banner = {
init:function () {
this.render();
this.bind();
},
a:4,
render:function () {
var me =this;//这里的this指向top
me.btna = $('#d');
},
bind:function () {
var me = this;
me.btna.click(function () {
me.test();
});
},
test:function () {
//d = 6;
top.a = 6; //改变top中的a
}
}
top.init();
banner.init();
</script>
这样就完成了单例模式的改造,可以进行d对a的操作