Advertisement
  1. Code
  2. JavaScript

24 beste Methode für JavaScript für Anfänger

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Im Anschluss an "30 HTML and CSS Best Practices" werden wir diese Woche JavaScript überprüfen! Wenn Sie die Liste überprüft haben, teilen Sie uns unbedingt mit, auf welche kleinen Tipps Sie gestoßen sind!


1. Verwenden Sie === anstelle von ==

JavaScript verwendet zwei verschiedene Arten von Gleichheitsoperatoren: === | !== und == | != Es wird als bewährte Methode angesehen, beim Vergleich immer den vorherigen Satz zu verwenden.

"Wenn zwei Operanden vom gleichen Typ und Wert sind, erzeugt === true und !== false." - JavaScript: Die guten Teile

Wenn Sie jedoch mit == und != Arbeiten, treten bei der Arbeit mit verschiedenen Typen Probleme auf. In diesen Fällen versuchen sie erfolglos, die Werte zu erzwingen.


2. Eval = schlecht

Für Unbekannte gibt uns die Funktion "eval" Zugriff auf den JavaScript-Compiler. Im Wesentlichen können wir das Ergebnis eines Strings ausführen, indem wir es als Parameter von "eval" übergeben.

Dies verringert nicht nur die Leistung Ihres Skripts erheblich, sondern stellt auch ein großes Sicherheitsrisiko dar, da es dem übergebenen Text viel zu viel Leistung verleiht. Vermeide es!


3. Verwenden Sie keine Kurzhand

Technisch gesehen können Sie die meisten geschweiften Klammern und Semikolons weglassen. Die meisten Browser interpretieren Folgendes korrekt:

Beachten Sie jedoch Folgendes:

Man könnte denken, dass der obige Code äquivalent wäre zu:

Leider würde er sich irren. In Wirklichkeit bedeutet es:

Wie Sie feststellen werden, ahmt die Einkerbung die Funktionalität der geschweiften Klammer nach. Unnötig zu sagen, dass dies eine schreckliche Praxis ist, die um jeden Preis vermieden werden sollte. Das einzige Mal, dass geschweifte Klammern weggelassen werden sollten, sind Einzeiler, und selbst dies ist ein sehr umstrittenes Thema.

Denken Sie immer an die Zukunft

Was ist, wenn Sie zu einem späteren Zeitpunkt weitere Befehle zu dieser if-Anweisung hinzufügen müssen? Dazu müssten Sie diesen Codeblock neu schreiben. Abschluss: Gehen Sie beim Auslassen vorsichtig vor.


4. Verwenden Sie JS Lint

JSLint ist ein Debugger von Douglas Crockford. Fügen Sie einfach Ihr Skript ein und es wird schnell nach erkennbaren Problemen und Fehlern in Ihrem Code gesucht.

"JSLint nimmt eine JavaScript-Quelle und scannt sie. Wenn ein Problem gefunden wird, wird eine Nachricht zurückgegeben, die das Problem beschreibt, sowie eine ungefähre Position innerhalb der Quelle. Das Problem ist nicht unbedingt ein Syntaxfehler, obwohl dies häufig der Fall ist. JSLint befasst sich mit einigen Stilkonventionen sowie strukturellen Problemen. Es beweist nicht, dass Ihr Programm korrekt ist. Es bietet nur einen weiteren Satz Augen, um Probleme zu erkennen." - JSLint-Dokumentation

Führen Sie es vor dem Abmelden eines Skripts über JSLint aus, um sicherzustellen, dass Sie keine sinnlosen Fehler gemacht haben.



5. Platzieren Sie die Skripte unten auf Ihrer Seite

Dieser Tipp wurde bereits im vorherigen Artikel dieser Serie empfohlen. Da dies jedoch sehr angemessen ist, füge ich die Informationen ein.

Place JS at bottomPlace JS at bottomPlace JS at bottom

Denken Sie daran - das Hauptziel ist es, die Seite für den Benutzer so schnell wie möglich zu laden. Beim Laden eines Skripts kann der Browser erst fortgesetzt werden, wenn die gesamte Datei geladen wurde. Daher muss der Benutzer länger warten, bevor er einen Fortschritt bemerkt.

Wenn Sie über JS-Dateien verfügen, deren einziger Zweck darin besteht, Funktionen hinzuzufügen, z. B. nachdem Sie auf eine Schaltfläche geklickt haben, platzieren Sie diese Dateien unten, kurz vor dem schließenden Body-Tag. Dies ist absolut eine bewährte Methode.

Besser


6. Deklarieren Sie Variablen außerhalb der For-Anweisung

Wenn Sie lange "for" -Anweisungen ausführen, lassen Sie die Engine nicht härter arbeiten, als sie muss. Beispielsweise:

Schlecht

Beachten Sie, wie wir die Länge des Arrays für jede Iteration bestimmen müssen und wie wir den Dom durchlaufen, um jedes Mal das "Container" -Element zu finden - sehr ineffizient!

Besser

Bonuspunkte für die Person, die einen Kommentar hinterlässt, der uns zeigt, wie wir den obigen Codeblock weiter verbessern können.


7. Der schnellste Weg, um einen String zu erstellen

Greifen Sie nicht immer nach Ihrer handlichen "for" -Anweisung, wenn Sie ein Array oder Objekt durchlaufen müssen. Seien Sie kreativ und finden Sie die schnellste Lösung für den jeweiligen Job.

Ich werde Sie nicht mit Benchmarks langweilen. Sie müssen mir nur glauben (oder selbst testen) - dies ist bei weitem die schnellste Methode!

Die Verwendung nativer Methoden (wie join()) ist normalerweise viel schneller als jede nicht native Alternative, unabhängig davon, was sich hinter der Abstraktionsschicht abspielt. - James Padolsey, james.padolsey.com


8. Reduzieren Sie die Globals

"Indem Sie Ihren globalen Fußabdruck auf einen einzigen Namen reduzieren, verringern Sie die Wahrscheinlichkeit schlechter Interaktionen mit anderen Anwendungen, Widgets oder Bibliotheken erheblich." - Douglas Crockford

Besser

Beachten Sie, wie wir "unseren Footprint" auf das lächerlich benannte "DudeNameSpace"-Objekt reduziert haben.


9. Kommentieren Sie Ihren Code

Es mag zunächst unnötig erscheinen, aber vertrauen Sie mir, Sie möchten Ihren Code so gut wie möglich kommentieren. Was passiert, wenn Sie Monate später zum Projekt zurückkehren und feststellen, dass Sie sich nicht leicht an Ihre Denkweise erinnern können? Oder was ist, wenn einer Ihrer Kollegen Ihren Code überarbeiten muss? Kommentieren Sie immer wichtige Abschnitte Ihres Codes.


10. Umfassen Sie progressive Verbesserung

Kompensieren Sie immer, wenn JavaScript deaktiviert ist. Es könnte verlockend sein zu denken: "Die Mehrheit meiner Zuschauer hat JavaScript aktiviert, also mache ich mir darüber keine Sorgen." Dies wäre jedoch ein großer Fehler.

Haben Sie sich einen Moment Zeit genommen, um Ihren schönen Schieberegler mit deaktiviertem JavaScript anzuzeigen? (Laden Sie die Web Developer Toolbar herunter, um dies auf einfache Weise zu tun.) Es könnte Ihre Website vollständig beschädigen. Als Faustregel sollten Sie Ihre Website unter der Annahme gestalten, dass JavaScript deaktiviert wird. Sobald Sie dies getan haben, beginnen Sie, Ihr Layout schrittweise zu verbessern!


11. Übergeben Sie keinen String an "SetInterval" oder "SetTimeOut".

Betrachten Sie den folgenden Code:

Dieser Code ist nicht nur ineffizient, sondern funktioniert auch genauso wie die Funktion "eval". Übergeben Sie niemals eine Zeichenfolge an SetInterval und SetTimeOut. Übergeben Sie stattdessen einen Funktionsnamen.


12. Verwenden Sie nicht die "With"-Anweisung

Auf den ersten Blick scheinen "With"-Anweisung eine kluge Idee zu sein. Das Grundkonzept besteht darin, dass sie als Abkürzung für den Zugriff auf tief verschachtelte Objekte verwendet werden können. Beispielsweise...

-- Anstatt von --

Leider wurde nach einigen Tests festgestellt, dass sie sich "sehr schlecht verhalten, wenn sie neue Mitglieder einstellen". Stattdessen sollten Sie var verwenden.


13. Verwenden Sie {} anstelle von New Object()

Es gibt mehrere Möglichkeiten, Objekte in JavaScript zu erstellen. Vielleicht besteht die traditionellere Methode darin, den "new" Konstruktor wie folgt zu verwenden:

Diese Methode erhält jedoch den Stempel "Bad Practice", ohne dass dies tatsächlich der Fall ist. Stattdessen empfehle ich Ihnen, die wesentlich robustere Objektliteralmethode zu verwenden.

Besser

Beachten Sie, dass {} den Trick ausführt, wenn Sie einfach ein leeres Objekt erstellen möchten.

"Objektliterale ermöglichen es uns, Code zu schreiben, der viele Funktionen unterstützt und dennoch für die Implementierer unseres Codes relativ einfach ist. Es ist nicht erforderlich, Konstruktoren direkt aufzurufen oder die richtige Reihenfolge der an Funktionen usw. übergebenen Argumente beizubehalten. " - dyn-web.com


14. Verwenden Sie [] anstelle von New Array()

Gleiches gilt für die Erstellung eines neuen Arrays.

Okay

Besser

"Ein häufiger Fehler in JavaScript-Programmen besteht darin, ein Objekt zu verwenden, wenn ein Array erforderlich ist, oder ein Array, wenn ein Objekt erforderlich ist. Die Regel ist einfach: Wenn die Eigenschaftsnamen kleine aufeinanderfolgende Ganzzahlen sind, sollten Sie ein Array verwenden. Verwenden Sie andernfalls ein Objekt." - Douglas Crockford


15. Lange Liste von Variablen? Lassen Sie das Schlüsselwort "Var" weg und verwenden Sie stattdessen Kommas

Besser

...sollte eher selbsterklärend sein. Ich bezweifle, dass es hier echte Geschwindigkeitsverbesserungen gibt, aber es bereinigt Ihren Code ein wenig.


17. Verwenden Sie immer Semikolons

Technisch gesehen können Sie mit den meisten Browsern Semikolons weglassen.

Dies ist jedoch eine sehr schlechte Praxis, die möglicherweise zu viel größeren und schwerer zu findenden Problemen führen kann.

Besser


18. "For in"-Anweisungen

Wenn Sie Elemente in einem Objekt durchlaufen, werden Sie möglicherweise auch Methodenfunktionen abrufen. Um dies zu umgehen, schließen Sie Ihren Code immer in eine if-Anweisung ein, die die Informationen filtert

Wie aus JavaScript: The Good Parts von Douglas Crockford hervorgeht.


19. Verwenden Sie die "Timer"-Funktion von Firebug, um Ihren Code zu optimieren

Benötigen Sie eine schnelle und einfache Methode, um festzustellen, wie lange eine Operation dauert? Verwenden Sie die "Timer"-Funktion von Firebug, um die Ergebnisse zu protokollieren.


20. Lesen, lesen, lesen...

Während ich ein großer Fan von Webentwicklungs-Blogs bin (wie dieser!), Es gibt wirklich keinen Ersatz für ein Buch, wenn Sie etwas zu Mittag essen oder kurz bevor Sie ins Bett gehen. Halten Sie immer ein Webentwicklungsbuch auf Ihrem Nachttisch. Hier sind einige meiner JavaScript-Favoriten.

Lies sie...mehrmals. Ich mache immernoch!


21. Selbstausführende Funktionen

Anstatt eine Funktion aufzurufen, ist es ganz einfach, eine Funktion automatisch auszuführen, wenn eine Seite geladen oder eine übergeordnete Funktion aufgerufen wird. Schließen Sie Ihre Funktion einfach in Klammern ein und fügen Sie dann einen zusätzlichen Satz hinzu, der die Funktion im Wesentlichen aufruft.


22. Rohes JavaScript kann immer schneller sein als die Verwendung einer Bibliothek

JavaScript-Bibliotheken wie jQuery und Mootools können Ihnen beim Codieren enorm viel Zeit sparen - insbesondere bei AJAX-Vorgängen. Denken Sie jedoch immer daran, dass eine Bibliothek niemals so schnell sein kann wie rohes JavaScript (vorausgesetzt, Sie codieren korrekt).

Die "each" -Methode von jQuery eignet sich hervorragend zum Schleifen, aber die Verwendung einer nativen "for" -Anweisung ist immer eine Unze schneller.


23. Crockfords JSON.Parse

Obwohl JavaScript 2 über einen integrierten JSON-Parser verfügen sollte, müssen wir zum jetzigen Zeitpunkt noch einen eigenen implementieren. Douglas Crockford, der Ersteller von JSON, hat bereits einen Parser erstellt, den Sie verwenden können. Es kann HIER heruntergeladen werden.

Durch einfaches Importieren des Skripts erhalten Sie Zugriff auf ein neues globales JSON-Objekt, mit dem Sie Ihre JSON-Datei analysieren können.


24. Entfernen Sie "Sprache"

Vor Jahren war es nicht ungewöhnlich, das Attribut "Sprache" in Skript-Tags zu finden.

Dieses Attribut ist jedoch längst veraltet. also lass es weg.


Das war's Leute

Da hast du es also; 24 wichtige Tipps für den Einstieg in JavaScripters. Lass mich deine schnellen Tipps wissen! Danke fürs Lesen. Welches Thema sollte der dritte Teil dieser Reihe behandeln?

Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.

Schauen Sie sich auch die Tausenden von JavaScript-Elementen an, die auf Envato Market verfügbar sind. Es gibt sicher etwas, das Ihnen bei Ihrer JavaScript-Entwicklung hilft.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.