JSデザインパターンでチェーンコールを使用する方法

今回は、チェーン呼び出しで JS デザイン パターン を使用する方法と、チェーン コールで JS デザイン パターン を使用する場合の 注意事項 を​​説明します。以下は実際のケースです。

jquery を書いたことがある人は、次のコードを jquery で簡単に使用できることをご存知かもしれません:

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

jquery の呼び出し方法はチェーン呼び出しです。上記のコードから、チェーン呼び出しを使用しない場合、繰り返しコードが大量に追加され、特に冗長になることがわかります。呼び出しを連鎖することにより、多くのコードを節約でき、コードはよりエレガントできれいに見えます。そこで次に、チェーン呼び出しをサポートするライブラリを実装する方法について説明します。

プロトタイプチェーンを知っている人なら誰でも、コンストラクターによって生成されたインスタンスがそのプロトタイプオブジェクトのプロパティとメソッドにアクセスできることを知っています。したがって、プロトタイプオブジェクトで定義されたメソッドが最後にこれを返すようにします(メソッド インスタンスを呼び出す)、プロトタイプ メソッドへの呼び出しを連鎖させることができます。

// 通过立即执行函数，声明了一个_$函数，并且将一个$函数挂载到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();

もちろん、呼び出しを連鎖させることが良い考えでない場合もあります。連鎖呼び出しはアサイナー メソッドには適していますが、ゲッター メソッドにはあまり適していません。メソッドがこれを返すのではなく、何らかのデータを返したい場合があるからです。この状況に対しては、主に 2 つの解決策があります。1 つは、値ゲッター メソッドに対してこれを返さず、データを直接返すことです。もう 1 つの方法は、コールバック メソッドを通じてデータを処理することです:

// 第一种方法，当遇到取值器，则直接返回数据
(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 = _$;
})();

チェーン呼び出しを通じて、コードを簡素化し、より簡潔で読みやすくすることができます。そして、クラスのすべてのメソッドがこの値を返すようにするだけで、クラスをメソッド チェーン呼び出しをサポートするクラスに変換できます。また、評価メソッドで連鎖呼び出しもサポートしたい場合は、評価メソッドでコールバックを使用してこの問題を解決できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Vue を使用してドラッグ アンド ドロップ効果を実現する方法

Node.js+コンソール出力ログ ファイルの分析例

以上がJSデザインパターンでチェーンコールを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。