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

们要构建一个队列,队列里存放了很多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. HillStone上网认证客户端

    公司上网认证服务器从原来网康变更成山石(HillStone),原来网康是有认证客户端的,运行在系统托盘区,现在的Hillstone是通过网页页面认证的,要上网,这个认证页面就需要一直打开在那里.碰到异 ...

  2. Form1是父,form2是子,2的出现(覆盖在1的上面)不耽误1的操作

    //在form1的点击事件中 form2 f2=new form2(); f2.owner=this;//很重要 f2.show();

  3. Android 通过http访问服务器

    目前Android 与服务器交互有两种方式:1.Socket 2. Http : 但由于Http的封装性以及性能比socket要好,所以推荐使用http方式和服务器交互: 通过http访问服务器有三种 ...

  4. 【转】Jqgrid学习之数据

    jqGrid可支持的数据类型:xml.json.jsonp.local or clientSide.xmlstring.jsonstring .script.function (…). Json数据 ...

  5. Struts2之Struts2的标签库

    前言: Struts2提供了大量的标签 ,用来帮助开发表现层页面,这些表现一方面解决了美观性的需求,因为它们具有html标签一样的外观,另一方面它们解决了功能性的需求, 因为它们具有jsp脚本一样的逻 ...

  6. 学习将码云账号和git连接,并且创建一个项目

    一顿操作猛如虎,哈哈 参考网址:https://git-scm.com/book/zh/v1/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E7%9A%84-Git-%E7 ...

  7. sklearn pipeline

    sklearn.pipeline pipeline的目的将许多算法模型串联起来,比如将特征提取.归一化.分类组织在一起形成一个典型的机器学习问题工作流. 优点: 1.直接调用fit和predict方法 ...

  8. String(Java版本)

    import java.io.UnsupportedEncodingException; public class Driver { public static void main(String[] ...

  9. 班级作业:Java Web环境的搭建

    Java Web环境的搭建 一.开发所需工具.(根据你的电脑以及系统选择合适的版本下载) 1.JDK .下载链接:https://www.oracle.com/technetwork/java/jav ...

  10. hbase简单操作

    hbase有hbase shell以及hbase 客户端api两种方式进行hbase数据库操作: 首先,hbase shell是在linux命令行进行操作,输入hbase shell命令,进入shel ...