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 } }
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 } }
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 }
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 }
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 }
Terdapat banyak faedah untuk merangkum keadaan generik dalam fungsi.
Pertimbangkan contoh berikut:
const array = [0, 1, 2, 3, 4, 5, null, undefined];
Mari kita buat tatasusunan yang mengecualikan hanya nilai batal.
Anda mungkin mengutamakan ringkasan dan menulisnya seperti ini:
const numbers = array.filter(Boolean);
Malangnya, ini tidak sesuai. 0 juga dinilai sebagai palsu dan dikecualikan. Jadi anda perlu menulis:
const numbers = array.filter(item => item !== null && item !== undefined);
Adakah ini tidak terasa seperti kod hodoh dan tidak boleh digunakan semula?
Saya boleh menulis kod yang lebih elegan:
const numbers = array.filter(checkIsNullish);
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.
Jalankan arahan berikut dalam direktori projek anda:
npx jsr add @checker/string
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 }
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!