Heim > Web-Frontend > js-Tutorial > Clean Code verstehen: Aussagekräftige Namen ⚡

Clean Code verstehen: Aussagekräftige Namen ⚡

WBOY
Freigeben: 2024-08-12 20:30:49
Original
448 Leute haben es durchsucht

Understanding Clean Code: Meaningful Names ⚡

Beim Schreiben von Code ist die Benennung einer der am meisten übersehenen, aber dennoch kritischen Aspekte.

Die Namen, die wir für Variablen, Funktionen, Klassen und andere Entitäten in unserem Code wählen, können sich erheblich auf die Lesbarkeit, Wartbarkeit und Gesamtqualität auswirken.

Kapitel 2 von Clean Code befasst sich mit der Kunst und Wissenschaft der Auswahl aussagekräftiger Namen und bietet eine Reihe von Richtlinien, die Entwicklern dabei helfen können, Code zu schreiben, der sowohl ausdrucksstark als auch verständlich ist.

In diesem Blogbeitrag werden wir die wichtigsten Erkenntnisse aus diesem Kapitel untersuchen und jedes Konzept mit Beispielen in JavaScript veranschaulichen.


?1. Verwenden Sie Namen, die Ihre Absicht offenbaren

Die von Ihnen gewählten Namen sollten die Absicht hinter der Variablen, Funktion oder Klasse klar zum Ausdruck bringen. Der Leser sollte in der Lage sein, zu verstehen, was der Code tut, ohne zusätzlichen Kontext zu benötigen.

// Bad
let d; 

// Good
let daysUntilDeadline;
Nach dem Login kopieren

Im ersten Beispiel ist d vage und liefert keinen Kontext. Die verbesserte Version, daysUntilDeadline, zeigt deutlich, was die Variable darstellt.


?2. Vermeiden Sie Desinformation

Namen sollten nicht irreführend sein. Vermeiden Sie die Verwendung von Namen, die eine andere Bedeutung implizieren könnten als die tatsächliche Bedeutung des Codes.

// Bad
let accountList = new Map();

// Good
let accountsMap = new Map();
Nach dem Login kopieren

Hier könnte „accountList“ irreführend sein, da es eine Liste vorschlägt (die eine geordnete Sammlung darstellt), während die tatsächliche Datenstruktur eine Karte ist. Die Verwendung von AccountsMap ist genauer.


?3. Treffen Sie sinnvolle Unterscheidungen

Wenn Sie zwischen ähnlichen Variablen, Funktionen oder Klassen unterscheiden müssen, tun Sie dies auf eine Weise, die die Unterscheidung klar und aussagekräftig macht.

// Bad
getUserInfo();
getUserData();

// Good
getUserProfile();
getUserSettings();
Nach dem Login kopieren

Im ersten Beispiel sind getUserInfo und getUserData zu ähnlich und vermitteln ihre Unterschiede nicht deutlich. Das zweite Beispiel verdeutlicht die Unterscheidung, indem die Funktionen basierend auf dem, was sie zurückgeben, benannt werden.


?4. Verwenden Sie aussprechbare Namen

Namen sollten leicht zu lesen und auszusprechen sein. Dadurch wird die Diskussion des Codes mit anderen einfacher.

// Bad
let genymdhms;

// Good
let generationTimestamp;
Nach dem Login kopieren

genymdhms ist ein nicht aussprechbarer Name, den man sich nur schwer merken oder besprechen kann. generationTimestamp ist jedoch klar und leicht zu sagen.


?5. Verwenden Sie durchsuchbare Namen

In größeren Codebasen ist es wichtig, Namen zu verwenden, nach denen leicht zu suchen ist. Vermeiden Sie die Verwendung von Namen mit nur einem Buchstaben oder übermäßig abgekürzten Namen.

// Bad
let e = document.getElementById('email');

// Good
let emailInputElement = document.getElementById('email');
Nach dem Login kopieren

e ist nicht leicht zu durchsuchen und vermittelt nicht, was es darstellt. emailInputElement ist aussagekräftiger und in der Codebasis leichter zu finden.


?6. Vermeiden Sie Kodierungen

Vermeiden Sie die Verwendung von Typen, Präfixen oder anderen Kodierungen in Ihren Namen. Lassen Sie den Namen selbst aussagekräftig genug sein.

// Bad
let phoneString;

// Good
let phoneNumber;
Nach dem Login kopieren

In diesem Fall enthält phoneString eine unnötige Typkodierung (String). phoneNumber ist einfacher und direkter.


?7. Klassennamen sollten Substantive sein, Funktionsnamen sollten Verben sein

Klassen repräsentieren Objekte oder Konzepte, daher sollten ihre Namen Substantive sein. Funktionen hingegen stellen Aktionen dar, daher sollten ihre Namen Verben sein.

// Class names (Nouns)
class UserAccount {}
class ShoppingCart {}

// Function names (Verbs)
function calculateTotal() {}
function sendEmail() {}
Nach dem Login kopieren

Diese Unterscheidung hilft beim Verständnis der Rolle jedes Elements in Ihrem Code.


?8. Vermeiden Sie mentales Mapping

Zwingen Sie den Leser nicht, einen Namen in etwas Bedeutungsvolleres zu übersetzen. Der Name sollte selbsterklärend sein.

// Bad
let n = 5; // Number of users

// Good
let userCount = 5;
Nach dem Login kopieren

n erfordert, dass der Leser sich daran erinnert oder daraus schließt, dass es für die Anzahl der Benutzer steht, während userCount sofort klar ist.


Fazit ⚡

Die Wahl aussagekräftiger Namen ist mehr als nur eine Frage des Stils – es ist eine grundlegende Praxis beim Schreiben von sauberem, wartbarem Code.

Indem Sie die in Kapitel 2 von Clean Code dargelegten Richtlinien befolgen, können Sie die Lesbarkeit Ihres JavaScript-Codes verbessern und ihn für andere (und Sie selbst) einfacher zu verstehen und zu pflegen machen.

Denken Sie daran, dass das Ziel darin besteht, Code zu schreiben, der seinen Zweck und seine Logik kommuniziert und so die kognitive Belastung des Lesers verringert.

Wenn Sie das nächste Mal eine Variable, Funktion oder Klasse benennen, denken Sie über die Prinzipien einer sinnvollen Benennung nach und darüber, wie diese zu einem saubereren und effektiveren Code beitragen können.

Viel Spaß beim Programmieren!

Das obige ist der detaillierte Inhalt vonClean Code verstehen: Aussagekräftige Namen ⚡. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage