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

时间: 2024-12-05 23:06:59

JavaScript异步方法队列链的相关文章

JavaScript 异步方法队列链实现代码分析_javascript技巧

在<javascript设计模式>中对这种方法作了比较详细的描述,实现方法的链式调用,只须让在原型中定义的方法都返回调用这些方法的实例对象的引用即可,看看书中的这段代码: 复制代码 代码如下: (function() { function _$(els) { this.elements = []; for (var i = 0, len = els.length; i < len; ++i) { var element = els[i]; if (typeof element == 's

JavaScript 异步方法队列链实现代码分析(1/3)

 代码如下: (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); } }; _$.p

JavaScript中原型链存在的问题解析_javascript技巧

我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function (){ return this.abc; }; function B() { } B.prototype = new A(); // B通过A的实例完成了继承,形成了原型链(B的原型就是A的实例) var b = new B(); b.getAbc(); 关系如下:b(实例) ->B.prototy

JavaScript基于原型链的继承_javascript技巧

Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型链是JavaScript中继承的主要方法. 原型链的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 如果让原型对象等于另一个对象的实例,这样原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中

javascript基于原型链的继承及call和apply函数用法分析_javascript技巧

本文实例讲述了javascript基于原型链的继承及call和apply函数用法.分享给大家供大家参考,具体如下: 1. 继承是面向对象编程语言的一个重要特性,比如Java中,通过extend可以实现多继承,但是JavaScript中的继承方式跟JAVA中有很大的区别,JS中通过原型链的方式实现继承. (1)对象的原型:因为JS中,函数也是对象,因此我们先从对象出发.什么是对象的原型,原型的定义为: 所有通过对象直接量创建的对象都具有同一个函数原型,并且可以通过Object.prototype获

Lisk:一个JavaScript开发者区块链平台

区块链有能力通过多个垂直方向改变人类的日常生活,Lisk基金会联合创始人兼总裁Max Kordek在本文中提到了Lisk,开源的重要性以及如何使区块链更容易访问. Lisk:一个JavaScript开发者区块链平台 ▲Max Kordek JAXenter:你认为区块链会如何影响人类的日常生活? Max Kordek:区块链技术有能力改变人类在多个垂直行业的日常生活.人们已经习惯于使用的社交网络,游戏平台和金融应用程序的技术都可以使用区块链进行改进.最终用户可能不会注意到任何表面上的变化,但会受

javascript prototype 原型链_prototype

JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理解为C++的prototype那种预先声明的概念. JavaScript 的所有function类型的对象都有一个prototype属性.这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法.既然prototype是对象的"原型",那么由该函数构造出来的对象应该都会具有这个"原型"的特性.事实上,在构造函数

javascript的队列,优先队列,循环队列

按书上的来弄的.慢慢理解了. function Queue() { var items = []; this.enqueue = function(element){ items.push(element); } this.dequeue = function(){ return items.shift(); } this.front = function(){ return items[0]; } this.isEmpty = function(){ return items.length =

javascript 作用域、作用域链理解

JavaScript作用域就是变量和函数的可访问范围. 1.变量作用域    在JavaScript中,变量作用域分为全局作用域和局部作用域.     全局作用域       任何地方都可以定义拥有全局作用域的变量       1.没有用var声明的变量(除去函数的参数)都具有全局作用域,成为全局变量,所以声明局部变量必须要用var       2.window的所有属性都具有全局作用域       3.最外层函数体外声明的变量也具有全局作用域 var globalScope="globalSc