防御性編程是指一種預(yù)見代碼可能出現(xiàn)問題并提前采取措施來防止這些問題發(fā)生的編程風(fēng)格。在前端開發(fā)中，這尤其重要，因為你的代碼直接與用戶交互，任何錯誤都可能導(dǎo)致糟糕的用戶體驗，甚至安全漏洞。
什么是防御性編程?
顧名思義，防御性編程是一種細(xì)致、謹(jǐn)慎的編程方法。為了開發(fā)可靠的軟件，我們要設(shè)計系統(tǒng)中的每個組件，以使其盡可能的”保護(hù)”自己。我們通過明確地在代碼中對設(shè)想進(jìn)行檢查，這是一種努力，防止我們的代碼以將會展現(xiàn)錯誤行為的方式被調(diào)用。
防御性編程是一種為了保證程序的不可預(yù)見的使用，不會造成程序功能上的損壞。
也就是說希望程序員編寫出來更能抵抗錯誤和漏洞的程序。
對于軟件開發(fā)人員來說，防御性編程就是一整套編程指南，對程序有著極高的理解能力，同時可以對可能遇到的問題具有預(yù)見性。
說一些常見的編程規(guī)范，也就是編程時候盡可能遵循的指南。
防御性編程使我們可以盡早的發(fā)現(xiàn)較小的問題，而不是等到它們發(fā)展成大的災(zāi)難的時候才發(fā)現(xiàn)。其開發(fā)軟件的過程是：
下面總結(jié)了一些防御性編程的反對和支持者的意見：
反對者：
1、它降低了代碼的效;即使是一個很小的額外代碼也需要一些額外的執(zhí)行時間。它對于一個函數(shù)來說也許不要緊，但是對于一個由10萬個函數(shù)組成的系統(tǒng)，問題就變得嚴(yán)重了。
2、每種防御性的做法都需要一些額外的工作;
支持者：
1、防御性編程可以節(jié)省大量的調(diào)試時間，使你可以去做更有意義的事情。
2、編寫可以正常運行、只是速度有些慢的代碼，要遠(yuǎn)遠(yuǎn)好過大多數(shù)時間都正常運行、但是有時候會崩潰的代碼。
3、防御性編程避免了大量的安全性問題。
防御性編程技巧
1、使用好的編碼風(fēng)格和合理的設(shè)計
采用良好的編碼風(fēng)格，來防范大多數(shù)編碼錯誤。如：
◆ const關(guān)鍵字：
關(guān)鍵字const可以給讀你代碼的人傳達(dá)非常有用的信息。例如，在函數(shù)的形參前添加const關(guān)鍵字意味著這個參數(shù)在函數(shù)體內(nèi)不會被修改，屬于輸入?yún)?shù)。
同時，合理地使用關(guān)鍵字const可以使編譯器很自然的保護(hù)那些不希望被修改的參數(shù)，防止其被無意的代碼修改，減少bug的出現(xiàn)。
以下是如何在前端開發(fā)中進(jìn)行防御性編程的一些關(guān)鍵策略：
1. 輸入驗證:
永遠(yuǎn)不要信任用戶輸入: 始終驗證所有來自用戶、API 或其他外部來源的數(shù)據(jù)。這包括檢查數(shù)據(jù)類型、長度、格式和范圍。
使用合適的驗證庫或工具: 利用現(xiàn)有的庫或框架提供的驗證功能，例如 Joi, Yup, validator.js 等，可以簡化驗證過程并提高代碼的可讀性。
對所有輸入進(jìn)行消毒: 防止跨站腳本攻擊 (XSS) 等安全漏洞。使用專門的庫或函數(shù)對輸入進(jìn)行轉(zhuǎn)義或編碼。例如，DOMPurify 可以幫助清理 HTML 輸入。
2. 處理空值和未定義值:
使用可選鏈操作符 (?.) 和空值合并運算符 (??) : JavaScript 的這兩個運算符可以有效地處理可能為空或未定義的值，避免出現(xiàn) TypeError。
在訪問對象屬性之前進(jìn)行檢查: 在訪問嵌套對象屬性之前，確保父對象存在。
為函數(shù)參數(shù)設(shè)置默認(rèn)值: 避免函數(shù)在缺少參數(shù)時產(chǎn)生意外行為。
3. 錯誤處理:
使用 try...catch 塊: 捕獲可能拋出的異常，并提供適當(dāng)?shù)腻e誤處理機制。
記錄錯誤信息: 使用 console.error 或?qū)ｉT的日志記錄工具記錄錯誤信息，以便調(diào)試和監(jiān)控。
向用戶顯示友好的錯誤信息: 避免將原始錯誤信息直接展示給用戶，而是提供更易理解和有幫助的提示。
處理異步操作中的錯誤: 使用 .catch() 方法捕獲 Promise 或 async/await 函數(shù)中的錯誤。
4. 代碼清晰和注釋:
編寫清晰易懂的代碼: 使用有意義的變量名和函數(shù)名，并保持代碼簡潔。
添加必要的注釋: 解釋代碼的邏輯和目的，尤其是在復(fù)雜的代碼塊中。
5. 使用類型檢查:
使用 TypeScript 或 Flow: 這些工具可以幫助你在編譯時發(fā)現(xiàn)類型錯誤，從而減少運行時錯誤的可能性。
6. 測試:
編寫單元測試和集成測試: 確保代碼的各個部分都能正常工作，并能正確地處理各種輸入和邊緣情況。
示例：
// 不安全的代碼
function displayUserData(userData) {
document.getElementById('username').innerText = userData.name;
document.getElementById('email').innerText = userData.email;
}
// 防御性編程示例
function displayUserData(userData) {
if (!userData) {
console.error('User data is missing.');
return;
}
document.getElementById('username').innerText = userData.name ?? 'N/A';
document.getElementById('email').innerText = userData.email ?? 'N/A';
// 使用 DOMPurify 進(jìn)行 XSS 防御 (需要引入 DOMPurify 庫)
// let cleanEmail = DOMPurify.sanitize(userData.email);
// document.getElementById('email').innerText = cleanEmail || 'N/A';
}
下載文檔
