7 Tipps und Tricks, um JavaScript zu verbessern_Javascript-Tipps

Mit der Verbesserung der Browserleistung und der stetigen Einführung der neuen HTML5-Programmierschnittstelle nimmt die Menge an JavaScript auf Webseiten allmählich zu. Ein schlecht geschriebener Code kann jedoch das Potenzial haben, eine ganze Website kaputt zu machen, Benutzer zu frustrieren und potenzielle Kunden abzuschrecken.
Entwickler müssen alle ihnen zur Verfügung stehenden Tools und Techniken nutzen, um die Qualität ihres Codes zu verbessern und darauf vertrauen zu können, dass die Ausführung jedes Mal vorhersehbar ist. Dieses Thema liegt mir am Herzen und ich habe viele Jahre daran gearbeitet, eine Reihe von Schritten zu finden, die ich im Entwicklungsprozess befolgen kann, um sicherzustellen, dass nur Code höchster Qualität veröffentlicht wird.
Durch die einfache Befolgung dieser sieben Schritte wird die Qualität Ihrer JavaScript-Projekte erheblich verbessert. Durch diesen Workflow werden Fehler reduziert und viele Prozesse optimiert, sodass Benutzer ein angenehmes Surferlebnis haben.

01. Code

Rufen Sie zunächst den strikten Modus von ECMAScript5 und eine „strenge Modus“-Deklaration in Ihrer Funktion auf und verwenden Sie das Entwurfsmuster des Moduls, um die globalen Auswirkungen des Sandbox-unabhängigen Codemoduls beim selbstausführenden Funktionsabschluss zu minimieren. durch alle externen Abhängigkeiten, um globale Variablen klar und prägnant zu halten. Verwenden Sie nur etablierte, bewährte, getestete und bewährte Bibliotheken und Frameworks von Drittanbietern und halten Sie Ihre Funktionen klein und getrennt von Ihren Moduloperationen und anderem Code auf der Ansichtsebene. Jegliche Geschäftslogik oder Daten.
Größere Projekte mit mehreren Entwicklern sollten einem etablierten Satz von Codierungsprinzipien folgen, wie etwa dem JavaScript-Styleguide von Google, und strengere Regeln für die Codeverwaltung erfordern, einschließlich der Verwendung von Async über eine Bibliothek wie RequireJS und der Verwendung von Package Management Module Definition (AMD) für strikte Abhängigkeitsmanagement: Verwenden Sie das Paketmanagement von Bower oder Jam (Client-Bibliotheksverwaltungstools), um auf bestimmte Versionen Ihrer Abhängigkeitsdateien zu verweisen, und übernehmen Sie zur Vereinfachung strukturelle Entwurfsmuster wie das Observer-Muster. Lose gekoppelte Kommunikation zwischen Ihren verschiedenen Codemodulen. Es ist auch eine kluge Idee: Verwenden Sie ein Code-Repository-System wie Git oder Subversion, sichern Sie Ihren Code in der Cloud, bieten Sie die Möglichkeit, eine frühere Version wiederherzustellen, und erstellen Sie über einen Dienst wie Source Code oder Beanstalk komplexere Projekte ein Codezweig, der verschiedene Funktionen ausführt und diese vor der Fertigstellung zusammenführt.

02.Datei

Verwenden Sie strukturierte Kommentarblockformate wie YUIDoc oder JsDoc, um die Funktionalität zu dokumentieren, damit jeder Entwickler ihren Zweck verstehen kann, ohne den Code studieren zu müssen, was Missverständnisse reduziert. Verwenden Sie die Markdown-Syntax, um ausführlichere, längere Kommentare und Erklärungen zu erstellen. Verwenden Sie das zugehörige Befehlszeilentool, um automatisch eine Dokumentation für die Site zu erstellen: Basierend auf diesen Strukturkommentaren stimmt sie mit dem neuesten Stand aller in Ihrem Code vorgenommenen Änderungen überein.

03. Analyse der vergangenen Leistung

Führen Sie regelmäßig ein statisches Code-Analysetool wie JSHint oder JSLint für Ihren Code aus. Diese prüfen auf bekannte Codierungsfehler und potenzielle Fehler, z. B. das Vergessen, den strikten Modus zu verwenden oder auf nicht deklarierte Variablen zu verweisen, sowie fehlende Klammern oder Semikolons. Tool-Kontrollen zur Behebung etwaiger Probleme, um die Qualität Ihres Codes zu verbessern. Versuchen Sie, Standardoptionen für Ihr Projektteam festzulegen, um Codierungsstandards durchzusetzen, z. B. das Einrücken jeder Zeile um Leerzeichen, die Platzierung geschweifter Klammern und die Anzahl der in der Codedatei verwendeten einfachen oder doppelten Anführungszeichen.

04.Test

Ein Unit-Test ist eine kleine, unabhängige Funktionalität, die eine der Funktionen aus Ihrer Hauptcodebasis mit spezifischen Eingaben ausführt, um zu bestätigen, dass sie einen erwarteten Wert ausgibt. Um Ihre Sicherheit zu erhöhen, dass sich der Code wie erwartet verhält, schreiben Sie Komponententests mit einem Framework wie Jasmine oder QUnit für jede Funktion mit erwarteten und unerwarteten Eingabeparametern. Aber vergessen Sie nicht diese Randfälle! Wenn Sie diese Tests auf mehreren Browsern und auf mehreren Betriebssystemen ausführen, indem Sie einen Dienst wie BrowserStack oder Sauce Labs nutzen, können Sie das On-Demand-Testen virtueller Maschinen in der Cloud beschleunigen. Diese beiden Dienste stellen eine API bereit, mit der Ihre Unit-Tests automatisch auf mehreren Browsern gleichzeitig ausgeführt werden können und die Ergebnisse nach Abschluss an Sie zurückgesendet werden. Wenn Ihr Code auf GitHub gespeichert ist, können Sie als Bonus BrowserSwarm nutzen, ein Tool, das Ihre Komponententests automatisch durchführt, wenn Sie Ihren Code festschreiben.

05. Messung

Code-Coverage-Tools wie Istanbul messen, welche Codezeilen ausgeführt wurden, als Ihre Komponententests für Ihre Funktionen ausgeführt wurden, und geben dies als Prozentsatz der gesamten Codezeilen an. Wenn Sie ein Code-Coverage-Tool für Ihre Unit-Tests ausführen und zusätzliche Tests hinzufügen, können Sie Ihren Coverage-Score auf 100 % erhöhen und so mehr Vertrauen in Ihren Code gewinnen.
Die Komplexität einer Funktion kann mit der Halsted-Komplexitätsmetrik gemessen werden: einer Gleichung, die in den 1970er Jahren vom Informatiker Maurice Halsted entwickelt wurde. Die Komplexität einer Funktion wird anhand von Schleifen, Verzweigungen und Iterationen gemessen, um zu quantifizieren: Funktion Komplexität kann mit dem Komplexitätsmaß von Halstead gemessen werden. Wenn dieser Komplexitätswert verringert wird, wird es für uns einfacher, die Funktion zu verstehen und aufrechtzuerhalten, wodurch die Möglichkeit von Fehlern verringert wird. Das Befehlszeilentool PLATO misst und generiert Visualisierungen der Komplexität des JavaScript-Codes und hilft dabei, verbesserungswürdige Funktionen zu identifizieren, während frühere Ergebnisse gespeichert werden, sodass der Qualitätsfortschritt im Laufe der Zeit verfolgt werden kann.

06. Automatisierung

Verwenden Sie einen Task-Runner wie Grunt, um den Prozess der Dokumentation, Analyse, Prüfung, Abdeckung und Erstellung von Komplexitätsberichten zu automatisieren. So sparen Sie Zeit und Mühe und erhöhen Ihre Chancen, auftretende Qualitätsprobleme zu lösen. Die meisten der in diesem Artikel hervorgehobenen Tools und Test-Frameworks sind mit Grunt verknüpft, was Ihnen dabei helfen kann, Ihren Workflow und die Codequalität zu verbessern, ohne einen Finger rühren zu müssen.

07. Umgang mit Ausnahmen

Irgendwann wird Ihr Code bei der Ausführung immer einen Fehler auslösen. Verwenden Sie „try...catch“-Anweisungen, um Laufzeitfehler angemessen zu behandeln und die Auswirkungen des Verhaltens auf Ihre Website zu begrenzen. Verwenden Sie einen Netzwerkdienst, um Laufzeitfehler zu protokollieren. Und nutzen Sie diese Informationen, um neue Komponententests hinzuzufügen, um Ihren Code zu verbessern und diese Fehler nach und nach zu beseitigen.

Schritte zum Erfolg

Diese sieben Schritte haben mir geholfen, einen Teil des Codes zu erstellen, auf den ich in meiner bisherigen Karriere am meisten stolz bin. Sie sind auch eine gute Grundlage für die Zukunft. Nutzen Sie diese Schritte, um in Ihren eigenen Projekten qualitativ hochwertigen JavaScript-Code zu erstellen, und lassen Sie uns gemeinsam daran arbeiten, das Web Schritt für Schritt auf Ihrem Weg zum Erfolg zu verbessern.