Saya sudah mengenal IKEA sejak lama, dan saya pernah ke sana ketika saya berada di Guangzhou. Kesan saya adalah bahwa IKEA itu besar, mahal, dan cerdas. Tempatnya besar, barangnya mahal, dan desainnya pintar. Saya tinggal tidak jauh dari IKEA sekarang. Saya punya waktu untuk berbelanja bulan ini. Tempatnya masih luas, barangnya masih mahal, dan desainnya masih bagus. Meskipun saya tidak membeli apa pun, saya tetap memperoleh sesuatu. Melalui metode desain furnitur IKEA, kita dapat berbicara tentang modularitas.
Siswa yang pernah mengunjungi IKEA pasti menyadari bahwa furnitur IKEA pada dasarnya bersifat modular dan dapat dilepas. Hal yang sama juga berlaku untuk karakteristik modularitas. Dapat digabungkan, relatif independen, dan dapat dengan mudah ditambahkan bila diperlukan. Jadi bagaimana kita bisa menerapkan metode ini? Berikan contoh sederhana:
<div kelas="mode-a">
<h3>Demo Modular</h3>
<p>Contoh struktur modular. </p>
</div>
CSS yang sesuai dapat ditulis seperti ini:
.mode-a{...}
.mode-a h3{...}
.mode-ap{...}
Diantaranya, "mode-a" adalah nama modul ini, yang menunjukkan bahwa ini adalah modul bernama "a". Sekarang modul ini dapat ditempatkan di tempat yang Anda perlukan. Karena kita membuat modul, tidak hanya ada satu, kita tambahkan "mode-b" yang lain:
<div kelas="mode-b">
<h3>Demo Modular</h3>
<div>
<h4>Fitur modular:</h4>
<ul>
<li>Relatif mandiri</li>
<li>Portabilitas tinggi</li>
</ul>
</div>
</div>
CSS yang sesuai dapat ditulis seperti ini:
.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
Dalam aplikasi praktis, seringkali perlu menambahkan beberapa nama kelas untuk mengurangi kompleksitas definisi kelas. Contoh ini relatif sederhana, namun cukup untuk menggambarkan karakteristik modularitas. Kedua modul di atas dapat digunakan pada satu halaman atau lebih secara bersamaan.
Di toko IKEA, Anda mungkin memperhatikan bahwa area produk pada dasarnya dibagi oleh para desainer, terutama barang-barang kecil. Kode termodulasi juga dapat ditugaskan ke orang yang berbeda untuk ditulis guna meningkatkan efisiensi. Tentu saja, untuk mengimplementasikan metode ini, kita juga perlu melakukan beberapa pekerjaan, seperti konvensi penamaan modul, di mana antarmuka harus dibiarkan dalam modul, dll. Seperti pada contoh di atas, dapat disepakati bahwa nama modul diawali dengan “mode” dan judul modul menggunakan tag h3. Dengan cara ini, siapa pun yang menulis modul tersebut, modul tersebut akan kompatibel dengan halaman-halaman dalam proyek.
Melihat hal ini, Anda mungkin menemukan bahwa karena struktur tetap modul telah disepakati di atas, bukankah bagian ini ditulis dalam definisi gaya setiap modul sebagai mubazir? Ya. Jika konvensi yang relevan telah dibentuk, bagian dari definisi gaya ini dapat diusulkan dan dimasukkan ke dalam definisi publik proyek untuk mengurangi redundansi kode. Contoh di atas bisa menjadi:
/* =S global */
h3{
/* Cara penulisan yang pertama */
...
}
.mode-a h3,
.mode-b h3{
/* Cara penulisan yang kedua*/
...
}
/* =E global */
/* =Mode S-a */
.mode-a{...}
.mode-ap{...}
/* =Mode E-a */
/* =Mode S-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==Mode E-b */
Saya ingin tahu apakah Anda memperhatikan bahwa barang-barang kecil di IKEA sering kali dapat dipadukan dengan barang-barang lainnya. Ini juga memunculkan topik modularitas lainnya: modul di dalam modul. Artinya, modul lain bisa ada di dalam modul, yang juga mudah dipahami. Sama seperti ketika kita membuat website, struktur seluruh halamannya seperti modul besar, dan contoh di atas adalah modul di dalam sebuah modul. modul, tapi Mari kita persempit definisi ini satu tingkat. Definisi h3 dalam contoh di atas dapat dianggap sebagai sebuah modul. Ini muncul di modul "mode-a" dan "mode-b", dan kinerja strukturalnya relatif tetap.
Oke, ini hanya pengertian label saja, bagaimana jika ada lebih dari satu label? Mari kita ubah contohnya lagi:
<div kelas="mode-b">
<div kelas="mode-a">
<h3>Demo Modular</h3>
<p>Contoh struktur modular. </p>
</div>
<div kelas="lanjutan">
<h4>Fitur modular:</h4>
<ul>
<li>Relatif mandiri</li>
<li>Portabilitas tinggi</li>
</ul>
</div>
</div>
<div kelas="mode-c">
<div kelas="mode-a">
<h3>Demo Modular</h3>
<p>Ini adalah contoh "modul di dalam modul". </p>
</div>
<div kelas="lanjutan">
<h4>Modul di dalam modul:</h4>
<p>Modul "mode-a" adalah modul di dalam modul. </p>
</div>
</div>
/* =Mode S-a */
.mode-a{...}
.mode-a h3{...}
.mode-ap{...}
/* =Mode E-a */
/* =Mode S-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .lanjut{...}
.mode-b .lanjutan li{...}
/* =Mode E-b */
/* =Mode S-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .lanjut{...}
.mode-c .lanjut p{...}
/* =Mode E-c */
Seperti yang Anda lihat di atas, "mode-a" adalah modul independen. Jika merupakan bagian dari "mode-b" dan "mode-c", ia menjadi modul di dalam modul. Meninggalkan masalah, berharap dapat memicu diskusi yang lebih relevan.