{"id":1972,"date":"2024-10-09T11:37:53","date_gmt":"2024-10-09T03:37:53","guid":{"rendered":"https:\/\/www.openbyt.com\/spieth-in-danger-of-missing-cut-2"},"modified":"2024-10-19T21:30:38","modified_gmt":"2024-10-19T13:30:38","slug":"spieth-in-danger-of-missing-cut-2","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/de\/spieth-lauft-gefahr-cut-2-zu-verpassen","title":{"rendered":"Beherrschung von JavaScript in WordPress: Leitfaden f\u00fcr bew\u00e4hrte Praktiken"},"content":{"rendered":"

Mastering WordPress JavaScript Coding Standards: Ein umfassender Leitfaden f\u00fcr Entwickler<\/strong><\/p>

JavaScript-Codierungsstandards in WordPress sind entscheidend f\u00fcr die Wahrung der Konsistenz, Lesbarkeit und Qualit\u00e4t des Codes, egal ob Sie Themes, Plugins oder Beitr\u00e4ge zum Kern entwickeln. Diese Standards stellen sicher, dass Ihr JavaScript nahtlos mit PHP, HTML und CSS zusammenarbeitet und erleichtern die Zusammenarbeit zwischen verschiedenen Teams. Lassen Sie uns in diese Standards eintauchen und sie mit praktischen Beispielen aufschl\u00fcsseln, um sie f\u00fcr alle Entwickler zug\u00e4nglich zu machen.<\/p>

\"\"<\/figure>

\u00dcberblick: Auf dem Fundament von jQuery aufbauen<\/strong><\/p>

Die JavaScript-Codierungsstandards von WordPress leiten sich von der jQuery JavaScript Style Guide<\/strong>wurde urspr\u00fcnglich im Jahr 2012 eingef\u00fchrt. Obwohl er urspr\u00fcnglich f\u00fcr jQuery-Projekte gedacht war, f\u00fchrte sein Erfolg zu einer weit verbreiteten \u00dcbernahme \u00fcber das Framework hinaus. WordPress hat jedoch seine eigene Version dieser Standards, die sich leicht von der urspr\u00fcnglichen jQuery-Anleitung unterscheidet.<\/p>

\"\"<\/figure>

Die wichtigsten Unterschiede sind:<\/p>

  1. Einzelne Zitate f\u00fcr Strings<\/strong>: WordPress bevorzugt einfache Anf\u00fchrungszeichen f\u00fcr String-Deklarationen.<\/li>\n\n
  2. Fall-Anweisung Einr\u00fcckung<\/strong>: In WordPress werden Case-Anweisungen innerhalb eines Switch-Blocks einger\u00fcckt.<\/li>\n\n
  3. Konsistente Funktion Einr\u00fcckung<\/strong>: Der gesamte Inhalt innerhalb einer Funktion wird einger\u00fcckt, einschlie\u00dflich der dateiweiten Closure Wrapper.<\/li>\n\n
  4. Lockeres Limit der Zeilenl\u00e4nge<\/strong>: W\u00e4hrend jQuery eine Beschr\u00e4nkung auf 100 Zeichen pro Zeile erzwingt, ermutigt WordPress dazu, setzt es aber nicht streng durch.<\/li><\/ol>

    Kernbereiche, die von den WordPress JavaScript-Standards abgedeckt werden<\/h3>

    1. code Formatierung und Einr\u00fcckung<\/strong><\/p>

    1. <\/li><\/ol>

      Richtige Formatierung und Einr\u00fcckung sind f\u00fcr lesbaren und wartbaren Code unerl\u00e4sslich. Der WordPress-Standard betont dies:<\/p>

      • Einkerbung<\/strong>: Verwenden Sie Registerkarten<\/strong> anstelle von Leerzeichen f\u00fcr die Einr\u00fcckung. Jeder logische Block sollte zur besseren Lesbarkeit einger\u00fcckt werden. Tabulatoren helfen, die Konsistenz zu wahren, insbesondere wenn verschiedene Entwickler an derselben Codebasis arbeiten.<\/li><\/ul>
        ( Funktion ( $ ) {\n    \/\/ Blockausdr\u00fccke werden einger\u00fcckt\n    function doSomething() {\n        \/\/ Funktionscode wird ebenfalls einger\u00fcckt\n        console.log( 'Ich tue etwas' );\n    }\n} )( jQuery );<\/code><\/pre>
        Im obigen Beispiel sind die Funktion doSomething() und ihr Inhalt einger\u00fcckt, um zu zeigen, dass sie Teil des IIFE sind.<\/p>
        Im obigen Beispiel sind die Funktion doSomething() und ihr Inhalt einger\u00fcckt, um zu zeigen, dass sie Teil des IIFE sind.<\/strong><\/p>
        var html = '<p>Die Summe von ' + a + ' und ' + b + ' ist ' + ( a + b ) + '<\/p>';\n\nElemente\n    .addClass( 'foo' )\n    .children()\n        .html( 'hallo' )\n    .end()\n    .appendTo( 'body' );<\/code><\/pre>
        Hier beginnt jede Methode in der Kette in einer neuen Zeile, so dass die Abfolge der Operationen besser lesbar ist.<\/p>
        \"\"<\/figure>
        2. Objekt- und Array-Abstand<\/strong><\/p>
        Objekte und Arrays<\/strong>: Konsistente Abst\u00e4nde sind entscheidend f\u00fcr die visuelle Klarheit, insbesondere bei der Arbeit mit komplexen Datenstrukturen. Befolgen Sie diese Richtlinien f\u00fcr Abst\u00e4nde:<\/p>
        \/\/ Korrekte Art, Objekte zu deklarieren\nvar obj = {\n    Name: 'John',\n    Alter: 27,\n    H\u00f6he: 179\n};\n\n\/\/ Falsche Art, Objekte zu deklarieren (Eigenschaften nicht zusammenfassen)\nvar obj = { Name: 'John', Alter: 27, H\u00f6he: 179 };\n\n\/\/ Arrays sollten ebenfalls konsistente Abst\u00e4nde einhalten\nvar array = [ 1, 2, 3 ];<\/code><\/pre>
        Die korrekten Abst\u00e4nde in Objekten und Arrays stellen sicher, dass Ihre Datenstruktur visuell eindeutig ist, was beim Debuggen oder \u00dcberpr\u00fcfen von Code hilfreich ist.<\/p>
        3. Semikolons<\/strong><\/p>
        Verwenden Sie immer Semikolons<\/strong> um Anweisungen zu beenden. Das Weglassen von Semikolons kann zu unerwarteten Problemen bei der automatischen Semikoloneinf\u00fcgung (ASI) von JavaScript f\u00fchren.<\/p>
        var array = [ 1, 2 ];\nconsole.log( 'Hallo, Welt!' );<\/code><\/pre>
        Auch wenn JavaScript manchmal Semikolons ableiten kann, ist es am besten, sie explizit einzuf\u00fcgen, um Mehrdeutigkeiten zu vermeiden, vor allem, wenn Sie mehrere Codeschnipsel kombinieren oder an Teamprojekten mitarbeiten.<\/p>
        4. Variable Deklarationen: const<\/code>, lassen Sie<\/code>, und var<\/code><\/strong><\/p>
        • Verwenden Sie const<\/strong> f\u00fcr Variablen, deren Wert sich nicht \u00e4ndern wird. Dies hilft, eine versehentliche Neuzuweisung zu verhindern und macht anderen Entwicklern Ihre Absichten deutlich.<\/li>\n\n
        • Verwenden Sie lassen Sie<\/strong> f\u00fcr Variablen, deren Wert sich innerhalb eines bestimmten Bereichs \u00e4ndern kann. Dadurch wird sichergestellt, dass die Variable in Bl\u00f6cke unterteilt ist, was Probleme im Zusammenhang mit Histing verhindert.<\/li>\n\n
        • **Vermeiden **var<\/strong> es sei denn, dies ist notwendig, da es einen Funktionsumfang hat, der zu unbeabsichtigtem Verhalten aufgrund von Hochziehen f\u00fchren kann.<\/li><\/ul>
          const userName = 'Alice'; \/\/ Verwenden Sie const f\u00fcr feste Werte\nlet userAge = 30; \/\/ Verwenden Sie let f\u00fcr Werte, die sich \u00e4ndern k\u00f6nnen<\/code><\/pre>
          Verwendung von const<\/code> und lassen Sie<\/code> tr\u00e4gt in angemessener Weise zur Verbesserung der Codesicherheit bei und macht es einfacher, \u00fcber die Lebensdauer von Variablen nachzudenken.<\/p>
          5. Benennungskonventionen<\/strong><\/p>
          Konsistente Namenskonventionen machen den Code besser lesbar und wartbar:<\/p>
          • CamelCase<\/strong>: Verwenden Sie camelCase<\/strong> f\u00fcr Variablen- und Funktionsnamen. Zum Beispiel, userId<\/code> oder fetchUserData<\/code>.<\/li>\n\n
          • Klassen<\/strong>: Verwenden Sie UpperCamelCase<\/strong> (PascalCase) f\u00fcr Klassennamen.<\/li>\n\n
          • Konstanten<\/strong>: Verwenden Sie SCHREIENDE_SCHLANGE_KOFFER<\/strong> f\u00fcr Konstanten.<\/li><\/ul>
            const MAX_CONNECTIONS = 5;\nclass BenutzerProfil {\n    constructor( name ) {\n        this.name = name;\n    }\n}<\/code><\/pre>
            \"\"<\/figure>
            CamelCase f\u00fcr Variablen und Funktionen hilft, sie von Klassen und Konstanten zu unterscheiden, was zu einer besseren \u00dcbersichtlichkeit des Codes beitr\u00e4gt.<\/p>
            6. Gleichheitspr\u00fcfungen<\/strong><\/p>
            Verwenden Sie immer Strenge Gleichheit\/Ungleichheit (===******** und !==)<\/strong> Pr\u00fcfungen anstelle von abstrakten Pr\u00fcfungen (== und !=). Dies hilft, unerwartete Arten von Zwang zu vermeiden, die zu Fehlern f\u00fchren k\u00f6nnen.<\/p>
            if ( Name === 'John' ) {\n    \/\/ Strenge Gleichheitspr\u00fcfung\n    console.log( 'Hallo, John!' );\n}\n\nif ( result !== false ) {\n    \/\/ Strenge Ungleichheitspr\u00fcfung\n    console.log( 'Ergebnis ist nicht falsch' );\n}<\/code><\/pre>
            Strenge Gleichheit stellt sicher, dass sowohl der Typ als auch der Wert verglichen werden, was Ihren Code vorhersehbarer macht.<\/p>
            7. String-Behandlung<\/strong><\/p>
            Verwenden Sie einfache Anf\u00fchrungszeichen<\/strong> f\u00fcr Zeichenketten, es sei denn, die Zeichenkette enth\u00e4lt ein einfaches Anf\u00fchrungszeichen; in diesem Fall verwenden Sie doppelte Anf\u00fchrungszeichen, um das Escaping zu vermeiden.<\/p>
            var greeting = 'Hallo Welt!';\nvar statement = \"Es ist ein sch\u00f6ner Tag.\";<\/code><\/pre>
            Diese Regel sorgt f\u00fcr Konsistenz in der gesamten Codebasis und erleichtert es den Entwicklern, die gleichen Praktiken zu befolgen.<\/p>
            8. Anweisungen wechseln<\/strong><\/p>
            Switch-Anweisungen sollten ein Pause<\/strong> f\u00fcr jeden Fall (au\u00dfer f\u00fcr Standard), um Durchfallfehler zu vermeiden. Zus\u00e4tzlich, Case-Anweisungen einr\u00fccken<\/strong> sollten sich in einer Registerkarte innerhalb des Schalters befinden.<\/p>
            switch ( event.keyCode ) {\n    case $.ui.keyCode.ENTER:\n    case $.ui.keyCode.SPACE:\n        executeFunction();\n        break;\n    case $.ui.keyCode.ESCAPE:\n        cancelFunction();\n        break;\n    default:\n        defaultFunction();\n}<\/code><\/pre>
            Eine korrekte Einr\u00fcckung und die Verwendung von Umbr\u00fcchen verhindern ein unbeabsichtigtes Verhalten, wenn mehrere F\u00e4lle erf\u00fcllt sind.<\/p>
            \"\"<\/figure>
            Bew\u00e4hrte Praktiken bei der WordPress JavaScript-Entwicklung<\/strong><\/p>
            1. Vermeiden Sie globale Variablen<\/h4>
            Globale Variablen k\u00f6nnen dazu f\u00fchren, dass Namensraumverschmutzung<\/strong> und Konflikte mit anderen Skripten. Kapseln Sie Ihren Code stattdessen in einer Unmittelbar aufgerufener Funktionsausdruck (IIFE)<\/strong> um einen lokalen Bereich zu erstellen.<\/p>
            ( function() {\n    const localVar = 'Auf diese Funktion skaliert';\n    \/\/ Der Code hier ist vor dem globalen Bereich gesch\u00fctzt\n} )();<\/code><\/pre>
            Die Kapselung von Code verringert das Risiko von Konflikten, insbesondere wenn Sie in Umgebungen mit mehreren Bibliotheken von Drittanbietern arbeiten.<\/p>
            2. Dokumentation und Kommentare<\/strong><\/p>
            WordPress folgt der JSDoc 3 Standard<\/strong> f\u00fcr die Dokumentation von JavaScript-Code. Die Dokumentation ist entscheidend f\u00fcr das Verst\u00e4ndnis der Funktionalit\u00e4t komplexer Methoden, Klassen und Funktionen.<\/p>
            • Einzeilige Kommentare<\/strong>: Verwenden Sie \/\/<\/code> f\u00fcr kurze Erkl\u00e4rungen, insbesondere wenn Sie eine bestimmte Codezeile beschreiben.<\/li>\n\n
            • Mehrzeilige Kommentare<\/strong>: Verwenden Sie \/* *\/<\/code> f\u00fcr ausf\u00fchrlichere Erkl\u00e4rungen oder zur Beschreibung eines Codeblocks.<\/li><\/ul>
              \/**\n * Addiert zwei Zahlen zusammen.\n *\n * @param {Zahl} a - Die erste Zahl.\n * @param {Zahl} b - Die zweite Zahl.\n * @return {number} Summe von a und b.\n *\/\nfunction add( a, b ) {\n    return a + b;\n}<\/code><\/pre>
              Wenn Sie Ihren Code mit JSDoc dokumentieren, k\u00f6nnen Tools die Dokumentation automatisch generieren und helfen Entwicklern, Ihren Code zu verstehen, ohne tief in die Implementierung eintauchen zu m\u00fcssen.<\/p>
              3. Fehlerbehandlung<\/strong><\/p>
              Verwenden Sie try...catch<\/strong> Bl\u00f6cke, um m\u00f6gliche Fehler elegant zu behandeln. Die Fehlerbehandlung stellt sicher, dass unerwartete Probleme nicht zum Ausfall Ihrer gesamten Anwendung f\u00fchren.<\/p>
              try {\n    const data = JSON.parse( jsonString );\n} catch ( error ) {\n    console.error( 'Ung\u00fcltiges JSON:', error );\n}<\/code><\/pre>
              Eine ordnungsgem\u00e4\u00dfe Fehlerbehandlung verbessert die Widerstandsf\u00e4higkeit Ihres Codes und macht es einfacher, ihn zu debuggen und zu warten.<\/p>
              JavaScript-Codierungsstandards in der Praxis<\/h3>
              So stellen Sie sicher, dass Ihr JavaScript-Code den WordPress-Standards entspricht<\/p>
              \"\"<\/figure>","protected":false},"excerpt":{"rendered":"
              Beherrschen der WordPress JavaScript-Codierungsstandards: Ein umfassender Leitfaden f\u00fcr Entwickler JavaScript-Codierungsstandards in WordPress sind entscheidend f\u00fcr die Konsistenz, Lesbarkeit und Qualit\u00e4t des Codes, egal ob...<\/p>","protected":false},"author":1,"featured_media":3129,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,83],"tags":[196,195,197,194],"class_list":["post-1972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-tips","category-developer-tips","tag-best-practices","tag-coding-standards","tag-web-development","tag-wordpress-javascript",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/posts\/1972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/comments?post=1972"}],"version-history":[{"count":6,"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/posts\/1972\/revisions"}],"predecessor-version":[{"id":3542,"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/posts\/1972\/revisions\/3542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/media\/3129"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/media?parent=1972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/categories?post=1972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/de\/wp-json\/wp\/v2\/tags?post=1972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}