针对该模式的例子现在不是很理解,写下来慢慢熟悉。

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

(1)异步请求的函数封装

/*
* XHR连接对象
* 把请求的函数做成一个序列,按照执行序列来完成每一个序列项的任务
*
* */
(function () {
//(1)一个request请求
var asyncRequest=(function () {
//
function handleReadyState(o,callBack) {
//设置浏览器每隔半秒执行一次函数
var poll=window.setInterval(function () {
//4表示:交互完成
if(o && o.readyState==){
//这种写法类似长连接的写法,如果不成功总是请求你(半秒请求一次)
window.clearInterval(poll);
if(callBack){
callBack(o);
}
}
},)
} //(2)获取XHR的工厂
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=;i<msxml.length;i++){
try {
http=new ActiveXObject(msxml[i]);
getXHR=function () {
return new ActiveXObject(msxml[i]);
};
break;
}catch(e){}
}
}
return http;
}
//(3)核心函数 使用返回一个单体
return function (method,url,callback,postData) {
var http=getXHR();
http.open(method,url,true);//打开
handleReadyState(http,callback);//回掉连接直到成功
http.send(postData||null);
}
})();
//(4)为了能添加链式调用的模板
Function.prototype.method=function (name,fn) {
this.prototype[name]=fn;
return this;
} //扩展array方法
//循环
if(!Array.prototype.forEach){
Array.method("forEach",function (fn,thisObj) {
var scope=thisObj||window;
for(var i=;i<this.length;i++){//Array
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=;i<this.length;i++){
if(!fn.call(scope,this[i],i,this)){//???
continue;
}
a.push(this[i]);
}
})
return a;
}
})()

(2)建立一个简单的观察者模式

/*
*一个简答简单的观察者模式
* */
(function () {
//1,利用空对象来设立命名空间
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=[];
//成功观察
this.onComplete=function () {new DED.util.Observer();}
//失败的观察
this.onFailure=function () {new DED.util.Observer();}
//刷新观察
this.onFlush=function () {new DED.util.Observer();}
//重复次数
this.retryCount=;
//当前执行次数
this.currentRetry=;
//停顿
this.paused=false;
//请求超时时间
this.timeout=;
//连接对象
this.conn={};
//计时器
this.timer={};
} //静态函数添加
DED.Queue.method("flush",function () {//刷新
if(!this.queue.length>){
return ;
}
//如果是停顿状态,也不刷新
if(this.paused){
this.paused=false;
return ;
}
var self=this;
//当前连接次数+1
this.currentRetry++;
var abort=function () {
//可以停止一个XMLHttpRequest对象的Http请求
self.conn.abort();
if(self.currentRetry==self.retryCount){
//执行失败过的序列
self.onFailure.fire();
//重置当前次数
self.currentRetry=;
}else {
self.flush(); }
//计时器
this.timer=window.setTimeout(abort,this.timeout);
//准备回调
var callback=function (o) {
//清除定时器
window.clearTimeout(self.timer);
//把当前次数清零
self.currentRetry=;
//本着先进先出的原则,把队列反序排序
self.queue.shift();
//执行队列
self.onFlush.fire(o.responseText);
if(self.queue.length==){
//如果队列等于0执行默认的成功队列
self.onComplete().fire();
return ;
}
self.flush();//递归
}
//改变连接对象
this.conn=asyncRequest(
this.queue[]['method'],
callback,
this.queue[]['parmas']
)
}
}).method("setRetryCount",function (count) {
this.retryCount=count;
}).method("setTimeOut",function (time) {
this.timer=time;
}).method("add",function (o) {
this.queue.push(o);
}).method("pause",function () {
this.paused=true;
}).method("clear",function () {
this.queue=[];
}).method("dequeue",function () {//
this.queue.pop();
})
})()

总结

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

  1. 分离接口和实现部分,一个实现未必不变地绑定在一个接口上,抽象类(函数)的实现可以在运行时刻进行配置,一个对象甚至可以在运行时刻改变它的实现,同将抽象和实现也进行了充分的解耦,也有利于分层,从而产生更好的结构化系统。
  2. 提高可扩充性
  3. 实现细节对客户透明,可以对客户隐藏实现细节。

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

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

JavaScript设计模式--桥梁模式--XHR连接队列的更多相关文章

  1. JavaScript设计模式--桥梁模式--引入

    1.使用情况 (1)事件的监控 #1,利用页面的button来选择宠物的例子(思路) button.addEvent(element,"click",getPetByBame); ...

  2. javascript设计模式——组合模式

    前面的话 在程序设计中,有一些和“事物是由相似的子事物构成”类似的思想.组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的.本文将详细介绍组合模式 宏命令 宏 ...

  3. javascript 设计模式-----策略模式

    在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...

  4. JavaScript设计模式 - 迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  5. JavaScript设计模式 - 代理模式

    代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问 代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效 ...

  6. 24种设计模式--桥梁模式【Bridge Pattern】

    今天我要说说我自己,梦想中的我自己,我身价过亿,有两个大公司,一个是房地产公司,一个是服装制造业,这两个公司都很赚钱,天天帮我在累加财富,其实是什么公司我倒是不关心,我关心的是是不是在赚钱,赚了多少, ...

  7. Java设计模式—桥梁模式

    终于又碰到了一个简单点的模式了. 桥梁模式也叫做桥接模式,定义如下:                将抽象和实现解耦,使得两者可以独立地变化. 这句话也太难理解了,桥梁模式是为了解决类继承的缺点而设计 ...

  8. 设计模式--桥梁模式C++实现

    1定义 将抽象和实现解耦,使得两者可以独立变化 2类图 3实现 #pragma once #include<iostream> using namespace std; class Imp ...

  9. JavaScript设计模式-组合模式(表单应用实现)

    书读百遍其义自见 <JavaScript设计模式>一书组合模式在表单中应用,我问你答答案. 注:小编自己根据书中的栗子码的答案,如有错误,请留言斧正. 另:如有转载请注明出处,谢谢啦 &l ...

随机推荐

  1. 【★】Web精彩实战之<智能迷宫>

    JS精彩实战之<智能迷宫>      ---宝贵编程经验分享会--- hello大家好,这里是Web云课堂,之前的一年里我们经历了Html和CSS的系统攻城,此时的你们已经是做静态(动静结 ...

  2. 201521123084 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...

  3. 【Alpha】Daily Scrum Meeting——Day1

    站立式会议照片 每个人的工作分配 成 员 今日计划完成的任务 胡丹丹 学习手机app开发的总体流程以及搭建APP开发所需要的安卓环境,加强Java语言的学习掌握 曾丽君 学习手机app开发的总体流程以 ...

  4. 201521123005 《Java程序设计》 第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  5. 201521123038 《Java程序设计》 第十四周学习总结

    201521123038 <Java程序设计> 第十四周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 接口: DriverManager ...

  6. 201521123048 《java程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  7. 多线程面试题系列(2): CreateThread与_beginthreadex本质区别

    本文将带领你与多线程作第一次亲密接触,并深入分析CreateThread与_beginthreadex的本质区别,相信阅读本文后你能轻松的使用多线程并能流畅准确的回答CreateThread与_beg ...

  8. python读取外部文件

    >>> pd.read_excel('c://111.xlsx') 年度排名 历史排名 电影名称 总票房 总人次 总场次 上映年份 操作 0 1 1 美人鱼 NaN -- -- 20 ...

  9. java: Multiple encodings set for module chunk test "GBK" will be used by compiler

    IDEA 进行编译代码的时候,特别是新项目 特别容易出现 编码错误,但是 File-Encoding中设置的又没有问题,而且maven 是能打包的,就是用 idea 自带的 编译的时候 就会出现提示 ...

  10. Hibernate第一篇【介绍Hibernate,简述ORM,快速入门】

    前言 前面已经学过了Struts2框架了,紧接着就是学习Hibernate框架了-本博文主要讲解介绍Hibernate框架,ORM的概念和Hibernate入门 什么是Hibernate框架? Hib ...