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');

查看demo頁看看效果。

如果一個隊列中有很多項等待對服務器端的響應進行操作，該如何處置？作者構建了這樣一個方法，值得參考：

以下為引用的內容：

function fetchTweet(url) {