防止/重構條件鏈

開發 JavaScript 應用程式時最常見的程式碼異味之一是過多的條件連結。在這篇文章中，我想討論如何透過架構和程式碼來防止這些情況。

目錄

1. 簡介
2. 理解條件鏈
3. 條件鏈的問題
4. 重建條件鏈
5. 透過架構防止條件鏈
6. 前端開發最佳實務
7. 結論

什麼是條件鏈？

過多的條件鍊是 JavaScript 應用程式中常見的程式碼味道。本文探討如何透過改進架構和編碼實踐來預防和重構這些情況。

條件鍊是過多的邏輯運算符，用於在函數或方法中表達條件。讓我們來看一個使用 React 應用程式的範例：

如您在上面的範例中所看到的，存在一系列三個條件，僅決定此程式碼的呈現方式。
條件是：

1. 如果體育清單有元素，則應渲染預設元素；
2. 如果元件的載入狀態為true，則應該渲染一個載入骨架；
3. 如果體育清單中沒有元素，則應呈現空狀態。

這段程式碼主要有兩個問題：

1. 當我們檢查陣列的長度並使用「&&」運算子時，我們告訴 JavaScript 如果存在與陣列長度相關的值，它應該渲染元件。如果沒有數組，則該值應該為 null 或未定義，但是，如果數組存在且其長度為零，則將呈現數字零而不是元素，因為您要求 javascript 呈現連結到數組的長度。
2. 不需要使用鏈來控制這兩個元素的渲染。在渲染組件的“預設”狀態之前添加條件將是處理這種情況的更優雅的方法。

重構

話雖這麼說，上面程式碼的重構版本是：

這是使用 JavaScript 邏輯運算子處理條件鏈的多種方法之一。正如你在上面的程式碼中看到的，我使用了一種非常規的方法來解決程式碼的條件過剩問題。

這個！ ！ JavaScript 中的運算子用於將值強制轉換為布林值。它利用了 JavaScript 具有真值和假值的事實。第一個！運算子對值求反，將真值變成假值，將假值變成真值。第二個！再次求反，得到原始值的布林表示。這通常用於根據字串、數字或物件等值的真實性或虛假性將其轉換為布林值（true 或 false）。

例如：

!!「Hello」的計算結果為 true，因為非空字串為 true。
!!0 的計算結果為 false，因為 0 為 false。

透過架構決策來防止這種情況發生

您不能將此視為規則，但在大多數建立條件鏈的情況下，多餘的條件會嘗試解析和處理動態值，因為如果您正在處理靜態值，則實作往往會變得更加簡單和直接。

當你對資料庫建模時，你必須對軟體的依賴關係有一些擔憂。

人們通常透過 IT 大學學習來學習這種依賴性研究，但我會舉例說明。

軟體的依賴有兩種：

1. 功能依賴項 - 這些相依性直接影響用戶，因為它們是用戶與之互動的功能，例如按鈕、螢幕、輸入、表單等。
2. 非功能依賴項 - 這些依賴項通常不會被一般使用者註意到，因為它們主要是後端依賴項，例如錯誤處理、條件、業務規則、驗證等。

防止前端過度控制

您的後端必須負責系統的所有邏輯部分，因此，大部分功能依賴項必須由後端功能處理，而不是由前端螢幕或使用者互動處理。

當你開始開發一個新功能並了解它需要什麼才能工作時，例如道具、介面和參數，你必須記住什麼是必需的，什麼是可選的，什麼是不可以使用的。

您必須使用上面的範例作為開發會話期間不應執行的操作的範例。正如你所看到的，這個介面只有可選參數，但我懷疑這個元件只會附加「可能」的變數。

在開發元件並將大量令人困惑的程式碼推送到前端應用程式之前，您需要了解元件應該如何運作。如果您只決定：組件將使用什麼以及不使用什麼，則無需處理許多條件，會更容易。

經過更好的考慮，你會想出這樣的東西：

現在介面只有必要的參數，這些參數肯定會在應用程式內的元件生命週期中使用，而沒有許多永遠無法像以前的元件一樣定義或使用的可選參數。

結論

預防和重構條件鏈可以產生更乾淨、更容易維護的程式碼。透過了解組件的需求、在適當的情況下將邏輯轉移到後端並設計清晰的接口，您可以顯著減少前端程式碼中對複雜條件鏈的需求。

照片由 Unsplash 上的 Samsung Memory 拍攝

以上是防止/重構條件鏈的詳細內容。更多資訊請關注PHP中文網其他相關文章！