Rumah > hujung hadapan web > tutorial js > # Gantikan Pengesahan Generik dengan Fungsi Boleh Digunakan Semula

# Gantikan Pengesahan Generik dengan Fungsi Boleh Digunakan Semula

王林
Lepaskan: 2024-09-03 14:35:08
asal
736 orang telah melayarinya

# Replace Generic Validation with Reusable Functions

Pembangun JavaScript dan TypeScript sering mendapati diri mereka menulis syarat yang sama berulang kali. Jika anda seorang pembangun web, anda mungkin pernah menemui kod seperti ini:

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

Dalam kes ini, event.key adalah daripada jenis rentetan dan mudah untuk memperkenalkan pepijat dengan secara tidak sengaja menyertakan ruang dalam 'Enter', contohnya.

Mengapa tidak merangkum keadaan ini dalam fungsi?

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

Ini memastikan semua semakan untuk kekunci Enter adalah konsisten dan boleh dipercayai.

Sekarang, pertimbangkan pengesahan ini:

type Value = null | object;

const value = {} as Value;

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

Walaupun TypeScript pintar, nilai dalam keadaan kekal daripada jenis Value. Ini kerana jenis null mengembalikan 'objek'.

Jadi, anda perlu menulis:

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

Ramai pembangun mungkin tidak memasukkan ini ke dalam fungsi dan sebaliknya menulisnya berulang kali apabila mereka menghadapi situasi ini.

Berapa kali anda telah menulis keadaan yang sama dalam hidup anda?

Berapa kali anda melakukan kesilapan yang sama?

Berapa kali lagi anda akan menulis keadaan yang sama pada masa hadapan?

Jika saya, saya akan lakukan ini:

if (checkIsObject(value)) {
  value; // value type is object
}
Salin selepas log masuk

Terdapat banyak faedah untuk merangkum keadaan generik dalam fungsi.

Pertimbangkan contoh berikut:

const array = [0, 1, 2, 3, 4, 5, null, undefined];
Salin selepas log masuk

Mari kita buat tatasusunan yang mengecualikan hanya nilai batal.

Anda mungkin mengutamakan ringkasan dan menulisnya seperti ini:

const numbers = array.filter(Boolean);
Salin selepas log masuk

Malangnya, ini tidak sesuai. 0 juga dinilai sebagai palsu dan dikecualikan. Jadi anda perlu menulis:

const numbers = array.filter(item => item !== null && item !== undefined);
Salin selepas log masuk

Adakah ini tidak terasa seperti kod hodoh dan tidak boleh digunakan semula?

Saya boleh menulis kod yang lebih elegan:

const numbers = array.filter(checkIsNullish);
Salin selepas log masuk

Berhenti menulis syarat generik berulang kali. Ia hanya membawa kepada kesilapan dan kod menjadi kurang boleh dibaca.

Izinkan saya memperkenalkan perpustakaan yang saya cipta dipanggil checker.

Pustaka fungsi utiliti ini mewakili keadaan yang biasa digunakan dalam pembangunan web umum dan pembangunan peringkat rendah sebagai fungsi. Semua fungsi mengambil input dan mengembalikan nilai boolean.

Pada masa menulis artikel ini, ia menyediakan banyak fungsi untuk mengendalikan jenis data seperti rentetan, nombor, boolean dan nilai batal. Semua fungsi diuji, didokumenkan dan mudah digunakan.

Mari kita lihat beberapa contoh dunia sebenar.

Pakej yang disediakan oleh perpustakaan ini semuanya diterbitkan di JSR. Ia boleh dipasang dengan mudah dalam projek NPM, PNPM, Benang, Bun dan Deno.

Di sini, kami akan mengambil pakej @checker/rentetan sebagai contoh dengan NPM.

  1. Pasang pakej

Jalankan arahan berikut dalam direktori projek anda:

  npx jsr add @checker/string
Salin selepas log masuk
  1. Menggunakan fungsi
  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
  }
Salin selepas log masuk

Saya tidak gemar menggunakan operator penolakan logik seperti !SOME_CONDITION untuk membalikkan nilai boolean. Ini kerana ia adalah tersirat, dan hanya membalikkan nilai boolean dengan menambah atau meninggalkannya boleh membawa kepada banyak situasi berbahaya.

Oleh itu, semua fungsi mempunyai fungsi checkIsNot~ yang sepadan.

Merangkum keadaan generik dalam fungsi. Dengan cara ini, kod menjadi lebih mudah dibaca dan pepijat menjadi lebih mudah dikesan.

Terima kasih kerana membaca.

Atas ialah kandungan terperinci # Gantikan Pengesahan Generik dengan Fungsi Boleh Digunakan Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan