Javasript设计模式之链式调用

Posted 陈陈jg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javasript设计模式之链式调用相关的知识,希望对你有一定的参考价值。

写过jquery的可能都知道,jquery里面可以很方便的使用以下代码:

// 不使用链式调用
const element = $(ele);
element.addClass(‘red‘);
element.removeClass(‘green‘);
element.show();

// 链式调用
$(ele)
  .addClass(‘red‘)
  .removeClass(‘green‘)
  .show();

而jquery这种调用方式就是链式调用。我们可以从上述代码看出来,如果不使用链式调用的话,那么我们会增加很多重复的代码,而且特别冗余。而通过链式调用,我们可以节省很多代码,并且代码看起来更加优雅和整洁。那么,接下来,我们来讨论下如何实现一个支持链式调用的库。

了解过原型链的人都知道,由构造函数生成的实例都可以访问其原型对象的属性和方法,因此,我们让定义在原型对象的方法最后都返回this(调用该方法的实例),就可以对原型方法进行链式调用。

// 通过立即执行函数,声明了一个_$函数,并且将一个$函数挂载到window上,并且每次调用$()的时候,返回的其实是个_$实例,由于原型对象方法里,执行最后都会返回一个this,因此就可以执行链式调用。
(function () {
  // 构造函数
  function _$(selector) {
    // ...
  }

  _$.prototype = {
    addClass: function (className) {
      // ...
      return this;
    },
    removeClass: function (className) {
      // ...
      return this;
    },
    show: function () {
      // ...
      return this;
    }
  };

  _$.prototype.constructor = _$;

  // 每次调用$()的时候,返回的其实是个_$实例
  window.$ = function () {
    return new _$(arguments);
  }
})();

// 通过这种方式,我们就可以直接使用$的链式调用
$(ele)
  .addClass(‘red‘)
  .removeClass(‘green‘)
  .show();

当然,上述代码其实可以进行优化一下,因为假设你引入的库里,已经有人定义了$函数,那么就会面临着命名冲突的问题。所以,我们可以为其增加一个安装器

(function () {
  // 构造函数
  function _$(selector) {
    // ...
  }

  _$.prototype = {
    addClass: function (className) {
      // ...
      return this;
    },
    removeClass: function (className) {
      // ...
      return this;
    },
    show: function () {
      // ...
      return this;
    }
  };

  _$.prototype.constructor = _$;

  // 增加一个安装器
  window.installHelper = function (scope, interface) {
    scope[interface] = function () {
      return new _$(arguments);
    }
  }
})();

// 而用户就可以这样使用它来自定义挂载对象以及其命名
installHelper(window, ‘$‘);

$(ele).show();

当然,有时候链式调用并不是一个好的主意。链式调用适用于赋值器方法,但是对于取值器方法的话,就不是很友好。因为我们有时候是想要方法返回一些数据,而不是返回一个this。对于这种情况的话,主要有两种解决方法,一种是对于取值器方法就不返回this,直接返回数据。而另一种方法呢,则是通过回调方法来处理数据:

// 第一种方法,当遇到取值器,则直接返回数据
(function () {
  // 构造函数
  function _$(selector) {
    this.ele = document.querySelector(selector);
    // ...
  }

  _$.prototype = {
    addClass: function (className) {
      // ...
      return this;
    },
    // 取值器
    getClass: function () {
      // ...
      return this.ele.className;
    }
  };

  _$.prototype.constructor = _$;
})();

// 第二种方式,通过回调的方式来处理数据
(function () {
  // 构造函数
  function _$(selector) {
    this.ele = document.querySelector(selector);
    // ...
  }

  _$.prototype = {
    addClass: function (className) {
      // ...
      return this;
    },
    getClass: function (cb) {
      // ...
      cb.call(this, this.ele.className);
      return this;
    }
  };

  _$.prototype.constructor = _$;
})();

通过链式调用,我们可以简化我们的代码,让代码更加简洁易读。而我们只需要让类所有的方法都返回this值,就可以让该类变化一个支持方法链式调用的类。而如果要让取值器方法也支持链式调用,就可以在取值器里使用回调的方式来解决这个问题。

以上是关于Javasript设计模式之链式调用的主要内容,如果未能解决你的问题,请参考以下文章

Android之链式调用(方法链)

《源码中的设计模式》之建造者模式——链式调用

JUC并发编程 共享模式之工具 JUC CountdownLatch(倒计时锁) -- CountdownLatch应用(等待多个线程准备完毕( 可以覆盖上次的打印内)等待多个远程调用结束)(代码片段

如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

变种 Builder 模式:优雅的对象构建方式

underscore 系列之链式调用