防御性編程是指一種預見代碼可能出現(xiàn)問題并提前采取措施來防止這些問題發(fā)生的編程風格。在前端開發(fā)中，這尤其重要，因為你的代碼直接與用戶交互，任何錯誤都可能導致糟糕的用戶體驗，甚至安全漏洞。

什么是防御性編程?

顧名思義，防御性編程是一種細致、謹慎的編程方法。為了開發(fā)可靠的軟件，我們要設計系統(tǒng)中的每個組件，以使其盡可能的”保護”自己。我們通過明確地在代碼中對設想進行檢查，這是一種努力，防止我們的代碼以將會展現(xiàn)錯誤行為的方式被調用。

防御性編程是一種為了保證程序的不可預見的使用，不會造成程序功能上的損壞。

也就是說希望程序員編寫出來更能抵抗錯誤和漏洞的程序。

對于軟件開發(fā)人員來說，防御性編程就是一整套編程指南，對程序有著極高的理解能力，同時可以對可能遇到的問題具有預見性。

說一些常見的編程規(guī)范，也就是編程時候盡可能遵循的指南。

防御性編程使我們可以盡早的發(fā)現(xiàn)較小的問題，而不是等到它們發(fā)展成大的災難的時候才發(fā)現(xiàn)。其開發(fā)軟件的過程是：

下面總結了一些防御性編程的反對和支持者的意見：

反對者：

1、它降低了代碼的效;即使是一個很小的額外代碼也需要一些額外的執(zhí)行時間。它對于一個函數來說也許不要緊，但是對于一個由10萬個函數組成的系統(tǒng)，問題就變得嚴重了。

2、每種防御性的做法都需要一些額外的工作;

支持者：

1、防御性編程可以節(jié)省大量的調試時間，使你可以去做更有意義的事情。

2、編寫可以正常運行、只是速度有些慢的代碼，要遠遠好過大多數時間都正常運行、但是有時候會崩潰的代碼。

3、防御性編程避免了大量的安全性問題。

防御性編程技巧

1、使用好的編碼風格和合理的設計

采用良好的編碼風格，來防范大多數編碼錯誤。如：

◆ const關鍵字：

關鍵字const可以給讀你代碼的人傳達非常有用的信息。例如，在函數的形參前添加const關鍵字意味著這個參數在函數體內不會被修改，屬于輸入參數。

同時，合理地使用關鍵字const可以使編譯器很自然的保護那些不希望被修改的參數，防止其被無意的代碼修改，減少bug的出現(xiàn)。

以下是如何在前端開發(fā)中進行防御性編程的一些關鍵策略：

1. 輸入驗證:

永遠不要信任用戶輸入: 始終驗證所有來自用戶、API 或其他外部來源的數據。這包括檢查數據類型、長度、格式和范圍。

使用合適的驗證庫或工具: 利用現(xiàn)有的庫或框架提供的驗證功能，例如 Joi, Yup, validator.js 等，可以簡化驗證過程并提高代碼的可讀性。

對所有輸入進行消毒: 防止跨站腳本攻擊 (XSS) 等安全漏洞。使用專門的庫或函數對輸入進行轉義或編碼。例如，DOMPurify 可以幫助清理 HTML 輸入。

2. 處理空值和未定義值:

使用可選鏈操作符 (?.) 和空值合并運算符 (??) : JavaScript 的這兩個運算符可以有效地處理可能為空或未定義的值，避免出現(xiàn) TypeError。

在訪問對象屬性之前進行檢查: 在訪問嵌套對象屬性之前，確保父對象存在。

為函數參數設置默認值: 避免函數在缺少參數時產生意外行為。

3. 錯誤處理:

使用 try...catch 塊: 捕獲可能拋出的異常，并提供適當的錯誤處理機制。

記錄錯誤信息: 使用 console.error 或專門的日志記錄工具記錄錯誤信息，以便調試和監(jiān)控。

向用戶顯示友好的錯誤信息: 避免將原始錯誤信息直接展示給用戶，而是提供更易理解和有幫助的提示。

處理異步操作中的錯誤: 使用 .catch() 方法捕獲 Promise 或 async/await 函數中的錯誤。

4. 代碼清晰和注釋:

編寫清晰易懂的代碼: 使用有意義的變量名和函數名，并保持代碼簡潔。

添加必要的注釋: 解釋代碼的邏輯和目的，尤其是在復雜的代碼塊中。

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 進行 XSS 防御 (需要引入 DOMPurify 庫)

// let cleanEmail = DOMPurify.sanitize(userData.email);

// document.getElementById('email').innerText = cleanEmail || 'N/A';

}