Analyse von Kettenaufrufen in JS-Entwurfsmustern

Dieses Mal werde ich Ihnen eine Analyse der Verwendung von Kettenaufrufen in JS Designmustern bringen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Kettenaufrufen in JS-Designmustern? Werfen wir einen Blick darauf.

Jeder, der jquery geschrieben hat, weiß vielleicht, dass der folgende Code problemlos in jquery verwendet werden kann:

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

Die aufrufende Methode von jquery ist ein Kettenaufruf. Aus dem obigen Code können wir ersehen, dass wir, wenn wir keine Kettenaufrufe verwenden, viel wiederholten Code hinzufügen werden, der besonders redundant ist. Durch die Verkettung von Aufrufen können wir viel Code einsparen und der Code sieht eleganter und ordentlicher aus. Lassen Sie uns als Nächstes besprechen, wie Sie eine Bibliothek implementieren, die Kettenaufrufe unterstützt.

Jeder, der die Prototypenkette kennt, weiß, dass die vom Konstruktor generierte Instanz auf die Eigenschaften und Methoden ihres Prototypobjekts zugreifen kann Die Methode gibt schließlich dies zurück (die Instanz, in der die Methode aufgerufen wird), und die Prototypmethode kann in einer Kette aufgerufen werden.

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

Natürlich kann der obige Code tatsächlich optimiert werden, denn vorausgesetzt, dass jemand die $-Funktion bereits in der von Ihnen eingeführten Bibliothek definiert hat, werden Sie mit dem Problem eines Namenskonflikts konfrontiert. Wir können also ein Installationsprogramm dafür hinzufügen

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

Natürlich ist es manchmal keine gute Idee, Anrufe zu verketten. Verkettete Aufrufe eignen sich für Zuweisungsmethoden, sind jedoch für Getter-Methoden nicht sehr geeignet. Denn manchmal möchten wir, dass die Methode einige Daten zurückgibt, anstatt diese zurückzugeben. Für diese Situation gibt es zwei Hauptlösungen: Die eine besteht darin, dies nicht für die Wert-Getter-Methode zurückzugeben, sondern die Daten direkt zurückzugeben. Eine andere Methode besteht darin, Daten über Rückrufmethoden zu verarbeiten:

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

Durch Kettenaufrufe können wir unseren Code vereinfachen und ihn prägnanter und leichter lesbar machen. Und wir müssen nur dafür sorgen, dass alle Methoden der Klasse diesen Wert zurückgeben, damit die Klasse in eine Klasse umgewandelt werden kann, die den Aufruf von Methodenketten unterstützt. Und wenn Sie möchten, dass die Valuer-Methode auch verkettete Aufrufe unterstützt, können Sie Callbacks im Valuer verwenden, um dieses Problem zu lösen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung, wie die Top-Floating-Fixed-Funktion beim Gleiten mit vue+jquery+lodash implementiert wird

JQuery implementiert elektronische Uhr. Detaillierte Erläuterung der Funktionsschritte

Detaillierte Erläuterung der Verwendung von Angular5-Routing-Parametern

Das obige ist der detaillierte Inhalt vonAnalyse von Kettenaufrufen in JS-Entwurfsmustern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!