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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈