」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > # 用可重複使用函數取代通用驗證

# 用可重複使用函數取代通用驗證

發佈於2024-11-06
瀏覽:541

# Replace Generic Validation with Reusable Functions

JavaScript 和 TypeScript 開發人員經常發現自己重複編寫相同的條件。如果您是 Web 開發人員,您可能遇到過這樣的程式碼:

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
    //... save text
   }
}

在這種情況下,event.key是字串類型,例如,如果不小心在「Enter」中包含空格,很容易引入錯誤。

為什麼不將這個條件封裝在一個函數中?

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (checkIsEnterKey(event.key)) {
    //... save text
   }
}

這確保了對 Enter 鍵的所有檢查都是一致且可靠的。

現在,考慮這個驗證:

type Value = null | object;

const value = {} as Value;

if (typeof value === 'object') {
  value; // value type is null | object
}

儘管 TypeScript 很智能,但條件內的值仍然是 Value 型別。這是因為 typeof null 回傳 'object'.

所以,你需要寫:

if (value !== null && typeof value === 'object') {
  value; // value type is object
}

許多開發者遇到這種情況可能不會將其封裝成函數,而是重複編寫。

你一生中寫過多少次同樣的情況?

同樣的錯誤你犯過多少次了?

同樣的條件你以後還會寫幾次?

如果是我,我會這麼做:

if (checkIsObject(value)) {
  value; // value type is object
}

將通用條件封裝在函數中有很多好處。

考慮以下範例:

const array = [0, 1, 2, 3, 4, 5, null, undefined];

讓我們建立一個僅排除空值的陣列。

您可以優先考慮簡潔性並這樣寫:

const numbers = array.filter(Boolean);

不幸的是,這並不理想。 0 也被評估為 false 並被排除。所以你需要寫:

const numbers = array.filter(item => item !== null && item !== undefined);

這不感覺像是醜陋的、不可重用的程式碼嗎?

我可以寫出更優雅的程式碼​​:

const numbers = array.filter(checkIsNullish);

停止重複寫通用條件。它只會導致錯誤,程式碼變得不太可讀。

讓我介紹一下我創建的一個名為 checker 的庫。

此實用函數庫將一般 Web 開發和低階開發中常用的條件表示為函數。所有函數都接受輸入並傳回布林值。

在撰寫本文時,它提供了豐富的函數來處理字串、數字、布林值和空值等資料類型。所有功能都經過測試、記錄,並且易於開始使用。

讓我們來看一些現實世界的例子。

該庫提供的套件全部發佈在JSR上。它們可以輕鬆安裝在 NPM、PNPM、Yarn、Bun 和 Deno 專案中。

這裡我們以NPM的@checker/string包為例。

  1. 安裝軟體套件

在專案目錄中執行以下命令:

  npx jsr add @checker/string
  1. 使用函數
  import { checkIsNotEmptyString, checkIsIndexFound } from "@checker/string";

  const value = "Hello";

  const formatted = value.trim();

  if (checkIsNotEmptyString(formatted)) {
    // formatted !== ''
    // When formatted is not an empty string
  }

  const index = value.indexOf("el");

  if (checkIsIndexFound(index)) {
    // index !== -1
    // When "el" is found in value
  }

我不喜歡使用像 !SOME_CONDITION 這樣的邏輯否定運算子來反轉布林值。這是因為它是隱式的,並且簡單地透過添加或省略它來反轉布林值可能會導致許多危險的情況。

因此,所有函數都定義了對應的 checkIsNot~ 函數。

將通用條件封裝在函數中。這樣,程式碼變得更具可讀性,並且錯誤變得更容易發現。

感謝您的閱讀。

版本聲明 本文轉載於:https://dev.to/cat394/-replace-generic-validation-with-reusable-functions-3nec?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3