JavaScript 異步方法隊列鏈

在javascript中，方法的鏈式調(diào)用很流行，使用jQuery的朋友對此一定深有體會。在《javascript設(shè)計模式》中對這種方法作了比較詳細的描述，實現(xiàn)方法的鏈式調(diào)用，只須讓在原型中定義的方法都返回調(diào)用這些方法的實例對象的引用即可，看看書中的這段代碼：

(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”結(jié)束，這就會將調(diào)用方法的對象傳遞給鏈上的下一個方法。但是，如果我們要操作的數(shù)據(jù)是通過異步請求來獲得的，如何保持方法的鏈式調(diào)用呢？Dustin Diaz為我們提供了一種方法來保證方法的鏈式調(diào)用，他也是《javascript設(shè)計模式》一書的作者之一。

他首先構(gòu)建了一個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);    }  }};

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈