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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠