设计模式(2)[JS版]---JavaScript如何实现单例模式？
设计模式(2)[JS版]---JavaScript如何实现单例模式？
AlbertYang
发布于 2020-09-08 15:38:33
发布于 2020-09-08 15:38:33
1 什么是单例模式？
单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。
在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。
2 单例模式的作用和注意事项
作用：
1 模块间通信。
2 系统中某个类的对象只能存在一个。
3 保护自己的属性和方法。
注意事项：
1 注意this的使用。
2 闭包容易造成内存泄露，不需要的赶快干掉。
3 注意new的成本。（继承）
3 代码实现
JavaScript实现单例的方式很多种，只要符合定义即可。
/*
*1 创建两个独立的对象，xiaoLiu和xiaoWang
*2 让xiaoLiu和xiaoWang通过电话进行通信
*3 让xiaoLiu发起通话;判断xiaoWang有没有电话，如果没有先创建电话
*4 两个单例之间进行通信
*/
var xiaoWang = (function(argument) {
var xiaoWangPhone = function(message) {
this.lingsheng = message;
}
var phone;
var info = {
sendMessge: function(message) {
if (!phone) {
phone = new xiaoWangPhone(message);
}
return phone;
}
}
return info;
})();
var xiaoLiu = {
callXiaoWang: function(message) {
var _xw = xiaoWang.sendMessge(message);
alert(_xw.lingsheng);
_xw = null; //等待垃圾回收
}
}
xiaoLiu.callXiaoWang("请求通话");4 案例应用
4.1 使用单例模式管理命名空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
function Namespace(name){
return window[name] || (window[name] = {});
}
(function(){
var myNamespace1 = Namespace("myNamespace1");
myNamespace1.method = function(){
console.log("XXXX");
};
}())
myNamespace1.method();
</script>
</html>4.2 使用单例模式为不同命名空间的button按钮添加click事件，并且使他们之间能够互相通信
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单例应用</title>
<style>
* {
margin: 0;
padding: 0;
}
button {
padding: 10px;
}
</style>
</head>
<body>
<button id="btna">按钮a</button>
<button id="btnb">按钮b</button>
</body>
<script>
//为不同命名空间的button按钮添加click事件，并且使他们之间能够互相通信
var topHtml = {
a: 4,
init: function() {
this.render();
this.bind();
},
render: function() {
var me = this;
me.btna = document.getElementById("btna");
},
bind: function() {
var me = this;
me.btna.onclick = function() {
//业务逻辑取出去
me.test();
}
},
test: function() {
console.log(this.a);
this.a = 5;
console.log(this.a);
}
}
var bottomHtml = {
a: 1,
b: 4,
init: function() {
this.render();
this.bind();
},
render: function() {
var me = this;
me.btnb = document.getElementById("btnb");
},
bind: function() {
var me = this;
me.btnb.onclick = function() {
//业务逻辑取出去
me.test()
}
},
test: function() {
console.log(this.a);
this.a = 3;
console.log(this.a);
console.log(this.b);
this.b = 6;
console.log(this.b);
console.log(topHtml.a);
topHtml.a = 15;
console.log(topHtml.a);
}
}
topHtml.init();
bottomHtml.init();
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录