Jika teman-teman belum mengikuti part-1 dan part-2 nya silahkan teman-teman buka link tersebut ya, di part-3 ini kita akan langsung mencoba menggunakan Vue.js untuk WordPress-Style Shortcodes.Mengkonversi string kita dapatkan dari backend ke beberapa struktur data lain sehingga kita dapat alasan tentang tata letak dan konten.
Langkah 1: Abstract Syntax Tree
Langkah pertama ini tidak begitu menarik. Saya telah membangun sebuah library kecil, shortcode-tokenizer, untuk lexing blok contoh di part-2 dan mengeluarkan Abstract Syntax Tree (AST).
Dari contoh di atas, kita mendapatkan sebuah array dari objek bersarang seperti ini:
Ini memberikan kita dengan struktur objek bersarang yang memiliki semua parameter disiapkan dan semua elemen berlabel sebagai teks, menutup diri, atau shotcode biasa.
Kita akan menggunakan struktur data ini sebagai sumber apa untuk membangun di Vue.
Langkah 2: Pemetaan kode untuk komponen
Mencari tahu bagaimana kita memetakan kode untuk komponen kami seperti productlist atau ProductCard.
komponen Vue biasanya dinamai sesuai dengan impor komponen orangtua, tapi Vue cukup fleksibel dan Anda dapat referensi komponen Anda dalam beberapa cara: TitleCase, lowerTitleCase, dan kebab-kasus. Yang terakhir adalah sintaks yang sama kita akan gunakan untuk shortcode kami, jadi ini tidak boleh terlalu keras. Dalam kebanyakan kasus, kita bisa menggunakan nama yang sama untuk merujuk pada komponen Vue:
Productlist bisa sekarang, seperti yang Anda tahu, dirujuk sebagai <produk-list> di template komponen, berkat keajaiban Vue sedikit. Vue mengekspos fungsi nama transformasi melalui Vue.util. Kami akan memanfaatkan mereka nanti.
Manfaat lain adalah bahwa kita dapat merujuk peta ini selama parsing. Selain itu, dalam kasus kami menemukan kode yang tidak diketahui (oleh tidak adanya di peta), kita bisa memperlakukannya sebagai kesalahan di tempat yang sama seperti sintaks kesalahan-daripada harus membiarkan kesalahan terjadi di runtime Vue ketika mencoba untuk instantiate komponen yang tidak ada.
Jadi mari kita membuat peta:
Langkah 3: Mengakhiri (atau memulai)
Mencari tahu bagaimana menggunakan Vue untuk membangun komponen baru yang dapat komponen instantiate.
Sekarang bahwa kita memiliki AST, kita perlu mengurai atau membuat ke dalam template dan komponen menggunakan peta kami didefinisikan dalam langkah sebelumnya.
Vue menyediakan beberapa built-in komponen yang dapat membuat halaman teman-teman lebih dinamis dalam arti bahwa Anda tidak perlu menentukan apa komponen diserahkan atau bagaimana mereka diberikan terlebih dahulu. Ini adalah <komponen> dan <Slot> masing-masing.
Fungsionalitas <Komponen> komponen dekat dengan apa yang kita inginkan. Namun, kita harus menyertakan semua komponen kami pada setiap halaman dan di setiap komponen orangtua di mana kita ingin menggunakan atau slot yang shortcode, karena slot, dalam teori, bisa berisi referensi untuk semua komponen kami
Ini sedikit rumit untuk sedikitnya. Saya tidak ingin mengulang ini untuk setiap komponen induk. tugas ini perlu dikemas juga. Semoga bermanfaat.
