Sie schreiben JavaScript und stellen plötzlich mit Entsetzen und Angst fest, dass Sie eine riesige Funktion geschrieben haben. Es ist den Besten von uns passiert. Jetzt kommt der fast unaufhaltsame Drang, die Funktion in kleinere Stücke zu trennen.
Große Funktionen bedeuten viele Verantwortlichkeiten an einem Ort und möglicherweise auch Code-Geruch, also ist es eine gute Idee für sich. Sie möchten die Funktion jedoch so aufteilen, dass sie ihre Bedeutung oder ihren Kontext nicht verliert. Um dies zu tun, müssen Sie an Methodenkettung denken – auch Funktionskettung genannt. Dieser Artikel wird erklären, was ich damit meine.
Voraussetzungen
Bevor wir beginnen, sind hier einige JavaScript-Konzepte, mit denen Sie bereits vertraut sein müssen:
- Pfeilfunktionen
- Array-Methoden
- Asynchrone Funktionen
Die meisten erfahrenen Entwickler haben einige Erfahrungen mit Array -Methoden wie map , reduce und filter . Sie sind wahrscheinlich schon auf so etwas gestoßen:
const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: Methodenkettung tritt auf, wenn Sie mehrere Funktionen mit demselben Objekt und seiner Referenz aufrufen möchten. Im obigen Beispiel gibt die Array-Methode map ein Array zurück, das eine beträchtliche Anzahl von Methoden enthält.
Da Sie eine Referenz zurückgeben, die auf eine Array verweist, haben Sie Zugriff auf alle Eigenschaften von Array . Es ist das gleiche Prinzip, das Sie für Ihre eigene Methode chaining verwenden.
Dies besser verstehen
Ich werde nicht alle Nuancen von this behandeln, aber es ist gut zu verstehen, warum this so funktioniert. Egal wie erfahren Sie sind, das Schlüsselwort Dies kann schwer zu verstehen sein. Es ist oft der Grund, warum die Dinge nicht so funktionieren, wie Sie es erwarten 😅.
Hier ist der Kern: this zeigt immer auf die aktuelle scope oder Instanz, von der aus es aufgerufen wird. Ein Beispiel:
const dog = { is: null, log: () => console.log(this.is), bark() { this.is = "woofing"; this.log(); return this; }, walk() { this.is = "walking"; this.log(); return this; }, eat() { this.is = "eating"; this.log(); return this; }};dog .bark() .eat() .walk(); Wenn Sie eine Funktion wie diese schreiben (kein Wortspiel beabsichtigt), möchten Sie möglicherweise Methoden verketten, die sich auf das Objekt beziehen. Das Objekt dog hat 3 Methoden: walk, bark und eat. Jedes Mal, wenn ich eine seiner Funktionen aufrufe, sollte eine Konsole die Darstellung dessen anzeigen, was der Hund genau in diesem Moment tut.
Aber es gibt ein Problem damit. Wenn Sie es im Browser ausführen, werden Sie feststellen, dass es nicht wie erwartet funktioniert. Das liegt daran, dass Pfeilfunktionen lexikalische Bereiche verwenden, wobei sich this auf den umgebenden Bereich bezieht – in diesem Fall window, nicht auf das Objekt selbst.
Um dies zu beheben, sollten wir einen anonymen Funktionsaufruf verwenden, um die Eigenschaft log darzustellen:
// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); } Jetzt wird der this Bereich des Hundes innerhalb der Funktion zugänglich sein.
Mit der Klasse
Sie können dasselbe Ergebnis mit Klassen erzielen:
class Dog { is = null; log() { console.log(this.is); } bark() { this.is = "woofing"; this.log(); return this; } walk() { this.is = "walking"; this.log(); return this; } eat() { this.is = "eating"; this.log(); return this; }}const dog = new Dog();dog .bark() .eat() .walk();Prototyp verwenden
Wenn Sie Prototyp verwenden müssen, gehen Sie folgendermaßen vor:
function Dog() {}Dog.prototype.is = null;Dog.prototype.log = function() { console.log(this.is);};Dog.prototype.bark = function() { this.is = "woofing"; this.log(); return this;};Dog.prototype.walk = function() { this.is = "walking"; this.log(); return this;};Dog.prototype.eat = function() { this.is = "eating"; this.log(); return this;};const dog = new Dog();dog .bark() .eat() .walk();Was ist mit asynchronen Funktionen?
async Funktionen sind synthetischer Zucker für Versprechen und Generatoren. Wenn Sie eine async -Funktion deklarieren, wissen Sie, dass sie ein Versprechen zurückgibt. Aus diesem Grund haben Sie auch Zugriff auf alle Methoden des Versprechens.
const requests = { user: null, action: null, log(something) { console.log(this); }, async getUser() { this.user = await new Promise(resolve => { setTimeout(() => { resolve("Douglas Pires"); }, 1000); }); this.log("user"); return this; }, async registerAction() { this.action = await new Promise(resolve => { setTimeout(() => { resolve("programming stuff"); }, 1000); }); this.log("action"); return this; }};requests.getUser().then(() => requests.registerAction());Es ist jedoch keine gute Idee, eine Reihe von Versprechungen miteinander zu verketten. Ich empfehle stattdessen eine Reihe von await Schlüsselwörtern. Es ist einfacher und es wird Ihren Code viel lesbarer machen.
await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programmingUnd Sie haben hier Zugriff auf dieselben Eigenschaften:
console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programmingAbschließend
Verkettungsfunktionen sind praktisch, wenn Sie ein Objekt manipulieren müssen. Es ist auch eine praktische Möglichkeit, die Lesbarkeit Ihres Codes zu verbessern. Wie Sie oben gesehen haben, sollten Sie jedoch mit Bedacht ketten.
In diesem Artikel haben wir über this, Klassen, Prototypen und async Funktionen im Zusammenhang mit der Verkettung von JavaScript-Methoden gesprochen. Ich hoffe, ihr habt ein paar nützliche Tipps mitgenommen und seid nun besser über das Thema informiert. Mein Repository mit dem gesamten Code zur Verkettung von JavaScript-Methoden finden Sie hier. Wir sehen uns im nächsten Post!
Viel Spaß beim Lesen dieses Artikels? Fühlen Sie sich frei, auf Social Media mit den Schaltflächen unten zu teilen. Alternativ habe ich auch darüber geschrieben, wie Sie mit Nuxt und Vuetify einen Farbpalettengenerator erstellen können. Schau es dir an!
