你的位置:首页 > Java教程

[Java教程]jquery的promise实践


在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能。

现在就更进一步,完成一个能够一张一张的连续图片加载的功能。

功能:

1.一张一张加载图片。

2.加载错误,超时后显示加载失败图片。

对于功能的要求,肯定会存在对加载状态事件的处理以及完成时回调函数的处理,这样不仅会造成代码上的混乱,甚至破坏各种原则,就不再用普通的方法去写了。针对这种状态通知的特点,比较合适采用promise架构进行处理,promise本质上就是订阅发布设计模式的一种,当前这个功能就用jquery自带的promise进行开发。

 

1.完成一个加载图片的代理创建函数,可以生成一个带有加载超时、失败、成功、取消监控能力的代理。

            function createLoadImgProxy(){        var imgCache = new Image();        var dfd = $.Deferred();        var timeoutTimer;        //开始加载超时监控,超时后进行reject操作        function beginTimeoutWatcher(){          timeoutTimer = setTimeout(function(){            dfd.reject('timeout');          }, 10000);        }        //结束加载超时监控        function endTimeoutWatcher(){          if(!timeoutTimer){            return;          }          clearTimeout(timeoutTimer);        }        //加载完成事件处理,加载完成后进行resolve操作        imgCache.onload = function(){          dfd.resolve(this.src);        };        //加载终止事件处理,终止后进行reject操作        imgCache.onabort = function(){          dfd.reject("aborted");        };        //加载异常事件处理,异常后进行reject操作        imgCache.onerror = function(){          dfd.reject("error");        };        return function(eleImg, src){          dfd.always(function(){            //加载完成或加载失败都要终止加载超时监控            endTimeoutWatcher();          }).done(function(src){            //加载完成后,往图片元素上设置图片            loadImg(eleImg, src);          }).fail(function(msg){            //加载失败后,往图片元素上设置失败图片            loadImg(eleImg, 'loadFailed.jpg');          });          loadImg(eleImg, 'loading.gif');          imgCache.src = src;          //开始进行超时加载监控          beginTimeoutWatcher();          return dfd.promise();        };      }

 其中,通过以下的方式创建了一个Deferred对象

                var dfd = $.Deferred();

 

Deferred对象通过resolve方法触发完成事件,使用done方法响应完成事件。

加载成功时的完成事件。

        imgCache.onload = function(){          dfd.resolve(this.src);        };

以及加载完成时的响应处理,就是把图片设到元素上,下面的代码是上面链式写法的拆解。

          dfd.done(function(src){            //加载完成后,往图片元素上设置图片            loadImg(eleImg, src);          });

 

Defferred对象通过reject方法触发拒绝事件,使用fail方法响应拒绝事件,表示加载失败。

在加载超时,终止,异常时的拒绝事件。

        //开始加载超时监控,超时后进行reject操作        function beginTimeoutWatcher(){          timeoutTimer = setTimeout(function(){            dfd.reject('timeout');          }, 10000);        }        //加载终止事件处理,终止后进行reject操作        imgCache.onabort = function(){          dfd.reject("aborted");        };        //加载异常事件处理,异常后进行reject操作        imgCache.onerror = function(){          dfd.reject("error");        };

以及加载失败时的响应处理,设置失败图片。

          dfd.fail(function(msg){            //加载失败后,往图片元素上设置失败图片            loadImg(eleImg, 'loadFailed.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递归调用加载下一张。

          loadImgProxy(eleImg, s).always(loadOneByOne);

 

至此完成。

采用了promise模式后,callback函数不见了,维护状态的函数和内部变量也不见了,代码更清晰简单,使得代理函数和本地函数之间的一致性得到保护。

 

完整代码:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">  </head>  <body>    <button id='btnLoadImg'>加载图片</button>    <br>    <div id='imgContainer'>    </div>    <br>    <script type='text/javascript' src="./jquery-1.11.3.min.js"></script>    <script type='text/javascript'>      var imgSrcs = [        'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg',        'http://www.newbridgemotorsport.com/files/6413/9945/0406/IMG_3630.jpg',        'http://www.carsceneuk.com/wp-content/uploads/2015/03/88y9989.jpg',        'http://mfiles.sohu.com/20130223/5ff_403b2e7a_7a1f_7f24_66eb_79e3f27d58cf_1.jpg',        'http://img1.imgtn.bdimg.com/it/u=2678963350,1378052193&fm=21&gp=0.jpg'      ];      $(document).ready(function(){        $('#btnLoadImg').bind('click', function(){          doLoadImgs(imgSrcs);        });      });      //创建img标签      //这里用自执行函数加一个闭包,是为了可以创建多个id不同的img标签。      var createImgElement = (function(){        var index = 0;        return function() {          var eleImg = document.createElement('img');          eleImg.setAttribute('width', '200');          eleImg.setAttribute('heght', '150');          eleImg.setAttribute('id', 'img' + index++);          return eleImg;        };      })();      function loadImg(img, src) {        img.src = src;      }      function createLoadImgProxy(){        var imgCache = new Image();        var dfd = $.Deferred();        var timeoutTimer;        //开始加载超时监控,超时后进行reject操作        function beginTimeoutWatcher(){          timeoutTimer = setTimeout(function(){            dfd.reject('timeout');          }, 10000);        }        //结束加载超时监控        function endTimeoutWatcher(){          if(!timeoutTimer){            return;          }          clearTimeout(timeoutTimer);        }        //加载完成事件处理,加载完成后进行resolve操作        imgCache.onload = function(){          dfd.resolve(this.src);        };        //加载终止事件处理,终止后进行reject操作        imgCache.onabort = function(){          dfd.reject("aborted");        };        //加载异常事件处理,异常后进行reject操作        imgCache.onerror = function(){          dfd.reject("error");        };        return function(eleImg, src){          dfd.always(function(){//            alert('always end');            //加载完成或加载失败都要终止加载超时监控            endTimeoutWatcher();          }).done(function(src){//            alert('done end');            //加载完成后,往图片元素上设置图片            loadImg(eleImg, src);          }).fail(function(msg){//            alert('fail end:' + msg);            //加载失败后,往图片元素上设置失败图片            loadImg(eleImg, 'loadFailed.jpg');          });          loadImg(eleImg, 'loading.gif');          imgCache.src = src;          //开始进行超时加载监控          beginTimeoutWatcher();          return dfd.promise();        };      }      //一张一张的连续加载图片      //参数:      // 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);        })();      }    </script>  </body></html>