6. JavaScript 设计模式（策略模式，桥接模式）

关于策略模式和桥接模式，我觉得一起说会更加明白，毕竟这两个模式太像了。连uml图都90%一样的。 
不多说废话了，还是先做介绍和代码的实现，再做比较吧。

1. 策略模式

定义一系列的算法，把每一个算法封装起来，并且使它们可相互替换。

个人觉得这个 uml 图比较简单，从定义来看也是比较容易看明白的。 
举个简单的例子吧。 
例如组团去郊游，然后去到动物园，进入动物园需要买票 
对于小朋友春游来说，校巴进入动物园，买票的方式是，老师统一收钱，然后交给收费站。 
对于其他做巴士的人来说，买票的方式是，就由工作人员上车一个一个收钱。

var Bus = function() {    this.fee = function() {        throw new Error('此处由子类实现方法');    };};var MiniBus = function() {};MiniBus.prototype = new Bus();MiniBus.prototype.fee = function() {    console.log('小巴在付款！收费人员上车逐个收费');};var SchoolBus = function() {};SchoolBus.prototype = new Bus();SchoolBus.prototype.fee = function() {    console.log('校巴在付款！老师收钱，交给收费站');};var TollStation = function() {    this.bus = null;    this.setBus = function(b) {        this.bus = b;    };    this.fee = function () {        this.bus.fee();    };};// 让校巴进入收费站var tollStation1 = new TollStation();var schoolBus = new SchoolBus();tollStation1.setBus(schoolBus);tollStation1.fee();// 让小巴进入收费站var tollStation2 = new TollStation();var miniBus = new MiniBus();tollStation2.setBus(miniBus);tollStation2.fee();
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
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

• 运行结果

这个就是策略模式。看完了策略模式，那桥接模式是什么呢？个人认为，桥接模式是策略模式的加强版。当然啦，这是我个人的理解。怎么说呢。请继续看

2. 桥接模式

将抽象部分与它的实现部分分离，使它们都可以独立地变化。它是一种对象结构型模式

大家看到这个 uml 图，再看看策略的 uml 图。然后再看看我的代码的例子。把策略中的 strategy 看作是 桥接中的 implementor ，然后 策略中的 context 看作 RedfinedAbstraction ，就是发现唯一不同的就是桥接比策略多了个继承！

于是，我还是用了上面的例子。 
然后收费站变成了，植物园的收费站和动物园的收费站。 
我们一起来看看代码吧

var Bus = function() {    this.fee = function() {        throw new Error('此处由子类实现方法');    };};var MiniBus = function() {};MiniBus.prototype = new Bus();MiniBus.prototype.fee = function() {    console.log('小巴在付款！收费人员上车逐个收费');};var SchoolBus = function() {};SchoolBus.prototype = new Bus();SchoolBus.prototype.fee = function() {    console.log('校巴在付款！老师收钱，交给收费站');};var TollStation = function() {    this.bus = null;    this.name = '';    this.money = '';    this.setBus = function(b) {        this.bus = b;    };    this.fee = function () {        console.log('巴士进入' + this.name + '收费站，每人' + this.money + '元');        this.bus.fee();    };};var ZooTollStation = function() {};ZooTollStation.prototype = new TollStation();ZooTollStation.prototype.money = 10;ZooTollStation.prototype.name = '动物园';var PlantTollStation = function() {};PlantTollStation.prototype = new TollStation();PlantTollStation.prototype.money = 20;PlantTollStation.prototype.name = '植物园';// 让校巴进入动物园收费站var tollStation1 = new ZooTollStation();var schoolBus = new SchoolBus();tollStation1.setBus(schoolBus);tollStation1.fee();console.log('-------------------------------------');// 让小巴进入动物园收费站var tollStation2 = new ZooTollStation();var miniBus = new MiniBus();tollStation2.setBus(miniBus);tollStation2.fee();console.log('-------------------------------------');// 让校巴进入植物园收费站var tollStation1 = new PlantTollStation();var schoolBus = new SchoolBus();tollStation1.setBus(schoolBus);tollStation1.fee();console.log('-------------------------------------');// 让小巴进入植物园收费站var tollStation2 = new PlantTollStation();var miniBus = new MiniBus();tollStation2.setBus(miniBus);tollStation2.fee();console.log('-------------------------------------');
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

• 运行结果

通过上面的例子，我个人对桥接模式的理解就是：定义一系列的算法，在不同的环境下，可以替换不同的算法，就是桥接。而策略是在一样的环境。

当然以上的都是我看了一些资料之后的个人理解。不一定对，大家只作为参考，如果有不同的见解欢迎留言或者邮件（[e-mail]），我们可以一起交流。

以下是我看到的一些例子的连接： 
桥接： 
http://blog.csdn.net/jason0539/article/details/22568865 
http://blog.csdn.net/caihongdao123/article/details/51878381 
策略： 
http://blog.csdn.net/jason0539/article/details/45007553 
http://blog.csdn.net/wallwind/article/details/8084069

注：本文为转载，原创是 http://blog.csdn.net/willson_l/article/details/72900200