Jeder möchte ein Experte sein. Aber was bedeutet das überhaupt? Im Laufe der Jahre bin ich auf zwei Arten von Menschen gestoßen, die als "Experten" bezeichnet werden. Ein Experte des ersten Typs ist eine Person, die nicht nur jedes Zahnrad in der Sprache kennt, sondern auch alle diese Zahnräder verwendet, unabhängig davon, ob dies von Vorteil ist. Ein Experte des zweiten Typs kennt auch jede syntaktische Subtilität, ist jedoch selektiver bei der Auswahl eines Werkzeugs zur Lösung eines Problems und berücksichtigt eine Reihe von Faktoren, die sowohl mit dem Code zusammenhängen als auch nicht mit dem Code zusammenhängen.
Lassen Sie uns raten, welche Art von Experten Sie in Ihrem Team sehen möchten. Zweitens richtig? Dies ist die Art von Entwickler, die sich bemüht, von Menschen lesbaren Code zu erstellen, JavaScript-Zeichenfolgen, die andere verstehen können und die einfach zu warten sind. Das Merkmal "lesbar" ist jedoch selten bestimmend - tatsächlich liegt es normalerweise im Auge des Betrachters. Wohin führt uns das? Was sollten wir anstreben, wenn unser Ziel lesbarer Code ist? Gibt es in diesem Fall eine eindeutig richtige oder falsche Wahl? Kommt auf viel an.
Die offensichtliche Wahl
Um die Arbeit des Entwicklers zu vereinfachen, hat TC39 ECMAScript in den letzten Jahren um viele neue Funktionen erweitert, darunter viele bewährte Muster, die aus anderen Sprachen entlehnt wurden. Eine solche in ES2019 eingeführte Innovation ist die Array.prototype.flat () -Methode . Es verwendet ein Tiefen- oder Unendlichkeitsargument und richtet das Array aus. Wenn keine Argumente vorhanden sind, beträgt die Standardtiefe des Arrays 1.
Bevor dieser Zusatz angezeigt wurde, war die folgende Syntax erforderlich, um das Array auf einer einzelnen Ebene auszurichten.
let arr = [1, 2, [3, 4]];
[].concat.apply([], arr);
// [1, 2, 3, 4]
Durch Hinzufügen von flat () können Sie dieselbe Funktion mit nur einer Ausdrucksfunktion beschreiben.
arr.flat();
// [1, 2, 3, 4]
Ist die zweite Codezeile leichter zu lesen? Absolut ja. Tatsächlich würden beide Experten dem zustimmen.
Nicht jeder Entwickler ist sich der Existenz von flat () bewusst. Es ist jedoch nicht notwendig, dies im Voraus zu wissen, da flat () ein verständliches Verb ist, aus dem hervorgeht, was hier passiert. Es ist viel intuitiver als concat.apply ().
Dies ist der seltene Fall, in dem Sie sicher antworten können, welche Syntax besser ist - neu oder alt. Beide Experten, die sich mit den beiden Syntaxen vertraut gemacht haben, werden die zweite auswählen. Sie wählen die Codezeile, die kürzer, klarer und einfacher zu warten ist.
Auswahl und Kompromiss sind jedoch nicht immer so einfach.
Auf Läuse prüfen
Das Schöne an JavaScript ist seine unglaubliche Vielseitigkeit. Deshalb ist es überall im Web. Ob es aus Ihrer Sicht gut oder schlecht ist, ist eine andere Frage.
Diese Vielseitigkeit bringt jedoch das Paradox der Wahl mit sich. Der gleiche Code kann auf viele verschiedene Arten geschrieben werden. Wie bestimmen Sie, welches "richtig" ist? Eine solche Lösung kann nicht einmal angegangen werden, wenn Sie nicht alle verfügbaren Optionen kennen und nicht verstehen, was sie nicht erreichen.
Versuchen wir die funktionale Programmierung am Beispiel von map () . Ich werde hier einige Iterationen durchgehen - sie werden alle zum gleichen Ergebnis führen.
Hier ist die prägnanteste Version aller unserer map () - Beispiele. Es hat die geringste Anzahl von Zeichen und alle passen in eine Zeile. Wir werden auf dieser Version aufbauen.
const arr = [1, 2, 3];
let multipliedByTwo = arr.map(el => el * 2);
// multipliedByTwo [2, 4, 6]
Im folgenden Beispiel werden nur zwei Zeichen hinzugefügt: Klammern. Haben wir etwas verloren? Hast du es gekauft? Ist es aufgrund des Wetters immer erforderlich, Klammern in einer Funktion mit mehr als einem Parameter zu verwenden? Ich denke - ja, das tut es. Es ist nichts Falsches daran, sie hier hinzuzufügen, aber die Codekonsistenz erhöht sich erheblich, wenn Sie zwangsläufig eine Funktion mit vielen Parametern schreiben müssen. Tatsächlich stellte sich zum Zeitpunkt dieses Schreibens heraus, dass Prettier diese Einschränkung haben musste; dort konnte ich keine pfeilfunktion ohne klammern erstellen.
let multipliedByTwo = arr.map((el) => el * 2);
Gehen Sie geradeaus. Wir haben geschweifte Klammern und eine return-Anweisung hinzugefügt. Dies klingt jetzt wie eine traditionelle Funktionsdefinition. Im Moment scheint es ein Schlüsselwort zu sein, solange die gesamte Funktionslogik eine Kanone auf Spatzen abfeuert. Wenn die Funktion jedoch mehr als eine Zeile enthält, wird diese zusätzliche Syntax definitiv benötigt. Gehen wir davon aus, dass wir keine anderen Funktionen haben, die länger als eine Zeile sind? Scheint zweifelhaft.
let multipliedByTwo = arr.map((el) => {
return el * 2;
});
Als nächstes haben wir die Pfeilfunktion vollständig entfernt. Wir verwenden dieselbe Syntax wie zuvor, bevorzugen jedoch jetzt das Funktionsschlüsselwort. Dies ist interessant, da es kein Szenario gibt, in dem diese Syntax nicht funktionieren würde. Für eine beliebige Anzahl von Parametern oder Zeichenfolgen haben wir kein Problem, daher sind wir hier stark in der Einheitlichkeit. Dieser Code ist länger als unsere erste Definition, aber ist es wirklich so schlimm? Wie schadet dies einem neuen Programmierer oder jemandem, der nicht mit JavaScript, sondern mit einer anderen Sprache vertraut ist? Würde jemand mit guten JavaScript-Kenntnissen beim Vergleichen von dieser Syntax verwirrt sein?
let multipliedByTwo = arr.map(function(el) {
return el * 2;
});
Schließlich kommen wir zur letzten Option: Übergeben Sie nur eine Funktion. Und timesTwo kann mit jeder beliebigen Syntax geschrieben werden. Auch hier gibt es kein Szenario, in dem sich die Übergabe des Funktionsnamens als Problem für uns herausstellen würde. Aber lassen Sie uns einen Schritt zurücktreten und darüber nachdenken, ob ein solcher Code jemanden verwirren könnte. Wenn Sie gerade erst mit dieser Codebasis beginnen, ist Ihnen klar, dass timesTwo eine Funktion ist, kein Objekt? Auf jeden Fall wird map () hier als Hinweis dienen, aber ein solches Detail kann übersehen werden. Wie wäre es, wenn timesTwo deklariert und initialisiert wird? Ist es leicht zu finden? Ist klar, was es tut und wie es das Ergebnis beeinflusst? All diese Überlegungen sind wichtig.
const timesTwo = (el) => el * 2;
let multipliedByTwo = arr.map(timesTwo);
Wie Sie sehen, gibt es hier keine offensichtliche Antwort. Die Auswahl der richtigen Optionen beim Erstellen Ihrer Codebasis ist jedoch nur möglich, wenn Sie alle Optionen und ihre Einschränkungen kennen. Insbesondere wissen Sie, dass Sie Klammern, geschweifte Klammern und Rückgabewörter benötigen, um Ihren Code konsistent zu machen.
Es gibt eine Reihe von Problemen, die beim Schreiben von Code zu beachten sind. Performance Probleme sind in der Regel die am häufigsten. Beim Vergleich funktional identischer Codefragmente sollte die Auswahl jedoch mit Blick auf die Personen getroffen werden, die diesen Code lesen müssen.
Vielleicht ist neuer nicht immer besser
Wir haben uns also ein sehr ausgeprägtes Beispiel angesehen, in dem beide Experten die neuere Syntax bevorzugen würden, auch wenn sie nicht bekannt ist. Wir haben uns auch ein Beispiel angesehen, das viele Fragen stellt, aber nicht viele Antworten liefert. Lassen Sie uns nun in den Code eintauchen, den ich zuvor geschrieben und gelöscht habe. Dieser Code machte mich zu einem Experten des ersten Typs, als ich das Problem mit einem wenig bekannten syntaktischen Konstrukt löste, wodurch meine Kollegen und die Bequemlichkeit, unsere Codebasis zu pflegen, vernachlässigt wurden.
Durch die Destrukturierungszuweisung können Sie Werte von Objekten (oder Arrays) entpacken. Normalerweise sieht es so aus.
const {node} = exampleObject;
Hier wird in einer Zeile eine Variable initialisiert und ein Wert zugewiesen. Dies ist jedoch möglicherweise nicht der Fall.
let node
;({node} = exampleObject)
In der letzten Codezeile wird der Wert mithilfe der Destrukturierung einer Variablen zugewiesen, die Variable wird jedoch in einer Zeile deklariert. Dies wird oft gemacht, aber viele erkennen nicht, dass dies möglich ist.
Schauen wir uns diesen Code genauer an. Das umständliche Semikolon wird hier auferlegt, und dies ist in Code, in dem das Semikolon nicht zum Beenden von Zeilen verwendet wird. Hier wird der Befehl in Klammern eingeschlossen und geschweifte Klammern hinzugefügt. es ist völlig unverständlich, was hier passiert. Es ist schwierig, diese Zeile zu lesen, da ich als Experte absolut kein Recht hatte, solchen Code zu schreiben.
let node
node = exampleObject.node
Dieser Code löst das Problem. Es funktioniert, es ist klar, was darin getan wird, und meine Kollegen werden es verstehen, ohne irgendwo hinzuschauen. Wie für die destruktive Syntax, ich soll nicht es nur benutzen , weil ich kann .
Code ist nicht alles
Wie wir gesehen haben, wird die Entscheidung von Expert-2 selten gefragt, ob wir nur vom Code ausgehen; Es ist jedoch leicht zu erkennen, welchen Code jeder Experte schreiben sollte. Der Punkt ist, dass Maschinen den Code lesen müssen und die Leute ihn interpretieren müssen. Daher müssen Sie Faktoren berücksichtigen, die nicht nur mit dem Code zusammenhängen!
Die Arbeit in einem JavaScript-Entwicklungsteam verfolgt einen anderen Ansatz bei der Codeauswahl als die Arbeit in einem mehrsprachigen Team, dessen Mitglieder weniger in sprachliche Feinheiten vertieft sind.
Vergleichen wir als Beispiel den Erweiterungsoperator und concat ().
Der Spread-Operator wurde vor einigen Jahren zu ECMAScript hinzugefügt und ist heute sehr verbreitet. Dies ist eine Art Hilfssyntax, mit der Sie viele Dinge tun können. Verketten Sie insbesondere eine Reihe von Arrays.
const arr1 = [1, 2, 3];
const arr2 = [9, 11, 13];
const nums = [...arr1, ...arr2];
Bei allem Potenzial des Nebenstellenbetreibers ist sein Symbol nicht selbstverständlich. Wenn Sie also nicht wissen, was es tut, hilft es Ihnen nicht viel. Während beide Experten durchaus berechnen können , dass das Team JavaScript-Profis mit der Syntax vertraut ist, halten es die Experten-2 vielleicht für möglich, dasselbe über das mehrsprachige Team von Programmierern zu sagen. Daher kann Expert-2 die concat () -Methode bevorzugen, da es sich um ein informatives Verb handelt, das wahrscheinlich aus dem Kontext des Codes verstanden werden kann.
Dieses Code-Snippet liefert das gleiche numerische Ergebnis wie das obige Beispiel mit dem Erweiterungsoperator.
const arr1 = [1, 2, 3];
const arr2 = [9, 11, 13];
const nums = arr1.concat(arr2);
Dies ist nur ein Beispiel, um zu zeigen, wie menschliche Faktoren die Codeauswahl beeinflussen. Die Codebasis, auf die Personen aus verschiedenen Teams Zugriff haben, unterliegt möglicherweise strengeren Standards, die nicht unbedingt mit allen coolen syntaktischen Innovationen Schritt halten. Dann müssen Sie vom Hauptquellcode abweichen und andere Faktoren in Bezug auf Ihr Toolkit berücksichtigen, die den Menschen, die an diesem Code arbeiten, das Leben erschweren oder erleichtern können. Es gibt Code, der so strukturiert werden kann, dass er schwer zu testen ist . Es gibt Code, der Sie in eine Ecke treibt und Sie können nicht skalieren oder neue Funktionen hinzufügen . Es gibt Code, bei dem die Leistung leidetNicht alle Browser werden unterstützt oder sind schlecht zugänglich . Experte 2 berücksichtigt all diese Faktoren in seinen Empfehlungen.
Expert-2 berücksichtigt auch den Namensfaktor. Aber seien wir ehrlich, selbst Experten kommen in den meisten Fällen nicht mit der Benennung zurecht.
Fazit
Der wahre Experte ist nicht jemand, der jedes Quietschen aus der Spezifikation anwendet, sondern jemand, der die Spezifikation gut genug kennt, um die Syntax rational einzusetzen und gut durchdachte Entscheidungen zu treffen. Ein Experte, der auf dieses Niveau wächst, kann neue Experten vorbereiten.
Was bedeutet das für diejenigen von uns, die sich als Experten betrachten oder zumindest danach streben, Experte zu werden? Dies bedeutet, dass Sie sich beim Schreiben von Code viele Fragen stellen müssen. Bewerten Sie die Entwickler, die Ihre Zielgruppe sind, angemessen. Der beste Code, den Sie schreiben können, ist Code, der ein komplexes Problem löst, aber per Definition für diejenigen verständlich ist, die Ihre Codebasis lesen.
Ja, das ist sehr schwierig. Und oft gibt es keine einzige Antwort. Aber Sie sollten über das Obige nachdenken, wenn Sie jede Ihrer Funktionen schreiben.
Unsere virtuellen Maschinen können für die fachmännische Entwicklung von Javascript verwendet werden.
Registrieren Sie sich über den obigen Link oder indem Sie auf das Banner klicken und erhalten Sie 10% Rabatt für den ersten Monat der Anmietung eines Servers einer beliebigen Konfiguration!
