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

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

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

# 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]刪除
最新教學 更多>
  • 在 Hacktoberfest 中做出貢獻的新方式:直接在前端 AI
    在 Hacktoberfest 中做出貢獻的新方式:直接在前端 AI
    Hacktoberfest 又回來了,今年為開發者帶來了一種令人興奮的新參與方式。 您現在可以直接透過 Webcrumbs 平台上的 Frontend AI 建立和提交模板,而不是傳統的 GitHub Pull 請求。只需前往tools.webcrumbs.org,對模板進行編碼,然後在準備好後點擊...
    程式設計 發佈於2024-11-07
  • 為什麼使用不帶括號的函數指標時“cout”列印“1”?
    為什麼使用不帶括號的函數指標時“cout”列印“1”?
    為什麼「cout a function without call it (not f() but f;). Print 1 Always?」在此程式碼中,程式碼嘗試在不使用括號的情況下「呼叫」名為pr 的函數。然而,這實際上並不是呼叫該函數。相反,它將函數指標傳遞給 cout 函數。當函數指標隱式轉...
    程式設計 發佈於2024-11-07
  • 讓您的網頁更快
    讓您的網頁更快
    什么是 DOM?它吃什么? DOM(文档对象模型)是网页及其开发的基础。它是 HTML 和 XML 文档的编程接口,以树状对象表示文档的结构。有树枝和树叶。文档中的每个元素、属性和文本片段都成为该树中的一个节点。它允许 JavaScript 与 HTML 元素交互、修改它们或添加新...
    程式設計 發佈於2024-11-07
  • JavaScript 中的 require 與 import
    JavaScript 中的 require 與 import
    我記得當我開始編碼時,我會看到一些js檔案使用require()來匯入模組和其他檔案使用import。這總是讓我感到困惑,因為我並不真正理解其中的差異是什麼,或者為什麼專案之間存在不一致。如果您想知道同樣的事情,請繼續閱讀! 什麼是 CommonJS? CommonJS 是一組用於...
    程式設計 發佈於2024-11-07
  • 使用鏡像部署 Vite/React 應用程式:完整指南
    使用鏡像部署 Vite/React 應用程式:完整指南
    在 GitHub Pages 上部署 Vite/React 应用程序是一个令人兴奋的里程碑,但这个过程有时会带来意想不到的挑战,特别是在处理图像和资产时。这篇博文将引导您完成整个过程,从最初的部署到解决常见问题并找到有效的解决方案。 无论您是初学者还是有经验的人,本指南都将帮助您避免常见的陷阱,并...
    程式設計 發佈於2024-11-07
  • 我如何在我的 React 應用程式中優化 API 呼叫
    我如何在我的 React 應用程式中優化 API 呼叫
    作为 React 开发者,我们经常面临需要通过 API 同步多个快速状态变化的场景。对每一个微小的变化进行 API 调用可能效率低下,并且会给客户端和服务器带来负担。这就是去抖和巧妙的状态管理发挥作用的地方。在本文中,我们将构建一个自定义 React 钩子,通过合并有效负载和去抖 API 调用来捕获...
    程式設計 發佈於2024-11-07
  • 我們走吧!
    我們走吧!
    為什麼你需要嘗試 GO Go 是一種快速、輕量級、靜態類型的編譯語言,非常適合建立高效、可靠的應用程式。它的簡單性和簡潔的語法使其易於學習和使用,特別是對於新手來說。 Go 的突出功能包括內建的 goroutine 並發性、強大的標準庫以及用於程式碼格式化、測試和依賴管理的強大工具...
    程式設計 發佈於2024-11-06
  • 如何將 PNG 圖像編碼為 CSS 資料 URI 的 Base64?
    如何將 PNG 圖像編碼為 CSS 資料 URI 的 Base64?
    在CSS 資料URI 中對PNG 圖像使用Base64 編碼為了使用資料URI 將PNG 圖片嵌入到CSS 樣式表中,PNG資料必須先編碼為Base64 格式。此技術允許將外部圖像檔案直接包含在樣式表中。 Unix 命令列解決方案:base64 -i /path/to/image.png此指令將輸出...
    程式設計 發佈於2024-11-06
  • API 每小時資料的響應式 JavaScript 輪播
    API 每小時資料的響應式 JavaScript 輪播
    I almost mistook an incomplete solution for a finished one and moved on to work on other parts of my weather app! While working on the carousel that w...
    程式設計 發佈於2024-11-06
  • 用於 Web 開發的 PHP 和 JavaScript 之間的主要差異是什麼?
    用於 Web 開發的 PHP 和 JavaScript 之間的主要差異是什麼?
    PHP 與 JavaScript:伺服器端與客戶端 PHP 的作用與 JavaScript 不同。 PHP 運行在伺服器端。伺服器運行應用程式。除此之外,它還處理表單。當您提交表單時,PHP 會對其進行處理。另一方面,JavaScript 是客戶端的。它在瀏覽器中運行。它處理頁面互...
    程式設計 發佈於2024-11-06
  • 如何在 C++ 中迭代結構和類別成員以在運行時存取它們的名稱和值?
    如何在 C++ 中迭代結構和類別成員以在運行時存取它們的名稱和值?
    迭代結構體和類別成員在 C 中,可以迭代結構體或類別的成員來檢索它們的名稱和價值觀。以下是實現此目的的幾種方法:使用巨集REFLECTABLE 巨集可用於定義允許自省的結構。該巨集將結構體的成員定義為以逗號分隔的類型名稱對清單。例如:struct A { REFLECTABLE ( ...
    程式設計 發佈於2024-11-06
  • 如果需要準確答案,請避免浮動和雙精度
    如果需要準確答案,請避免浮動和雙精度
    float 和 double 問題: 專為科學和數學計算而設計,執行二元浮點運算。 不適合貨幣計算或需要精確答案的情況。 無法準確表示10的負次方,例如0.1,從而導致錯誤。 範例1: 減去美元金額時計算錯誤: System.out.println(1.03 - 0.42); // Resu...
    程式設計 發佈於2024-11-06
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-06
  • 如何在 Python 中使用代理程式運行 Selenium Webdriver?
    如何在 Python 中使用代理程式運行 Selenium Webdriver?
    使用Python 中的代理程式執行Selenium Webdriver當您嘗試將Selenium Webdriver 腳本匯出為Python 腳本並從命令列執行時,可能會遇到在使用代理的情況下出現錯誤。本文旨在解決此問題,提供使用代理有效運行腳本的解決方案。 代理整合要使用代理程式來執行 Selen...
    程式設計 發佈於2024-11-06
  • || 什麼時候運算子充當 JavaScript 中的預設運算子?
    || 什麼時候運算子充當 JavaScript 中的預設運算子?
    理解|| 的目的JavaScript 中非布林運算元的運算子在JavaScript 中,||運算子通常稱為邏輯OR 運算符,通常用於計算布林表達式。但是,您可能會遇到 || 的情況。運算符與非布林值一起使用。 在這種情況下,||運算子的行為類似於「預設」運算子。它不傳回布林值,而是根據某些規則傳回左...
    程式設計 發佈於2024-11-06

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

Copyright© 2022 湘ICP备2022001581号-3