JavaScript异步方法队列链

       在javascript中，方法的链式调用很流行，使用jQuery的朋友对此一定深有体会。在《javascript设计模式》中对这种方法作了比较详细的描述，实现方法的链式调用，只须让在原型中定义的方法都返回调用这些方法的实例对象的引用即可，看看书中的这段代码：
(function() {
 function _$(els) {
    this.elements = [];
    for (var i = 0, len = els.length; i < len; ++i) {
      var element = els[i];
      if (typeof element == 'string') {
        element = document.getElementById(element);
      }
      this.elements.push(element);
}
 };
 _$.prototype = {
    each: function(fn) {
      for ( var i = 0, len = this.elements.length; i < len; ++i ) {
        fn.call(this, this.elements[i]);
      }
      return this;
    },
    setStyle: function(prop, val) {
      this.each(function(el) {
        el.style[prop] = val;
      });
      return this;
    },
    show: function() {
      var that = this;
      this.each(function(el) {
        that.setStyle('display', 'block');
      });
      return this;
    },
    addEvent: function(type, fn) {
      var add = function(el) {
        if (window.addEventListener) {
          el.addEventListener(type, fn, false);
        }
        else if (window.attachEvent) {
          el.attachEvent('on'+type, fn);
        }
      };
      this.each(function(el) {
        add(el);
      });
      return this;
    }
 };
 window.$ = function() {
    return new _$(arguments);
 };
})();

       可以看到，每个方法都以”return this”结束，这就会将调用方法的对象传递给链上的下一个方法。但是，如果我们要操作的数据是通过异步请求来获得的，如何保持方法的链式调用呢？Dustin Diaz为我们提供了一种方法来保证方法的链式调用，他也是《javascript设计模式》一书的作者之一。

他首先构建了一个Queue对象,即：
function Queue() {
 // store your callbacks
 this._methods = [];
 // keep a reference to your response
 this._response = null;
 // all queues start off unflushed
 this._flushed = false;
}
 
Queue.prototype = {
 // adds callbacks to your queue
 add: function(fn) {
    // if the queue had been flushed, return immediately
    if (this._flushed) {
      fn(this._response);
 
    // otherwise push it on the queue
    } else {
      this._methods.push(fn);
    }
 },
 
 flush: function(resp) {
    // note: flush only ever happens once
    if (this._flushed) {
      return;
    }
    // store your response for subsequent calls after flush()
    this._response = resp;
    // mark that it's been flushed
    this._flushed = true;
    // shift 'em out and call 'em back
    while (this._methods[0]) {
      this._methods.shift()(resp);
    }
 }
};

       然后用它作为工具构建我们的异步方法队列链。有了这个工具，就可以很方便的构建一个从服务器端获取内容并将其附加到选择器中的jQuery plugin。
(function($) {
 
 $.fn.fetch = function(url) {
    var queue = new Queue;
    this.each(function() {
      var el = this;
      queue.add(function(resp) {
        $(el).html(resp);
      });
    });
 
    $.ajax({
      url: url,
      dataType: 'html',
      success: function(html) {
        queue.flush(html);
      }
    });
    return this;
 };
 
})(jQuery);

这样，我们就可以异步的获取内容，并继续我们的链式调用。
$("<div/>")
.fetch('/server/navigation.html')
.addClass('column')
.appendTo('#side');

       如果一个队列中有很多项等待对服务器端的响应进行操作，该如何处置？作者构建了这样一个方法，值得参考：
function fetchTweet(url) {
 this.queue = new Queue;
 this.tweet = "";
 var self = this;
 ajax(url, function(resp) {
    self.tweet = resp;
    self.queue.flush(this);
 });
}
fetchTweet.prototype = {
 
 linkify: function() {
    this.queue.add(function(self) {
      self.tweet = self.tweet.replace(/\b@(\w{1,20}\b/g, '$1');
    });
 return this;
 },
 
 filterBadWords: function() {
    this.queue.add(function(self) {
      self.tweet = self.tweet.replace(/\b(fuck|shit|piss)\b/g, "");
    });
 return this;
 },
 
 appendTo: function(selector) {
    this.queue.add(function(self) {
      $(self.tweet).appendTo(selector);
    });
 return this;
 }
 
};

这样，我们就可以用下面的方式来调用：
fetchTweet(url).linkify().filterBadWords().appendTo('#status');

       到此，我们已经知道了如何实现异步方法链式调用，但在《Asynchronous method queue chaining in JavaScript》底部的一些评论提出的一些问题，值得思考一下。插件$.fn.fetch中仅仅只需将返回的内容附加到元素之中，Queue是否必要？而且，jQuery中的$.fn.load完全可以实现，如果Queue中只用一个回调函数，完全可以这样来写：
(function($) {
 $.fn.fetch = function(url) {
     var queue = new Queue;
     this.each(function() {
      var el = this;
       $.ajax({
 url: url,
 type: 'get',
 dataType: 'json',
 success: function(resp) {
   $(el).html(resp['text1']);
 }
 });
 });
         return this;
        };
 
})(jQuery);

不知你作如何感想？


上一篇：10个糟糕的IE Bug及其修复 

下一篇：说说CSS Hack 和向后兼容 

留下脚印压缩包密码:sosuo8
名字:
全部评论:
申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ JavaScript异步方法队列链 ”的原作者，若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法：email:ahuinan@21cn.com  QQ:106494262

感谢以下网友对网站提出的建议：
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)
文章档案
  • 作者：dishuipiaoxiang
  • 来源：Denis'Blog
  • 日期：2010-5-30 23:25:00
  • 点击：175
网友投票(您觉得这篇文章怎样？)
loadding...请稍侯......

  

  

实用文章总结
文章阅读排行
随便看看
最新评论