{"id":16651,"date":"2024-11-10T09:33:00","date_gmt":"2024-11-10T09:33:00","guid":{"rendered":"http:\/\/ladderwp.com\/wie-man-sauberen-javascript-code-schreibt\/"},"modified":"2025-03-14T14:12:49","modified_gmt":"2025-03-14T14:12:49","slug":"wie-man-sauberen-javascript-code-schreibt","status":"publish","type":"post","link":"https:\/\/ladderwp.com\/de\/wie-man-sauberen-javascript-code-schreibt\/","title":{"rendered":"Wie man sauberen JavaScript-Code schreibt"},"content":{"rendered":"

Einer der wichtigsten Schritte bei der Entwicklung eines Projekts ist es, sauberen Code zu schreiben. Er wird nicht nur leicht zu lesen sein, sondern auch eine sch\u00f6ne Struktur haben, so dass Ihr Code f\u00fcr jeden verst\u00e4ndlich ist, der ihn sich ansieht. Wie k\u00f6nnen wir das erreichen? Es gibt verschiedene Richtlinien und Syntaxen, die Ihnen dabei helfen, weniger Code zu schreiben, wie z.B. die D.R.Y.-Regel, d.h. die Entwicklung von wiederverwendbarem Code und das Vermeiden von doppelten Codebl\u00f6cken, die nicht unbedingt notwendig sind. Dies ist das wichtigste Prinzip, denn es hilft Ihnen, die Art und Weise, wie Sie Ihren Code schreiben, zu \u00fcberdenken und bei der Bereitstellung Ihres Codes f\u00fcr die Produktion einige zus\u00e4tzliche Zeilen und KB einzusparen. Die Leistung ist entscheidend, und Sie wollen jedes bisschen verf\u00fcgbaren Speicherplatz sparen. Eine weitere Empfehlung ist die Verwendung der ES6-Syntax, um die Menge des von Ihnen geschriebenen Codes durch die Vereinfachung einiger Syntaxen zu reduzieren. Die am h\u00e4ufigsten verwendeten sind genau die, \u00fcber die wir in diesem Artikel sprechen werden. Pfeilfunktionen, die es Ihnen erm\u00f6glichen, JavaScript-Funktionen kompakter zu schreiben und gleichzeitig die Schwierigkeit des Zugriffs auf diese Eigenschaft \u00fcber Callbacks zu l\u00f6sen. Eine einfache Pfeilfunktion sieht wie folgt aus: const myFunction = (param1, param2) => {}<\/code> Wenn Sie etwas zur\u00fcckgeben, ist das Schl\u00fcsselwort „return“ optional, und die geschweiften Klammern k\u00f6nnen zu Klammern werden, wenn Sie viele Zeilen zur\u00fcckgeben, oder sie k\u00f6nnen verschwinden, wenn Sie nur einen Wert zur\u00fcckgeben, je nachdem, was Sie zur\u00fcckgeben: const myFunction = (param1, param2) => param1 + param2<\/code> Die Klammern, die die Variablen umgeben, k\u00f6nnen ebenfalls optional sein, wenn Sie nur einen Parameter haben: const myFunction = param1 => param1<\/code> Dann gibt es noch die Objektdestrukturierung, die es Ihnen erm\u00f6glicht, bestimmte Felder eines Objekts schnell einer Variablen zuzuweisen und so die Menge des f\u00fcr die Deklarationen verwendeten Codes zu reduzieren: const user = {firstName: \u201cJohn\u201d, lastName: \u201cDoe\u201d};<\/code> Destrukturierung: const {firstName, lastName} = user;<\/code> Nicht destrukturieren: <\/code>
\nconst firstName = user.firstName;<\/code><\/p>\n

const lastName = user.lastName;<\/code> Ein weiterer Trick ist die Verwendung von Backticks (‚) zur Trennung von Template-Literalen bei der Erstellung von mehrzeiligen Strings und der Durchf\u00fchrung von String-Interpolationen: const x = \u201cVar\u201d;<\/code>const example = `Something ${x} something`;<\/code> Anstelle von const example = \u201cSomething\u201d + x + \u201csomething\u201d;<\/code> Eine weitere wichtige ES6-Syntax ist die Shorthand-Methode, die die if else-Syntax aufhebt und es uns erm\u00f6glicht, weniger und besser lesbaren Code zu schreiben: condition ? doThisIfTrue : doThisIfFalse<\/code> Statt If (condition) {
\ndoThisIfTrue
\n} else {
\ndoThisIfFalse
\n}<\/code> Versuchen Sie, R\u00fcckrufe und verschachtelte R\u00fcckrufe nach M\u00f6glichkeit zu vermeiden und stattdessen Versprechen und async \/ await zu verwenden, um asynchrone Funktionen zu handhaben. Nat\u00fcrlich gibt es viele ES6-Methoden, die verwendet werden k\u00f6nnen, aber diese sind die am h\u00e4ufigsten verwendeten. Sie k\u00f6nnen hier<\/a> mehr dar\u00fcber erfahren, wenn Sie m\u00f6chten. Ein weiterer wichtiger Punkt, den Sie sich merken sollten, ist die Datenknappheit. Das bedeutet, dass Sie keine Daten \u00fcbertragen sollten, die Sie nicht ben\u00f6tigen. Anstatt ein ganzes Objekt zu \u00fcbergeben, wenn Sie nur eine Variable ben\u00f6tigen, ordnen Sie Ihre Daten neu an und senden Sie nur das, was f\u00fcr die Funktionalit\u00e4t erforderlich ist. Wenn Sie mehrere API-Aufrufe zu t\u00e4tigen haben, ist dies eine gute M\u00f6glichkeit, die Menge der zu \u00fcbertragenden Daten zu begrenzen. Wenn Ihr Code gr\u00f6\u00dfer wird, ist es eine gute Idee, ihn in mehrere Dateien aufzuteilen, um gro\u00dfe Datenmengen zu vermeiden, die schwer zu verstehen und zu verwalten sind. Die Aufteilung des Codes in Dateien und Module ist eine gute Idee, denn sie hilft, Ihr Projekt zu organisieren und verbessert die Lesbarkeit. <\/p>\n","protected":false},"excerpt":{"rendered":"

Einer der wichtigsten Schritte bei der Entwicklung eines Projekts ist es, sauberen Code zu schreiben. Er wird nicht nur leicht zu lesen sein, sondern auch eine sch\u00f6ne Struktur haben, so dass Ihr Code f\u00fcr jeden verst\u00e4ndlich ist, der ihn sich ansieht. Wie k\u00f6nnen wir das erreichen? Es gibt verschiedene Richtlinien und Syntaxen, die Ihnen dabei… Continue reading Wie man sauberen JavaScript-Code schreibt<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":16378,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[207],"tags":[212,213,210,218,219,220,216,217,208,214,221,222,223,224,225,209,226,227,215,228,229,230,231,232,233,234,235,236,237,211],"class_list":["post-16651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wie-man","tag-backend-de","tag-backend-technologien","tag-blog-de","tag-digitalagency-de","tag-digitalbranding-de","tag-digitaldesign-de","tag-entwickler","tag-entwicklung","tag-javascript-de","tag-kodierung","tag-programmierer","tag-programmierung","tag-seo-de","tag-software-de","tag-softwareentwickler","tag-technisches","tag-ui-de","tag-uidesign-de","tag-unternehmen","tag-ux-de","tag-uxdesign-de","tag-web-de","tag-webdesign-de","tag-webdesigner-de","tag-webentwickler","tag-webentwicklung","tag-webentwicklungsagentur","tag-website-de","tag-websitedesign-de","tag-wordpress-de","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/posts\/16651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/comments?post=16651"}],"version-history":[{"count":0,"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/posts\/16651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/media\/16378"}],"wp:attachment":[{"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/media?parent=16651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/categories?post=16651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ladderwp.com\/de\/wp-json\/wp\/v2\/tags?post=16651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}