设计模式(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）