JS-Kettenaufruf (mit Code)

Dieses Mal bringe ich Ihnen JS-Kettenaufrufe (mit Code). Was sind die Vorsichtsmaßnahmen bei der Verwendung von JS-Kettenaufrufen?

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:

So beheben Sie den Fehler beim Konfigurieren des Verpackungsdateipfads

So binden Sie die Richtungstasten um die Div-Bewegung zu steuern

Das obige ist der detaillierte Inhalt vonJS-Kettenaufruf (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!