Adakah Kod JavaScript Anda Menyusahkan?

JavaScript, bahasa yang menjadikan tapak web berfungsi, telah dicipta pada tahun 1995 oleh Brendan Eich dalam masa 10 hari sahaja. Ia cepat menjadi popular, walaupun ramai orang mengkritik ciri peliknya. Dari masa ke masa, JavaScript telah berkembang menjadi bahasa yang kuat dan fleksibel yang penting untuk pembangunan web moden. Walau bagaimanapun, ramai pengaturcara masih menulis kod JavaScript yang lambat, berisiko dan direka bentuk dengan buruk.

Mari kita lihat beberapa kesilapan biasa yang boleh dilakukan oleh pengaturcara semasa menulis kod JavaScript. Dan juga menunjukkan kepada anda pembetulan kesilapan ini, untuk menjadikan kod anda lebih selamat dan lebih mudah difahami.

1. Pembolehubah Global dan Ruang Nama Tercemar

JavaScript sangat fleksibel, yang kadangkala boleh membawa kepada masalah. Pengaturcara mungkin secara tidak sengaja mencipta pembolehubah yang boleh digunakan di mana-mana dalam kod, yang boleh menyebabkan ralat yang tidak dijangka, terutamanya dalam projek besar.

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

Menggunakan IIFE (Ungkapan Fungsi Segera Diminta) menyimpan pembolehubah tersembunyi dalam bahagian tertentu kod, menghalangnya daripada mengganggu bahagian lain kod. Ini menjadikan kod lebih selamat dan lebih mudah untuk diurus.

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

2. Pengendalian Data Tidak Selamat

Kod JavaScript yang ditulis dengan buruk kadangkala boleh mendedahkan maklumat rahsia atau gagal membersihkan input pengguna dengan betul, yang boleh membawa kepada masalah keselamatan seperti serangan Cross-Site Scripting (XSS).

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

Menggunakan textContent atau membersihkan input dengan betul menghalang skrip berniat jahat daripada dilaksanakan.

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

3. Terlalu Bergantung pada eval()

Fungsi eval() berbahaya kerana ia membenarkan menjalankan kod daripada rentetan. Ini boleh digunakan oleh penggodam untuk menyelinap masuk kod hasad.

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

Elakkan menggunakan eval() sepenuhnya, sebaliknya, bergantung pada alternatif yang lebih selamat seperti Function dengan kawalan ketat.

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. Pengendalian Ralat yang Lemah

Mengabaikan atau mengendali ralat boleh menyebabkan apl anda ranap atau membocorkan maklumat peribadi.

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

Sentiasa sahkan respons dan laksanakan pengendalian ralat berstruktur.

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. Rahsia Hardcoded

Sekarang di sinilah banyak pembangun pemula melakukan kesilapan. Menyimpan maklumat rahsia seperti kunci API atau kata laluan terus dalam fail JavaScript adalah idea yang tidak baik kerana ia boleh diakses dengan mudah oleh sesiapa sahaja yang melihat kod tersebut.

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

Gunakan pembolehubah persekitaran (.env atau .env.local) atau penyelesaian storan selamat untuk menyimpan rahsia daripada pangkalan kod anda.

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

---

Menulis kod JavaScript yang baik bukan sekadar untuk menjadikannya berfungsi. Ia juga penting untuk memastikan ia selamat, cepat dan mudah difahami serta diubah. Dengan membetulkan kesilapan biasa dan mengikuti amalan yang baik, anda boleh menukar JavaScript anda yang tidak kemas menjadi kod profesional yang bersih.

Pada kali seterusnya anda menulis JavaScript, tanya diri anda: "Adakah kod saya meleset?" Jika jawapannya "ya," sudah tiba masanya untuk memperbaikinya kawan!

Atas ialah kandungan terperinci Adakah Kod JavaScript Anda Menyusahkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!