介绍
桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化。
正文
桥接模式最常用在事件监控上,先看一段代码:
这个例子看起来有些简单,我们再来一个复杂点的实战例子。
实战XHR连接队列
我们要构建一个队列,队列里存放了很多ajax请求,使用队列(queue)主要是因为要确保先加入的请求先被处理。任何时候,我们可以暂停请求、删除请求、重试请求以及支持对各个请求的订阅事件。
基础核心函数 在正式开始之前,我们先定义一下核心的几个封装函数,首先第一个是异步请求的函数封装:
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,true); handleReadyState(http,callback); http.send(postData || null); return http; }; })();
上述封装的自执行函数是一个通用的Ajax请求函数,相信属性Ajax的人都能看懂了。
if (!Array.prototype.filter) { Array.method('filter',thisObj) { var scope = thisObj || window; var a = []; for (var i = 0,len = this.length; i < len; ++i) { if (!fn.call(scope,this)) { continue; } a.push(this[i]); } return a; }); }
观察者系统
观察者在队列里的事件过程中扮演着重要的角色,可以队列处理时(成功、失败、挂起)订阅事件: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); } ); } };
队列主要实现代码
首先订阅了队列的主要属性和事件委托:// 核心属性,可以在外部调用的时候进行设置 this.retryCount = 3; this.currentRetry = 0; this.paused = false; this.timeout = 5000; this.conn = {}; this.timer = {}; };
然后通过DED.Queue.method的链式调用,则队列上添加了很多可用的方法:
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 = []; });
简单调用
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&woe=me' });
// 从队列里删除最后一个请求. q.dequeue(); // 再次Flush q.flush();
桥接呢?
上面的调用代码里并没有桥接,那桥呢?看一下下面的完整示例,就可以发现处处都有桥哦: