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