JavaScript设计模式--桥梁模式--XHR连接队列
针对该模式的例子现在不是很理解,写下来慢慢熟悉。
们要构建一个队列,队列里存放了很多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();
})
})()
总结
桥接模式的优点也很明显,我们只列举主要几个优点:
- 分离接口和实现部分,一个实现未必不变地绑定在一个接口上,抽象类(函数)的实现可以在运行时刻进行配置,一个对象甚至可以在运行时刻改变它的实现,同将抽象和实现也进行了充分的解耦,也有利于分层,从而产生更好的结构化系统。
- 提高可扩充性
- 实现细节对客户透明,可以对客户隐藏实现细节。
同时桥接模式也有自己的缺点:
大量的类将导致开发成本的增加,同时在性能方面可能也会有所减少。
JavaScript设计模式--桥梁模式--XHR连接队列的更多相关文章
- JavaScript设计模式--桥梁模式--引入
1.使用情况 (1)事件的监控 #1,利用页面的button来选择宠物的例子(思路) button.addEvent(element,"click",getPetByBame); ...
- javascript设计模式——组合模式
前面的话 在程序设计中,有一些和“事物是由相似的子事物构成”类似的思想.组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的.本文将详细介绍组合模式 宏命令 宏 ...
- javascript 设计模式-----策略模式
在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...
- JavaScript设计模式 - 迭代器模式
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...
- JavaScript设计模式 - 代理模式
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问 代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效 ...
- 24种设计模式--桥梁模式【Bridge Pattern】
今天我要说说我自己,梦想中的我自己,我身价过亿,有两个大公司,一个是房地产公司,一个是服装制造业,这两个公司都很赚钱,天天帮我在累加财富,其实是什么公司我倒是不关心,我关心的是是不是在赚钱,赚了多少, ...
- Java设计模式—桥梁模式
终于又碰到了一个简单点的模式了. 桥梁模式也叫做桥接模式,定义如下: 将抽象和实现解耦,使得两者可以独立地变化. 这句话也太难理解了,桥梁模式是为了解决类继承的缺点而设计 ...
- 设计模式--桥梁模式C++实现
1定义 将抽象和实现解耦,使得两者可以独立变化 2类图 3实现 #pragma once #include<iostream> using namespace std; class Imp ...
- JavaScript设计模式-组合模式(表单应用实现)
书读百遍其义自见 <JavaScript设计模式>一书组合模式在表单中应用,我问你答答案. 注:小编自己根据书中的栗子码的答案,如有错误,请留言斧正. 另:如有转载请注明出处,谢谢啦 &l ...
随机推荐
- 如何在sublime+chrome中调试php代码?
1.搭建php本地运行环境具体点击如何使用phpstudy本地搭建多站点(每个站点对应不同的端口) 2.下载php_xdebug.dll, [5.3版以上的php下载地址]http://pecl.ph ...
- 扫雷游戏制作过程(C#描述):第五节、菜单操作(续)
前言 这里给出教程原文地址. 该项目已经放在github上托管. 发布版已经分享到百度网盘 菜单操作(续) 接着节前一章节的内容,我们继续完善菜单栏的功能. 我们首先,先完善Rank的选项,我们希望我 ...
- 201521123006 《Java程序设计》第3周学习总结
本周学习总结 1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. ...
- 201521123010 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 ①finally 题目4-2 1.1 截图你的提交结果(出现 ...
- 201521123034《Java程序设计》第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- 201521123089 《Java程序设计》第12周学习总结
1. 本周学习总结 1. Input Stream -- 数据提供者可从其中读数据输出流:Output Stream -- 数据接收者可往其中写数据: 2. 字符流底层具体读写操作还是使用字节流: 3 ...
- Mybatis第五篇【Mybatis与Spring整合】
Mybatis与Spring整合 既然我们已经学了Mybatis的基本开发了,接下来就是Mybatis与Spring的整合了! 以下使用的是Oracle数据库来进行测试 导入jar包 aopallia ...
- 关于Linux的loop设备
偶然发现/dev目录里有几个loop设备,一番搜索得知,这是一种伪设备(pseudo-device),它可以把一个文件连接为设备(就像Windows下用虚拟光驱挂载ISO文件). 遂做实验验证: 1. ...
- java自然语言理解demo,源码分享(基于欧拉蜜)
汇率换算自然语言理解功能JAVA DEMO >>>>>>>>>>>>>>>>>>>&g ...
- 使用Spring的隐式注解和装配以及使用SpringTest框架
SpringTestConfiguration 1.加入jar 包spring-test-4.3.9.RELEASE.jar 2.写基本的Component 注意级联状态下 需要给需要调用的属性加入 ...