Tidak ada yang bertanya mengapa fungsi dibutuhkan, karena ini adalah hal yang jelas dan berguna dalam pemrograman. Functions memungkinkan Anda untuk menggunakan kembali kode Anda dan membuat arsitektur aplikasi Anda lebih baik.
Mengapa tidak menggunakan kemampuan yang sama di template komponen. Banyak kerangka kerja saat ini memungkinkan komponen digunakan di dalam komponen lain. Tapi ini lebih seperti menghubungkan modul dari sekedar fungsi. Lagi pula, sebuah komponen, selain template, dapat memiliki kode JavaScript-nya sendiri, gayanya sendiri, dan sangat terisolasi (dan itu bagus).
Untuk kasus ini, Malina.js memiliki, seolah-olah, "fungsi" untuk template "fragmen" , mereka memungkinkan Anda untuk menggunakan kembali fragmen template yang berbeda, mereka jauh lebih ringan daripada komponen, mereka tidak perlu dipindahkan ke file terpisah (yang sering diperlukan dengan komponen), dan mereka memiliki beberapa fitur yang dimiliki fungsi biasa, misalnya rekursi dan closure, karena hasil fragmen dikompilasi menjadi fungsi biasa.
1. Penggunaan kembali fragmen template
Saat Anda mengerjakan template komponen, terutama jika itu adalah formulir, elemen input, panel, dll., Anda mungkin memiliki blok duplikat yang dapat digunakan kembali. Di bawah ini adalah bagian dari template dari js-framework-benchmark , di mana terdapat sejumlah tombol yang identik:
Menggunakan "fragment" akan terlihat seperti ini:
Di sini sebuah fragmen
buttondengan dua argumen dideklarasikan id, name, dan sebuah event "click" dikirim dari tombol tersebut @click. Deretan tombol ini bisa dibuat menggunakan arahan for/each, tapi fragmen bisa digunakan tidak hanya dalam satu baris.
2. Penutupan
Karena sebuah fragmen dikompilasi menjadi sebuah fungsi, yang berarti ia dapat dideklarasikan hampir di mana saja, bahkan di dalam loop
for/each, sehingga ia dapat menggunakan closure. Pada contoh di bawah ini, cuplikan boxmemiliki argumen text, variabel loop tertutup color, dan referensi ke fungsi clickdari root komponen yang dipanggil saat diklik:@click={click(text, color)}
3. Rekursi
"Fragment" dapat memanggil dirinya sendiri yang memungkinkan untuk melakukan rekursi dan membangun pohon, juga "fragmen" dapat ditempatkan di bagian bawah komponen, karena di JavaScript, fungsi ini tersedia di seluruh cakupan (saat ini), meskipun dideklarasikan di bagian akhir.
Di bawah ini adalah contoh cuplikan
drawyang memanggil dirinya sendiri dan membangun pohon:
Kesimpulan
Sebuah "fragmen" adalah "potongan" template yang dapat digunakan kembali di dalam sebuah komponen, ini membantu membuat komponen lebih kompak dengan struktur yang lebih baik.
Semua contoh dapat dicoba di editor REPL online , contoh di intinya .
Terima kasih atas perhatian Anda.