Sistem Reka Bentuk & Pustaka Komponen · Pelajaran

Konvensyen Penamaan untuk Komponen

Pelajari cara penamaan komponen dan propnya yang jelas serta konsisten menjadikan pustaka komponen mudah ditemui, boleh dijangka dan mudah disenggara.

Pelajaran 4 daripada 413 langkah

Konvensyen Penamaan untuk Komponen ialah pelajaran Sistem Reka Bentuk & Pustaka Komponen percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sistem Reka Bentuk & Pustaka Komponen, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sistem Reka Bentuk & Pustaka Komponen merangkumi sejumlah 4 pelajaran.

Mengapa Nama Penting

Masalah paling sukar dalam pustaka komponen bukanlah masalah teknikal - sebaliknya masalah penamaan. Komponen yang dinamakan dengan buruk sukar dicari, mudah disalahgunakan dan menyusahkan untuk dinamakan semula kemudian.

Nama yang baik bertindak sebagai dokumentasi dan mengurangkan soalan yang perlu ditanyakan oleh rakan sepasukan.

Huraikan, Jangan Cuba Menarik Perhatian

Namakan komponen berdasarkan perkara yang dimilikinya atau perkara yang dilakukannya, bukan berdasarkan metafora yang bijak.

Baik: UserAvatar, PrimaryButton
Elakkan: Blob, Sparkle, Thingy

Rakan sepasukan baharu sepatutnya dapat meneka tujuannya hanya berdasarkan nama.

Penggunaan Huruf Yang Konsisten

Pilih satu peraturan penggunaan huruf dan jangan menyimpang daripadanya. Konvensyen web:

Komponen: PascalCase (CardHeader)
Prop: camelCase (isDisabled)
Kelas CSS: kebab-case (card-header)

Mencampurkan gaya penggunaan huruf menghakis kepercayaan terhadap pustaka.

Prop Boolean

Prop boolean paling jelas apabila menggunakan awalan is, has atau should. Prop ini berbunyi seperti soalan dan nilai lalainya ialah false.

Petikan di bawah menunjukkan coraknya.

function describe(props) {
  return 'disabled=' + props.isDisabled + ', loading=' + props.isLoading;
}

console.log(describe({ isDisabled: true, isLoading: false }));

Corak Penamaan Prop

Tetapkan nama prop yang boleh dijangka untuk semua komponen:

variant untuk gaya visual (primary, ghost)
size untuk skala (sm, md, lg)
onChange, onClick untuk pengendali peristiwa

Jika setiap komponen menggunakan nama yang sama, mempelajari satu bermakna anda mempelajari semuanya.

Elakkan Butiran Pelaksanaan

Jangan masukkan butiran rapuh ke dalam nama. BlueButton menjadi tidak benar sebaik sahaja warna jenama berubah.

Utamakan nama berdasarkan tujuan seperti PrimaryButton. Tujuannya kekal walaupun penggayaan berubah.

Penskop Nama dan Awalan

Banyak sistem menambah awalan pada komponen untuk mengelakkan pertembungan dan menunjukkan asalnya: DsButton, AcmeCard.

Ini membantu apabila aplikasi yang menggunakan pustaka sudah mempunyai komponen sendiri. Pilih awalan yang pendek dan gunakannya di semua tempat atau jangan gunakannya langsung - utamakan konsistensi berbanding pilihan peribadi.

Penamaan Komponen Majmuk

Bahagian yang berkaitan sepatutnya berkongsi nama keluarga: Card, CardHeader, CardBody, CardFooter.

Awalan yang dikongsi mengumpulkan bahagian tersebut dalam pelengkapan automatik dan menunjukkan bahawa semuanya berkaitan. Ini jauh lebih jelas berbanding Card, Heading, Content.

Menamakan Semula Memerlukan Kos Tinggi

Setelah nama komponen diterbitkan, setiap aplikasi yang menggunakannya bergantung pada nama itu. Menamakan semula menjadi perubahan yang memecahkan keserasian dan memerlukan kitaran penyusutan.

Luangkan masa untuk memilih nama sejak awal. Perbincangan penamaan selama 10 minit dapat menjimatkan berbulan-bulan kesukaran pemindahan.

Dokumentasikan Peraturan

Tulis konvensyen penamaan anda dalam panduan sumbangan. Penyumbang baharu tidak sepatutnya perlu membuat kejuruteraan balikan terhadap corak anda.

Dokumen penamaan yang ringkas dan dikuatkuasakan memastikan pustaka kekal tersusun apabila lebih ramai orang menyumbang.

Nama Sebagai Kontrak

Pada akhirnya, nama komponen dan nama prop membentuk kontrak API awam. Berikan perhatian yang sama seperti yang anda berikan kepada mana-mana API.

Nama yang boleh dijangka membolehkan pembangun menggabungkan pustaka anda dengan yakin tanpa membaca kod sumber.

Semakan Pantas

Uji naluri penamaan anda.

Jawab dalam pelajaran interaktif

Rumusan

Anda telah mempelajari konvensyen penamaan yang memastikan pustaka komponen mudah digunakan:

Gunakan nama yang jelas dan berasaskan tujuan, bukan nama yang cuba menarik perhatian atau terikat pada warna.
Gunakan gaya huruf dan nama prop yang konsisten serta boleh dijangka.
Kumpulkan komponen majmuk dengan awalan yang dikongsi.
Dokumentasikan peraturan dan ingat bahawa menamakan semula memerlukan kos yang tinggi.

Nama yang baik ialah dokumentasi yang tidak mengganggu.

Percuma untuk bermula

Pelajari Sistem Reka Bentuk & Pustaka Komponen dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Konvensyen Penamaan untuk Komponen” percuma?

Ya — teks penuh “Konvensyen Penamaan untuk Komponen” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sistem Reka Bentuk & Pustaka Komponen, tingkat taraf kepada CoddyKit PRO. Kursus Sistem Reka Bentuk & Pustaka Komponen merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Konvensyen Penamaan untuk Komponen”?

Pelajari cara penamaan komponen dan propnya yang jelas serta konsisten menjadikan pustaka komponen mudah ditemui, boleh dijangka dan mudah disenggara. Anda berlatih Sistem Reka Bentuk & Pustaka Komponen menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Sistem Reka Bentuk & Pustaka Komponen?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Sistem Reka Bentuk & Pustaka Komponen di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Konvensyen Penamaan untuk Komponen” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sistem Reka Bentuk & Pustaka Komponen ini?

Ya. Setiap pelajaran Sistem Reka Bentuk & Pustaka Komponen menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Sistem Reka Bentuk & Pustaka Komponen