JavaScript设计模式之单体模式全面解析

221 阅读 0 评论 146 点赞

我是靠谱客的博主悲凉路灯，这篇文章主要介绍JavaScript设计模式之单体模式全面解析，现在分享给大家，希望可以做个参考。

单体是一个用来划分命名空间并将一些相关的属性与方法组织在一起的对象，如果她可以被实例化的话，那她只能被实例化一次（她只能嫁一次，不能二婚）。

单体模式是javascript里面最基本但也是最有用的模式之一。

特点：

1. 可以用来划分命名空间，从而清除全局变量所带来的危险或影响。

2. 利用分支技术来来封装浏览器之间的差异。

3. 可以把代码组织的更为一体，便于阅读和维护。

单体模式的基本写法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
/* 最基本的单体模式 */ 
var her = {
name: 'Anna',
sex: 'women',
say: function(){
// 一些处理逻辑......
},
doing: function(){
// 另一些处理函数......
} 
}

1. 划分命名空间：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var box = {
width: 0,
height: 0,
getArea: function(){
return this.width * this.width; // js中对象成的访问必须是显示的，即this是不能省略的
},
init: function(w, h){
// width = w;
// height = h;这种方式相当于定义了两个全局变量，（没加var声明的变量为全局变量）
// 并不是对对象width和height的赋值
// 下面是正确的
this.width = w;
this.height = h;
}
} //box划分了一个命名空间，命名空间里的变量只在空间里有效

上面的单体中的所有的成员以及方法都是公有的（public），也就是在单体的外部可以对她们进行任意的改动（但不能访问其中的局部变量），那为什么说单体提供了一个命名空间呢？

别急，我们接着往下看：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var box = {
width:0,
height:0,//单体的变量
getArea:function(){
return width * height;// width，height其实并不是单体的变量，而是在init中定义的全局变量
}
init:function(w,h){
width = w;
height = h;
}
}// init中width，height其实并不是单体的变量
window.onload = function(){
var init = box.getArea();
alert(init);
}

由于没有对init中的width，height进行初始化，所以会报错，这样改一下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var box = {
width:0,
height:0,
getArea:function(){
return width * height;
},
init:function(w,h){
width = w;
height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
//or box.init(0,0);
var init = box.getArea();
alert(init);
}

发现可以了，由于init和 getArea所用的width和height并不是归单体所有的变量，而是一个全局变量，所以我们可以在单体外面进行随意调用而不受影响、

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var box = {
width: 0,
height: 0,
getArea: function(){
return width * height;//js中对象成的访问必须是显示的，即this是不能省略的
},
init:function(w,h){
width = w;
height = h;
}
}//这里的width，height其实并不是单体的对象
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}

这样写又会报错了，可见我们以上的方式对于全局变量并没有建立起一个命名空间，全局变量为我们带来了危险。所以最上面的写法是对的，我们来验证一下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var box = {
width: 2,
height: 2,
getArea: function(){
return this.width * this.height;/ /js中对象成的访问必须是显示的，即this是不能省略的
},
init:function(w,h){
this.width = w;
this.height = h;
}
}
window.onload = function(){
width = 0; // 不会影响单体中的局部变量也就是命名空间
height = 0; // 不会影响单体中的局部变量也就是命名空间
var width = box.getArea();
alert(width);
}

可见在window.onload中的width 和height已经没有干扰了，因为单体为单体中的width和height建立了一个命名空间。

2. 成员的属性：

虽然在javascript中没有这么严格的面向对象(oop)，但是我们可以借助闭包来进行一个模仿，毕竟有的变量设为public是很不好的。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var her = (function(){
var name = 'Anna';
var sex = 'women';
return {
getArea: function(){
return name + 'is a' + sex;
},
init:function(b){
name = b;
}
}
})();
window.onload = function(){
her.name = 'Jock'; // 无法访问
alert(ger.getArea());
her.init('Lous');
alert(her.getArea());
}

私有变量、方法是只读的，公有变量、方法是可读可写的。

访问：

对于私有成员，直接访问即可，前面不用加任何修饰，
对于公有的访问在单体作用域内前面要加上“this.”，在单体作用域外前面要加上“her.”（单体名字.）

3.利用分支技术来来封装浏览器之间的差异

注意的地方：

　　a. 一定要用闭包，实现即时绑定

　　b. 每个分支之间用分号隔开

　　c. 最后返回的是分支的名字

　　d. 调用的时候用单体名+分支的方法名；

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 利用单体的分支技术来定义XHR（XMLHttpRequest）对象,必须要用闭包才可以实现
var XHR = (function(){
//The three branches
var standard = {
cXHR:function(){
return new XMLHttpRequest();
} 
};
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp');
} 
};
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp');
} 
};
//To assign(分配) the branch, try each method;return whatever doesn't fail
var testObject;
try{
testObject = standard.cXHR();
return standard;// return this branch if no error was thrown 
}catch(e){
try{
testObject = activeXNew.cXHR();
return activeXNew;
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
}catch(e){
throw new Error('Create the XMLHttpRequestObject failed!'); 
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR());
}