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, "&lt;").replace(/>/g, "&gt;");
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）或安全存储解决方案来保护代码库的机密。

// Use environment variables
const API_KEY = process.env.API_KEY;
fetch(`https://api.example.com/data?key=${API_KEY}`);

编写好的 javascript 代码不仅仅是让它工作。确保它安全、快速且易于理解和更改也很重要。通过修复常见错误并遵循良好实践，您可以将混乱的 javascript 变成干净、专业的代码。

下次你编写 javascript 时，问问自己：“我的代码很糟糕吗？”如果答案是“是”，那么是时候改进它了朋友！