Heim > Web-Frontend > js-Tutorial > Hauptteil

Ist Ihr JavaScript-Code scheiße?

Barbara Streisand
Freigeben: 2024-11-28 02:27:14
Original
800 Leute haben es durchsucht

Does Your JavaScript Code Sucks?

JavaScript, die Sprache, die Websites zum Funktionieren bringt, wurde 1995 von Brendan Eich in nur 10 Tagen erstellt. Es wurde schnell populär, auch wenn viele Leute seine seltsamen Eigenschaften kritisierten. Im Laufe der Zeit hat sich JavaScript zu einer starken und flexiblen Sprache entwickelt, die für die moderne Webentwicklung von entscheidender Bedeutung ist. Allerdings schreiben viele Programmierer immer noch JavaScript-Code, der langsam, riskant und schlecht gestaltet ist.

Sehen wir uns einige häufige Fehler an, die Programmierer beim Schreiben von JavaScript-Code machen können. Und zeigen Ihnen auch die Behebung dieser Fehler, um Ihren Code sicherer und verständlicher zu machen.

1. Globale Variablen und verschmutzter Namespace

JavaScript ist sehr flexibel, was manchmal zu Problemen führen kann. Programmierer können versehentlich Variablen erstellen, die an einer beliebigen Stelle im Code verwendet werden können, was insbesondere bei großen Projekten zu unerwarteten Fehlern führen kann.

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior
Nach dem Login kopieren
Nach dem Login kopieren

Durch die Verwendung eines IIFE (Immediately Invoked Function Expression) bleiben Variablen in einem bestimmten Teil des Codes verborgen und verhindern so, dass sie andere Teile des Codes beeinträchtigen. Dadurch wird der Code sicherer und einfacher zu verwalten.

(() => {
    let user = "Admin"; // Scoped to this block
    function setUser() {
        user = "Guest";
    }
    setUser();
    console.log(user); // "Guest" - Intended behavior
})();
Nach dem Login kopieren

2. Unsichere Datenverarbeitung

Schlecht geschriebener JavaScript-Code kann manchmal geheime Informationen preisgeben oder Benutzereingaben nicht ordnungsgemäß bereinigen, was zu Sicherheitsproblemen wie Cross-Site Scripting (XSS)-Angriffen führen kann.

const userInput = "<script>alert('Hacked!')</script>";
document.getElementById("output").innerHTML = userInput; // Wrong!
Nach dem Login kopieren

Die Verwendung von Textinhalten oder die ordnungsgemäße Bereinigung von Eingaben verhindert die Ausführung bösartiger Skripte.

const userInput = "<script>alert('Hacked!')</script>";
const sanitizedInput = userInput.replace(/</g, "<").replace(/>/g, ">");
document.getElementById("output").textContent = sanitizedInput;
Nach dem Login kopieren

3. Übermäßiges Vertrauen in eval()

Die Funktion eval() ist gefährlich, da sie die Ausführung von Code aus einer Zeichenfolge ermöglicht. Dies kann von Hackern genutzt werden, um Schadcode einzuschleusen.

const userCode = "alert('Hacked!')";
eval(userCode); // Wrong!
Nach dem Login kopieren

Vermeiden Sie vollständig die Verwendung von eval(), sondern verlassen Sie sich stattdessen auf sicherere Alternativen wie Funktion mit strenger Kontrolle.

const userCode = "alert('Hacked!')";
// Avoid eval(); implement safer alternatives
try {
    const safeFunction = new Function(userCode); // Limited scope execution
    safeFunction();
} catch (e) {
    console.error("Execution failed:", e);
}
Nach dem Login kopieren

4. Schwache Fehlerbehandlung

Das Ignorieren oder falsche Behandeln von Fehlern kann zum Absturz Ihrer App oder sogar zum Verlust privater Informationen führen.

const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    return response.json(); // Assuming API always returns valid JSON
};
Nach dem Login kopieren

Bestätigen Sie stets die Antworten und implementieren Sie eine strukturierte Fehlerbehandlung.

const fetchData = async () => {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Network response was not ok");
        return await response.json();
    } catch (error) {
        console.error("Fetch failed:", error.message);
        return null; // Graceful degradation
    }
};
Nach dem Login kopieren

5. Fest codierte Geheimnisse

An dieser Stelle machen viele Anfänger-Entwickler Fehler. Das direkte Speichern geheimer Informationen wie API-Schlüssel oder Passwörter in JavaScript-Dateien ist eine schlechte Idee, da jeder, der sich den Code ansieht, leicht darauf zugreifen kann.

const API_KEY = "12345-SECRET";
fetch(`https://api.example.com/data?key=${API_KEY}`);
Nach dem Login kopieren

Verwenden Sie Umgebungsvariablen (.env oder .env.local) oder sichere Speicherlösungen, um Geheimnisse aus Ihrer Codebasis fernzuhalten.

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior
Nach dem Login kopieren
Nach dem Login kopieren

Beim Schreiben von gutem JavaScript-Code geht es nicht nur darum, dass er funktioniert. Es ist auch wichtig sicherzustellen, dass es sicher, schnell und leicht zu verstehen und zu ändern ist. Indem Sie häufige Fehler beheben und bewährte Methoden befolgen, können Sie Ihr unordentliches JavaScript in sauberen, professionellen Code umwandeln.

Wenn Sie das nächste Mal JavaScript schreiben, fragen Sie sich: „Ist mein Code scheiße?“ Wenn die Antwort „Ja“ lautet, ist es Zeit, es zu verbessern, Kumpel!

Das obige ist der detaillierte Inhalt vonIst Ihr JavaScript-Code scheiße?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage