javascript 接口运用——等待者模式

最新推荐文章于 2023-08-17 15:16:15 发布

cdcdhj

最新推荐文章于 2023-08-17 15:16:15 发布

阅读量155

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/120679043

版权

javascript学习日记专栏收录该内容

127 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script language="javascript">
		//等待对象
		var Waiter=function(){
			var dfd=[],//注册了等待对象的容器
			doneArr=[],//成功回调方法容器
			failArr=[],//失败后回调方法容器
			slice=[].slice,
			that=this;//缓存对象
			var Primise=function(){//创建对象
				this.resolved=false;//成功属性
				this.rejected=false;//失败属性
			}
			Primise.prototype={
				resolve:function(){//成功方法函数
					this.resolved=true;
					if(!dfd.length)
					return;
					for(var i=dfd.length-1;i>=0;i--){
						if(dfd[i]&&!dfd[i].resolved&&dfd[i].rejected){
							return;
						}
						dfd.splice(i,1);
					}
					_exec(doneArr);//回调执行方法
				},
				reject:function(){//失败方法
					this.rejected=true;
					if(!dfd.length){
						return;
					}
					dfd.splice(0);
					_exec(failArr);
				}
			}
			that.Deferred=function(){
				return new Primise();
			};
			//私有方法，执行成功或失败的函数回调
			function _exec(arr){
				var i=0,len=arr.length;
				for(;i<len;i++){
					try{
						arr[i]&&arr[i]();
					}catch(e){
						throw new Error('回调方法exec有错误');
					}
				}
			}
			that.when=function(){//公有方法，执行监听，参数为要监控的对象
				dfd=slice.call(arguments);
				var i=dfd.length;
				for(--i;i>=0;i--){
					if(!dfd[i]||dfd[i].rejected||dfd[i].resolved||!dfd[i] instanceof Primise){
						dfd.splice(i,1);
					}  
				}
				return that;
			};
			that.done=function(){//公有方法，执行成功回调函数添加方法
				doneArr=doneArr.concat(slice.call(arguments));//向成功容器中添加函数方法
				return that;
			};
			that.fail=function(){//公有方法，执行失败回调函数添加方法
				failArr=failArr.concat(slice.call(arguments));//向失败容器中添加函数方法
				return that;
			}
		};
		var waiter=new Waiter();//创建对象
		var dtd=waiter.Deferred();//创建监听对象
		var ajaxGet=function(url,success,fail){
			var createXHR=(function(){
				if(typeof XMLHttpRequest!='undefined'){
					return function(){
						return new XMLHttpRequest();
						}
					}else if(typeof ActiveXObject!='undefined'){
						return function(){
							return new ActiveXObject();
						}
				}else{
					return function(){
						throw new Error('XHR创建不成功');
					}
				}
			})();
			var xhr=new createXHR();
			
			xhr.onload=function(event){
				if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
					console.log(xhr.responseText);
					success&&success();
					dtd.resolve();//执行成功
				}else{
					dtd.reject();//执行失败
					fail&&fail();
					throw new Error('获取数据不成功:'+xhr.status);
				}
			};
			xhr.open('get',url,true);
			xhr.send(null);
		};
		ajaxGet('example.txt',function(){
			console.log('成功');
		},function(){
			console.log('失败');
		});
		waiter.when(ajaxGet).done(function(){//添加监控对象ajaxGet,成功时反回回调函数，失败返回回调函数
			console.log('监控成功，成功回调函数');
		}).fail(function(){
			console.log('监控失败，回调函数失败');
		});
		</script>
	</body>
</html>

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 接口运用——等待者模式

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script language="javascript"> //等待对象 var Waiter=function(){ var dfd=[],//注册了等待对象的容器 doneArr=[],//成
复制链接

扫一扫

专栏目录