Menguasai Argumen Fungsi: Less is More dalam JavaScript

Hai rakan-rakan dev! ? Hari ini, mari kita selami aspek penting dalam menulis JavaScript yang bersih dan boleh diselenggara: menguruskan hujah fungsi

Masalah dengan Terlalu Banyak Hujah

Pernahkah anda menemui fungsi yang kelihatan seperti ini?

function createMenu(title, body, buttonText, cancellable, theme, fontSize, callback) {
  // ...a whole lot of logic here
}

Jika ada, anda tahu betapa peritnya cuba mengingati susunan hujah, atau lebih teruk lagi, menyahpepijat apabila seseorang tidak dapat tidak mencampurkannya. ?

Peraturan Dua Hujah

Berikut ialah peraturan emas: Cuba hadkan fungsi anda kepada dua argumen atau kurang.
kenapa? Berikut ialah beberapa sebab yang menarik:

• Kebolehujian yang Dipertingkatkan: Lebih sedikit hujah bermakna lebih sedikit kes ujian untuk merangkumi semua kemungkinan.
• Kebolehbacaan Dipertingkat: Lebih mudah untuk memahami tujuan fungsi sepintas lalu.
• Beban Kognitif Dikurangkan: Kurang juggling mental parameter untuk pembangun menggunakan fungsi.

Tetapi Bagaimana Jika Saya Memerlukan Lebih Banyak Parameter?

Soalan yang bagus! Di sinilah keajaiban pemusnahan objek masuk. Lihat ini:

function createMenu({ title, body, buttonText, cancellable, theme = 'light', fontSize = 16, callback = () => {} }) {
  // Your implementation here
}

// Usage
createMenu({
  title: "Settings",
  body: "Adjust your preferences",
  buttonText: "Save",
  cancellable: true
});

Faedah Pendekatan Ini

• Mensimulasikan Parameter Dinamakan: Anda boleh memberikan hujah dalam sebarang susunan. Pendokumentasian Kendiri: Tandatangan fungsi jelas menunjukkan sifat yang diharapkan. Nilai Lalai: Tetapkan lalai dengan mudah untuk parameter pilihan. Mencegah Kesan Sampingan: Memusnahkan klon nilai primitif, membantu mengelakkan mutasi tidak sengaja. Mesra Liter: Alat boleh memberi amaran kepada anda tentang sifat yang tidak digunakan.

Petua Pro: TypeScript Boost

Jika anda menggunakan TypeScript, anda boleh mengambil langkah ini lebih jauh:

interface MenuOptions {
  title: string;
  body: string;
  buttonText: string;
  cancellable: boolean;
  theme?: 'light' | 'dark';
  fontSize?: number;
  callback?: () => void;
}

function createMenu(options: MenuOptions) {
  // Implementation
}

Ini menambahkan keselamatan jenis dan autolengkap, menjadikan kod anda lebih mantap!

Membungkus

Dengan menggunakan corak ini, anda akan mendapati fungsi anda menjadi lebih fleksibel, lebih mudah digunakan dan lebih mudah untuk diselenggara. Ini adalah perubahan kecil yang boleh memberi kesan besar pada kualiti kod anda.

Apakah pendapat anda tentang pendekatan ini? Adakah anda mempunyai petua lain untuk menguruskan hujah fungsi? Jom bincang dalam komen!

Selamat pengekodan! ?

Atas ialah kandungan terperinci Menguasai Argumen Fungsi: Less is More dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!