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(); 运行结果

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

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('-------------------------------------'); 运行结果

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

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

以下是我看到的一些例子的连接： 桥接： 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