(Catatan: Ini adalah salah satu artikel yang ditulis dalam serangkaian pengembangan berbasis plugin vue. Jika Anda baru, silakan lihat cerita selengkapnya di sini)
Di tingkat atas, jika kita melihat pengembangan aplikasi front-end, kita memiliki tiga lapisan utama
- Lapisan Bisnis (Logika)
- Lapisan Layanan (panggilan API)
- Lapisan UI (Presentasi)
Mari kita bahas sedikit tentang hal ini dan akan mengeksplorasi bagaimana kita dapat meningkatkannya untuk pendekatan modular kita
Lapisan Bisnis
Di sinilah letak seluruh logika aplikasi. Jadi kami berpikir, bagaimana kami memisahkan lapisan ini, sehingga siapa pun dapat menulis logika mereka untuk setiap plugin yang mereka gunakan. Menariknya kami tidak menemukan solusi seperti itu karena sulit membedakan logika lengkap karena beberapa bagian logika akan terprogram dengan plugin itu sendiri. Jadi kami mengidentifikasi logika penting, dan kami memberikan kait di dalam aplikasi, dan semua kait ini akan dikonfigurasi menggunakan file konfigurasi. Sebelumnya kita telah melihat cara membangun plugin inti yang akan mengambil konfigurasi ini dan menyuntikkannya ke setiap plugin
Lapisan Layanan
Di sinilah front-end berinteraksi dengan backend dan memberi bahan bakar pada mesin. Sebelumnya, kami tidak pernah berpikir untuk membangun layanan sebagai paket terpisah, namun setelah kami membuatnya, kami mendapat banyak kendali atas plugin. Jadi kami membuat layanan sebagai paket berbeda, paket ini hanyalah buku telepon API. Jadi siapa pun yang ingin memanggil API tidak perlu khawatir tentang parameter statis dan semua itu dapat memanggil layanan dengan menggunakan nama tersebut.
Jadi paket layanan kami memiliki instance Axios dan semua URL yang diperlukan untuk melakukan panggilan API. Sekarang di plugin kami, kami akan memanggil layanan tersebut dengan
service.makeCall('user/getUsers').then(...)
Sekarang kami dapat memberikan cara kepada konsumen untuk memanipulasi panggilan API ini dalam konfigurasi seperti,
plugins:{
users:{
services:{getUsers:'user/getUsersV2'}
}
}
Di plugin kami, alih-alih melakukan panggilan default, kami akan memeriksa konfigurasi terlebih dahulu dan memberi tahu layanan untuk melakukan panggilan.
Lapisan UI
Setelah mesin kami berjalan, ini adalah tempat di mana kami dapat melihat beberapa konten. Jadi kami memikirkan untuk mempraktikkan beberapa hal yang dapat membuat hidup kami sedikit lebih mudah.
Penyuntik Tema
Kami membuat injektor tema yang akan memasukkan warna pada waktu berjalan berdasarkan beberapa id. Kami menghosting beberapa file CSS dan skrip yang akan memasukkan file CSS saat run time.
Komponen umum
Saat kami membuat komponen untuk plugin, kami akhirnya memiliki beberapa komponen standar yang dapat digunakan di seluruh plugin. Jadi kami membuat paket komponen umum, yang mana semua komponen umum akan ada di sana dan digunakan di seluruh plugin.
Templat
Kita akan menghadapi skenario di mana kita harus mengubah desain secara dinamis saat runtime. Untuk itu, kami menggunakan pendekatan slot templat vue (“baca artikel ini”) untuk mencapai hal ini.
