Promise是CommonJS的规范之一,拥有resolve、reject、done、fail、then等方法,能够帮助我们控制代码的流程,避免函数的多层嵌套。如今异步在web开发中越来越重要,对于开发人员来说,这种非线性执行的编程会让开发者觉得难以掌控,而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象,年底即将发布的ES6也将原生实现Promise。
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能。
现在就更进一步,完成一个能够一张一张的连续图片加载的功能。
功能:
1.一张一张加载图片。
2.加载错误,超时后显示加载失败图片。
对于功能的要求,肯定会存在对加载状态事件的处理以及完成时回调函数的处理,这样不仅会造成代码上的混乱,甚至破坏各种原则,就不再用普通的方法去写了。针对这种状态通知的特点,比较合适采用promise架构进行处理,promise本质上就是订阅发布设计模式的一种,当前这个功能就用jquery自带的promise进行开发。
1.完成一个加载图片的代理创建函数,可以生成一个带有加载超时、失败、成功、取消监控能力的代理。
图片元素上设置
图片
loadImg(eleImg,src);
}).fail(function(msg){
//加载失败后,往
图片元素上设置失败
图片
loadImg(eleImg,'load
Failed.jpg');
});
loadImg(eleImg,'loading.gif');
imgCache.src = src;
//开始进行超时加载监控
beginTimeoutWatcher();
return dfd.promise();
};
}
其中,通过以下的方式创建了一个Deferred对象
Deferred对象通过resolve方法触发完成事件,使用done方法响应完成事件。
加载成功时的完成事件。
以及加载完成时的响应处理,就是把图片设到元素上,下面的代码是上面链式写法的拆解。
图片元素上设置
图片
loadImg(eleImg,src);
});
Defferred对象通过reject方法触发拒绝事件,使用fail方法响应拒绝事件,表示加载失败。
在加载超时,终止,异常时的拒绝事件。
以及加载失败时的响应处理,设置失败图片。
图片元素上设置失败
图片
loadImg(eleImg,'load
Failed.jpg');
});
在代理函数的最后,返回deferred的promise对象,用于给调用的地方监控加载的完成和失败态,以便于下一张图片的加载。
return dfd.promise();
2.一张一张的连续加载
图片
//参数:
// srcs:
图片路径数组
function doLoadImgs(srcs){
var index = 0;
(function loadOneByOne(){
//
退出条件
if(!(s = srcs[index++])) {
return;
}
var eleImg = createImgElement();
document.getElementById('imgContainer').appendChild(eleImg);
//创建一个加载代理
函数
var loadImgProxy = createLoadImgProxy();
//在当前
图片加载或失败后,递归
调用,加载下一张
loadImgProxy(eleImg,s).always(loadOneByOne);
})();
}
做一个loadOneByOne的加载递归函数。
内部先创建一个加载代理,在代理加载完图片,不管是成功还是失败后,递归调用loadOneByOne函数加载下一张图片。
关键就在于代理函数返回的promise对象,使用.always方法可在加载完成后(成功或失败)进行loadOneByOne递归调用加载下一张。
至此完成。
采用了promise模式后,callback函数不见了,维护状态的函数和内部变量也不见了,代码更清晰简单,使得代理函数和本地函数之间的一致性得到保护。
完整代码:
相关文章
jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...