Mencegah/Memfaktorkan Semula Rantaian Bersyarat

Salah satu bau kod yang paling biasa semasa membangunkan aplikasi JavaScript ialah lebihan rantaian bersyarat. Dalam artikel ini, saya ingin berhujah tentang cara mencegah kes ini melalui seni bina dan kod.

Jadual Kandungan

1. Pengenalan
2. Memahami Rantaian Bersyarat
3. Masalah dengan Rantai Bersyarat
4. Pemfaktoran Semula Rantai Bersyarat
5. Mencegah Rantaian Bersyarat melalui Seni Bina
6. Amalan Terbaik untuk Pembangunan Bahagian Hadapan
7. Kesimpulan

Apakah rantai bersyarat?

Perantaian bersyarat yang berlebihan ialah bau kod biasa dalam aplikasi JavaScript. Artikel ini meneroka cara mencegah dan memfaktorkan semula kes ini melalui seni bina dan amalan pengekodan yang dipertingkatkan.

Rantai bersyarat ialah pengendali logik yang berlebihan yang digunakan untuk menyatakan keadaan dalam fungsi atau kaedah. Mari lihat contoh menggunakan aplikasi React:

Seperti yang anda boleh lihat dalam contoh di atas, terdapat rangkaian tiga syarat sahaja untuk menentukan cara kod ini harus diberikan.
Syaratnya ialah:

1. Jika senarai sukan mempunyai elemen, elemen lalai harus diberikan;
2. Jika keadaan pemuatan komponen adalah benar, rangka pemuatan harus ditunjukkan;
3. Jika tiada unsur dalam senarai sukan, keadaan kosong harus diberikan.

Dalam kod ini, terdapat dua masalah utama:

1. Apabila kami menyemak panjang tatasusunan dan menggunakan pengendali "&&", kami memberitahu javascript bahawa ia harus memaparkan komponen jika terdapat nilai yang berkaitan dengan panjang tatasusunan. Jika tiada tatasusunan, nilai ini seharusnya nol atau tidak ditentukan, tetapi, jika tatasusunan wujud dan panjangnya adalah sifar, nombor sifar akan diberikan dan bukannya elemen, kerana anda meminta javascript untuk memaparkan nilai yang dipautkan kepada panjang tatasusunan.
2. Tidak perlu menggunakan rantai untuk mengawal pemaparan kedua-dua elemen ini. Menambah syarat sebelum pemaparan keadaan "lalai" komponen akan menjadi cara yang lebih elegan untuk menangani situasi ini.

Pemfaktoran semula

Maksudnya, versi refactored kod di atas ialah:

Ini adalah salah satu daripada banyak cara untuk menangani rantaian bersyarat menggunakan pengendali logik JavaScript. Seperti yang anda boleh lihat dalam kod di atas, saya telah menggunakan pendekatan bukan biasa untuk menyelesaikan lebihan bersyarat kod.

Yang !! operator dalam JavaScript digunakan untuk memaksa nilai kepada boolean. Ia mengambil kesempatan daripada fakta bahawa JavaScript mempunyai nilai kebenaran dan palsu. Yang pertama! operator menafikan nilai, menukar nilai kebenaran kepada nilai palsu dan palsu kepada benar. Yang kedua! menafikannya sekali lagi, menghasilkan perwakilan boolean bagi nilai asal. Ini sering digunakan untuk menukar nilai seperti rentetan, nombor atau objek kepada nilai boolean (sama ada benar atau palsu), berdasarkan kebenaran atau kepalsuannya.

Contohnya:

!!"Hello" menilai kepada benar kerana rentetan bukan kosong adalah benar.
!!0 bernilai palsu kerana 0 adalah palsu.

Menghalangnya daripada berlaku melalui keputusan seni bina

Anda tidak boleh mengambil ini sebagai peraturan, tetapi dalam kebanyakan kes di mana rantaian bersyarat dicipta, lebihan syarat cuba menghuraikan dan mengendalikan nilai dinamik, kerana jika anda berurusan dengan nilai statik, pelaksanaan cenderung menjadi lebih ringkas dan mudah.

Apabila anda memodelkan pangkalan data, anda mesti mempunyai sedikit kebimbangan tentang kebergantungan perisian.

Orang ramai biasanya mempelajari kajian pergantungan jenis ini melalui pengajian kolej IT mereka, tetapi saya akan menggambarkannya.

Terdapat dua jenis kebergantungan pada perisian:

1. Kebergantungan fungsional - kebergantungan ini secara langsung memberi kesan kepada pengguna, kerana ia adalah ciri yang berinteraksi dengan pengguna, seperti butang, skrin, input, borang, dll.
2. Kebergantungan tidak berfungsi - kebergantungan ini biasanya tidak disedari oleh pengguna biasa kerana kebanyakannya adalah kebergantungan belakang, seperti pengendalian ralat, syarat, peraturan perniagaan, pengesahan, dsb.

Mencegah kawalan berlebihan bahagian hadapan

Bahagian belakang anda mesti bertanggungjawab untuk semua bahagian logik sistem anda, jadi, majoriti kebergantungan fungsi anda mesti dikendalikan oleh fungsi bahagian belakang, bukan oleh skrin hadapan atau interaksi pengguna.

Apabila anda mula membangunkan ciri baharu dan memahami perkara yang diperlukan untuk berfungsi, seperti prop, antara muka dan parameter, anda mesti memikirkan perkara yang diperlukan, perkara yang akan menjadi pilihan dan perkara yang tidak mesti digunakan.

Anda mesti menggunakan contoh di atas sebagai contoh perkara yang tidak boleh dilakukan semasa sesi pembangunan anda. Seperti yang anda lihat, antara muka ini hanya mempunyai parameter pilihan, tetapi saya ragu komponen ini hanya akan mempunyai pembolehubah "mungkin" yang dilampirkan padanya.

Anda perlu memahami cara komponen anda sepatutnya berfungsi sebelum membangunkannya dan menolak banyak kod yang mengelirukan ke aplikasi bahagian hadapan anda. Daripada berurusan dengan banyak syarat, lebih mudah jika anda hanya memutuskan: apa yang akan digunakan oleh komponen dan apa yang tidak.

Selepas mempertimbangkannya dengan lebih baik, anda akan menghasilkan sesuatu seperti ini:

Kini antara muka hanya mempunyai parameter yang diperlukan yang pastinya akan digunakan sepanjang hayat komponen dalam apl anda, tidak mempunyai banyak parameter pilihan yang tidak boleh ditakrifkan atau digunakan seperti komponen sebelum ini.

Kesimpulan

Mencegah dan memfaktorkan semula rantaian bersyarat membawa kepada kod yang lebih bersih dan boleh diselenggara. Dengan memahami keperluan komponen anda, mengalihkan logik ke bahagian belakang jika sesuai, dan mereka bentuk antara muka yang jelas, anda boleh mengurangkan dengan ketara keperluan untuk rantaian bersyarat kompleks dalam kod bahagian hadapan anda.

---

Foto oleh Samsung Memory on Unsplash

Atas ialah kandungan terperinci Mencegah/Memfaktorkan Semula Rantaian Bersyarat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!