JavaScript 是使網(wǎng)站正常運(yùn)行的語言，由 Brendan Eich 在 1995 年僅用了 10 天就創(chuàng)建了。盡管許多人批評其奇怪的功能，但它很快就流行起來。隨著時間的推移，JavaScript 已經(jīng)發(fā)展成為一種強(qiáng)大且靈活的語言，對于現(xiàn)代 Web 開發(fā)至關(guān)重要。然而，許多程序員仍然編寫緩慢、有風(fēng)險且設(shè)計(jì)不佳的 JavaScript 代碼。

讓我們看看程序員在編寫 JavaScript 代碼時可能犯的一些常見錯誤。并向您展示這些錯誤的修復(fù)方法，使您的代碼更安全、更易于理解。

1. 全局變量和被污染的命名空間

JavaScript 非常靈活，有時會導(dǎo)致問題。程序員可能會意外創(chuàng)建可在代碼中任何位置使用的變量，這可能會導(dǎo)致意外錯誤，尤其是在大型項(xiàng)目中。

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

使用 IIFE（立即調(diào)用函數(shù)表達(dá)式）將變量隱藏在代碼的特定部分中，防止它們干擾代碼的其他部分。這使得代碼更安全、更易于管理。

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

2. 不安全的數(shù)據(jù)處理

編寫不當(dāng)?shù)?JavaScript 代碼有時會泄露秘密信息或無法正確清理用戶輸入，從而導(dǎo)致跨站腳本 (XSS) 攻擊等安全問題。

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

使用 textContent 或正確清理輸入可防止執(zhí)行惡意腳本。

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

3. 過度依賴eval()

eval() 函數(shù)很危險，因?yàn)樗试S從字符串運(yùn)行代碼。黑客可以利用它潛入惡意代碼。

const userCode = "alert('Hacked!')";
eval(userCode); // Wrong!

完全避免使用 eval()，而是依賴更安全的替代方案，例如嚴(yán)格控制的 Function。

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);
}

4. 錯誤處理能力較弱

忽略或錯誤處理錯誤可能會導(dǎo)致您的應(yīng)用程序崩潰甚至泄露私人信息。

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

始終驗(yàn)證響應(yīng)并實(shí)施結(jié)構(gòu)化錯誤處理。

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
    }
};

5. 硬編碼的秘密

現(xiàn)在這是很多初學(xué)者開發(fā)人員犯錯誤的地方。將 API 密鑰或密碼等秘密信息直接存儲在 JavaScript 文件中是一個壞主意，因?yàn)槿魏尾榭创a的人都可以輕松訪問它。

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

利用環(huán)境變量（.env 或 .env.local）或安全存儲解決方案來保護(hù)代碼庫的機(jī)密。

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

編寫好的 JavaScript 代碼不僅僅是讓它工作。確保它安全、快速且易于理解和更改也很重要。通過修復(fù)常見錯誤并遵循良好實(shí)踐，您可以將混亂的 JavaScript 變成干凈、專業(yè)的代碼。

下次你編寫 JavaScript 時，問問自己：“我的代碼很糟糕嗎？”如果答案是“是”，那么是時候改進(jìn)它了朋友！

以上是你的 JavaScript 代碼很糟糕嗎？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！