深入理解JavaScript系列（44）：设计模式之桥接模式详解

　　介绍

　　桥接模式（Bridge）将抽象部分与它的实现部分分离，使它们都可以独立地变化。

　　正文

　　桥接模式最常用在事件监控上，先看一段代码：

复制代码代码如下:

　　addEvent(element, 'click', getBeerById);

　　function getBeerById(e) {

　　var id = this.id;

　　asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {

　　// Callback response.

　　console.log('Requested Beer: ' + resp.responseText);

　　});

　　}

　　上述代码，有个问题就是getBeerById必须要有浏览器的上下文才能使用，因为其内部使用了this.id这个属性，如果没用上下文，那就歇菜了。所以说一般稍微有经验的程序员都会将程序改造成如下形式：

复制代码代码如下:

　　function getBeerById(id, callback) {

　　// 通过ID发送请求，然后返回数据

　　asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {

　　// callback response

　　callback(resp.responseText);

　　});

　　}

　　实用多了，对吧？首先ID可以随意传入，而且还提供了一个callback函数用于自定义处理函数。但是这个和桥接有什么关系呢？这就是下段代码所要体现的了：

复制代码代码如下:

　　addEvent(element, 'click', getBeerByIdBridge);

　　function getBeerByIdBridge (e) {

　　　　getBeerById(this.id, function(beer) {

　　　　　　console.log('Requested Beer: '+beer);

　　});

　　}

　　这里的getBeerByIdBridge就是我们定义的桥，用于将抽象的click事件和getBeerById连接起来，同时将事件源的ID，以及自定义的call函数（console.log输出）作为参数传入到getBeerById函数里。

　　这个例子看起来有些简单，我们再来一个复杂点的实战例子。

　　实战XHR连接队列

　　我们要构建一个队列，队列里存放了很多ajax请求，使用队列（queue）主要是因为要确保先加入的请求先被处理。任何时候，我们可以暂停请求、删除请求、重试请求以及支持对各个请求的订阅事件。

　　基础核心函数

　　在正式开始之前，我们先定义一下核心的几个封装函数，首先第一个是异步请求的函数封装：

复制代码代码如下:

　　var asyncRequest = (function () {

　　function handleReadyState(o, callback) {

　　var poll = window.setInterval(

　　function () {

　　if (o && o.readyState == 4) {

　　window.clearInterval(poll);

　　if (callback) {

　　callback(o);

　　}

　　);

　　}

　　var getXHR = function () {

　　var http;

　　try {

　　http = new XMLHttpRequest;

　　getXHR = function () {

　　return new XMLHttpRequest;

　　};

　　}

　　catch (e) {

　　var msxml = [

　　'MSXML2.XMLHTTP.3.0',

　　'MSXML2.XMLHTTP',

　　'Microsoft.XMLHTTP'

　　];

　　for (var i = 0, len = msxml.length; i < len; ++i) {

　　try {

　　http = new ActiveXObject(msxml[i]);

　　getXHR = function () {

　　return new ActiveXObject(msxml[i]);

　　};

　　break;

　　}

　　catch (e) { }

　　}

　　return http;

　　};

　　return function (method, uri, callback, postData) {

　　var http = getXHR();

　　http.open(method, uri, true);

　　handleReadyState(http, callback);

　　http.send(postData || null);

　　return http;

　　};

　　})();

　　上述封装的自执行函数是一个通用的Ajax请求函数，相信属性Ajax的人都能看懂了。

　　接下来我们定义一个通用的添加方法（函数）的方法：

复制代码代码如下:

　　Function.prototype.method = function (name, fn) {

　　this.prototype[name] = fn;

　　return this;

　　};

　　最后再添加关于数组的2个方法，一个用于遍历，一个用于筛选：

复制代码代码如下:

　　if (!Array.prototype.forEach) {

　　Array.method('forEach', function (fn, thisObj) {

　　var scope = thisObj || window;

　　for (var i = 0, len = this.length; i < len; ++i) {

　　fn.call(scope, this[i], i, this);

　　}

　　});

　　}

　　if (!Array.prototype.filter) {

　　Array.method('filter', function (fn, thisObj) {

　　var scope = thisObj || window;

　　var a = [];

　　for (var i = 0, len = this.length; i < len; ++i) {

　　if (!fn.call(scope, this[i], i, this)) {

　　continue;

　　}

　　a.push(this[i]);

　　}

　　return a;

　　});

　　}

　　因为有的新型浏览器已经支持了这两种功能（或者有些类库已经支持了），所以要先判断，如果已经支持的话，就不再处理了。

　　观察者系统

　　观察者在队列里的事件过程中扮演着重要的角色，可以队列处理时（成功、失败、挂起）订阅事件：

复制代码代码如下:

　　window.DED = window.DED || {};

　　DED.util = DED.util || {};

　　DED.util.Observer = function () {

　　this.fns = [];

　　}

　　DED.util.Observer.prototype = {

　　subscribe: function (fn) {

　　this.fns.push(fn);

　　unsubscribe: function (fn) {

　　this.fns = this.fns.filter(

　　function (el) {

　　if (el !== fn) {

　　return el;

　　}

　　);

　　fire: function (o) {

　　this.fns.forEach(

　　function (el) {

　　el(o);

　　}

　　);

　　}

　　};

　　队列主要实现代码

　　首先订阅了队列的主要属性和事件委托：

复制代码代码如下:

　　DED.Queue = function () {

　　// 包含请求的队列.

　　this.queue = [];

　　// 使用Observable对象在3个不同的状态上，以便可以随时订阅事件

　　this.onComplete = new DED.util.Observer;

　　this.onFailure = new DED.util.Observer;

　　this.onFlush = new DED.util.Observer;

　　// 核心属性，可以在外部调用的时候进行设置

　　this.retryCount = 3;

　　this.currentRetry = 0;

　　this.paused = false;

　　this.timeout = 5000;

　　this.conn = {};

　　this.timer = {};

　　};

　　然后通过DED.Queue.method的链式调用，则队列上添加了很多可用的方法：

复制代码代码如下:

　　DED.Queue.

　　method('flush', function () {

　　// flush方法

　　if (!this.queue.length > 0) {

　　return;

　　}

　　if (this.paused) {

　　this.paused = false;

　　return;

　　}

　　var that = this;

　　this.currentRetry++;

　　var abort = function () {

　　that.conn.abort();

　　if (that.currentRetry == that.retryCount) {

　　that.onFailure.fire();

　　that.currentRetry = 0;

　　} else {

　　that.flush();

　　}

　　};

　　this.timer = window.setTimeout(abort, this.timeout);

　　var callback = function (o) {

　　window.clearTimeout(that.timer);

　　that.currentRetry = 0;

　　that.queue.shift();

　　that.onFlush.fire(o.responseText);

　　if (that.queue.length == 0) {

　　that.onComplete.fire();

　　return;

　　}

　　// recursive call to flush

　　that.flush();

　　};

　　this.conn = asyncRequest(

　　this.queue[0]['method'],

　　this.queue[0]['uri'],

　　callback,

　　this.queue[0]['params']

　　);

　　}).

　　method('setRetryCount', function (count) {

　　this.retryCount = count;

　　}).

　　method('setTimeout', function (time) {

　　this.timeout = time;

　　}).

　　method('add', function (o) {

　　this.queue.push(o);

　　}).

　　method('pause', function () {

　　this.paused = true;

　　}).

　　method('dequeue', function () {

　　this.queue.pop();

　　}).

　　method('clear', function () {

　　this.queue = [];

　　});

　　代码看起来很多，折叠以后就可以发现，其实就是在队列上定义了flush, setRetryCount, setTimeout, add, pause, dequeue, 和clear方法。

　　简单调用

复制代码代码如下:

　　var q = new DED.Queue;

　　// 设置重试次数高一点，以便应付慢的连接

　　q.setRetryCount(5);

　　// 设置timeout时间

　　q.setTimeout(1000);

　　// 添加2个请求.

　　q.add({

　　method: 'GET',

　　uri: '/path/to/file.php?ajax=true'

　　});

　　q.add({

　　method: 'GET',

　　uri: '/path/to/file.php?ajax=true&woe=me'

　　});

　　// flush队列

　　q.flush();

　　// 暂停队列，剩余的保存

　　q.pause();

　　// 清空.

　　q.clear();

　　// 添加2个请求.

　　q.add({

　　method: 'GET',

　　uri: '/path/to/file.php?ajax=true'

　　});

　　q.add({

　　method: 'GET',

　　uri: '/path/to/file.php?ajax=true&woe=me'

　　});

　　// 从队列里删除最后一个请求.

　　q.dequeue();

　　// 再次Flush

　　q.flush();

　　桥接呢？

　　上面的调用代码里并没有桥接，那桥呢？看一下下面的完整示例，就可以发现处处都有桥哦：

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

　　"http://www.w3.org/TR/html4/strict.dtd">

　　<html>

　　<head>

　　<title>Ajax Connection Queue</title>

　　addEvent(window, 'load', function () {

　　// 实现.

　　var q = new DED.Queue;

　　q.setRetryCount(5);

　　q.setTimeout(3000);

　　var items = $('items');

　　var results = $('results');

　　var queue = $('queue-items');

　　// 在客户端保存跟踪自己的请求

　　var requests = [];

　　// 每个请求flush以后，订阅特殊的处理步骤

　　q.onFlush.subscribe(function (data) {

　　results.innerHTML = data;

　　requests.shift();

　　queue.innerHTML = requests.toString();

　　});

　　// 订阅时间处理步骤

　　q.onFailure.subscribe(function () {

　　results.innerHTML += ' <span style="color:red;">Connection Error!</span>';

　　});

　　// 订阅全部成功的处理步骤x

　　q.onComplete.subscribe(function () {

　　results.innerHTML += ' <span style="color:green;">Completed!</span>';

　　});

　　var actionDispatcher = function (element) {

　　switch (element) {

　　case 'flush':

　　q.flush();

　　break;

　　case 'dequeue':

　　q.dequeue();

　　requests.pop();

　　queue.innerHTML = requests.toString();

　　break;

　　case 'pause':

　　q.pause();

　　break;

　　case 'clear':

　　q.clear();

　　requests = [];

　　queue.innerHTML = '';

　　break;

　　}

　　};

　　var addRequest = function (request) {

　　var data = request.split('-')[1];

　　q.add({

　　method: 'GET',

　　uri: 'bridge-connection-queue.php?ajax=true&s=' + data,

　　params: null

　　});

　　requests.push(data);

　　queue.innerHTML = requests.toString();

　　};

　　addEvent(items, 'click', function (e) {

　　var e = e || window.event;

　　var src = e.target || e.srcElement;

　　try {

　　e.preventDefault();

　　}

　　catch (ex) {

　　e.returnValue = false;

　　}

　　actionDispatcher(src.id);

　　});

　　var adders = $('adders');

　　addEvent(adders, 'click', function (e) {

　　var e = e || window.event;

　　var src = e.target || e.srcElement;

　　try {

　　e.preventDefault();

　　}

　　catch (ex) {

　　e.returnValue = false;

　　}

　　addRequest(src.id);

　　});

　　</script>

　　body

　　{

　　font: 100% georgia,times,serif;

　　}

　　h1, h2

　　{

　　font-weight: normal;

　　}

　　#queue-items

　　{

　　height: 1.5em;

　　}

　　#add-stuff

　　{

　　padding: .5em;

　　background: #ddd;

　　border: 1px solid #bbb;

　　}

　　#results-area

　　{

　　padding: .5em;

　　border: 1px solid #bbb;

　　}

　　</style>

　　</head>

　　<h1>

　　异步联接请求</h1>

　　</div>

　　<h2>向队列里添加新请求</h2>

　　</ul>

　　</div>

　　<li><a href="#" id="flush">Flush</a></li>

　　<li><a href="#" id="dequeue">出列Dequeue</a></li>

　　<li><a href="#" id="pause">暂停Pause</a></li>

　　<li><a href="#" id="clear">清空Clear</a></li>

　　</ul>

　　<h2>

　　结果:

　　</h2>

　　</div>

　　</body>

　　</html>

　　在这个示例里，你可以做flush队列，暂停队列，删除队列里的请求，清空队列等各种动作，同时相信大家也体会到了桥接的威力了。

　　总结

　　桥接模式的优点也很明显，我们只列举主要几个优点：

　　1.分离接口和实现部分，一个实现未必不变地绑定在一个接口上，抽象类（函数）的实现可以在运行时刻进行配置，一个对象甚至可以在运行时刻改变它的实现，同将抽象和实现也进行了充分的解耦，也有利于分层，从而产生更好的结构化系统。

　　2.提高可扩充性

　　3.实现细节对客户透明，可以对客户隐藏实现细节。

　　同时桥接模式也有自己的缺点：

　　大量的类将导致开发成本的增加，同时在性能方面可能也会有所减少。

教程首页更多教程