首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 作文大全 > 正文

    【JavaScript异步方法队列链】 链队列

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    在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);
        }
      }
    };
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文【JavaScript异步方法队列链】 链队列由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.