你的 JavaScript 程式碼很糟糕嗎？-js教程-PHP中文網

你的 JavaScript 程式碼很糟糕嗎？

Barbara Streisand

發布： 2024-11-28 02:27:14

原創

800 人瀏覽過

Does Your JavaScript Code Sucks?

JavaScript 是讓網站正常運作的語言，由 Brendan Eich 在 1995 年僅用了 10 天就創建了。儘管許多人批評其奇怪的功能，但它很快就流行起來。隨著時間的推移，JavaScript 已經發展成為一種強大且靈活的語言，對於現代 Web 開發至關重要。然而，許多程式設計師仍然編寫緩慢、有風險且設計不良的 JavaScript 程式碼。

讓我們看看程式設計師在編寫 JavaScript 程式碼時可能犯的一些常見錯誤。並向您展示這些錯誤的修復方法，使您的程式碼更安全、更易於理解。

1. 全域變數與被污染的命名空間

JavaScript 非常靈活，有時會導致問題。程式設計師可能會意外建立可在程式碼中任何位置使用的變量，這可能會導致意外錯誤，尤其是在大型專案中。

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（立即呼叫函數表達式）將變數隱藏在程式碼的特定部分中，防止它們幹擾程式碼的其他部分。這使得程式碼更安全、更易於管理。

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

登入後複製

2. 不安全的資料處理

編寫不當的 JavaScript 程式碼有時會洩漏秘密資訊或無法正確清理使用者輸入，從而導致跨站腳本 (XSS) 攻擊等安全問題。

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

登入後複製

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

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

登入後複製

3. 過度依賴eval()

eval() 函數很危險，因為它允許從字串運行程式碼。駭客可以利用它潛入惡意程式碼。

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

登入後複製

完全避免使用 eval()，而是依賴更安全的替代方案，例如嚴格控制的 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. 錯誤處理能力較弱

忽略或錯誤處理錯誤可能會導致您的應用程式崩潰甚至洩露私人資訊。

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

登入後複製

始終驗證回應並實作結構化錯誤處理。

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. 硬編碼的秘密

現在這是許多初學者開發人員犯錯的地方。將 API 金鑰或密碼等秘密資訊直接儲存在 JavaScript 檔案中是一個壞主意，因為任何查看程式碼的人都可以輕鬆存取它。

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

登入後複製

利用環境變數（.env 或 .env.local）或安全儲存解決方案來保護程式碼庫的機密。

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 程式碼不僅僅是讓它運作。確保它安全、快速且易於理解和更改也很重要。透過修復常見錯誤並遵循良好實踐，您可以將混亂的 JavaScript 變成乾淨、專業的程式碼。

下次你寫 JavaScript 時，問問自己：“我的程式碼很糟糕嗎？”如果答案是“是”，那麼是時候改進它了朋友！

以上是你的 JavaScript 程式碼很糟糕嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！