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

最新推荐文章于 2024-08-30 14:31:36 发布

cdcdhj

最新推荐文章于 2024-08-30 14:31:36 发布

阅读量210

点赞数

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

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/120679043

版权

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

151 篇文章

订阅专栏

<!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>