设计模式(2)[JS版]---JavaScript如何实现单例模式？
【摘要】 目录
1 什么是单例模式？
2 单例模式的作用和注意事项
3 代码实现
4 案例应用
4.1 使用单例模式管理命名空间
4.2 使用单例模式为不同命名空间的button按钮添加click事件，并且使他们之间能够互相通信
1 什么是单例模式？
单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果
...
目录
4.2 使用单例模式为不同命名空间的button按钮添加click事件，并且使他们之间能够互相通信
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>
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/107451561
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）