Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Handlebars.js - Tampilan Behind the Scenes

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Handlebars telah mendapatkan popularitas dengan pengadopsiannya dalam kerangka seperti Meteor dan Ember.js, tetapi apa yang sebenarnya terjadi di balik layar mesin templating yang menarik ini?

Dalam artikel ini kita akan melihat lebih dalam melalui proses yang mendasari Handlebars berjalan melalui untuk mengkompilasi template Anda.

Artikel ini mengharapkan Anda telah membaca pengantar saya sebelumnya untuk Handlebars dan dengan asumsi Anda mengetahui dasar-dasar pembuatan template Handlebar.

Ketika menggunakan template Handlebars Anda mungkin tahu bahwa Anda mulai dengan mengkompilasi sumber template ke fungsi menggunakan Handlebars.compile () dan kemudian Anda menggunakan fungsi itu untuk menghasilkan HTML akhir, meneruskan nilai untuk properti dan placeholder.

Tapi fungsi kompilasi yang tampaknya sederhana itu sebenarnya melakukan beberapa langkah di belakang layar, dan itulah yang sebenarnya menjadi artikel ini. mari kita lihat perincian cepat dari proses:

  • Tokenasikan sumber ke dalam komponen.
  • Memproses setiap token menjadi serangkaian operasi.
  • Ubah tumpukan proses menjadi fungsi.
  • Jalankan fungsi dengan konteks dan pembantu untuk menghasilkan beberapa HTML.

Setup

Dalam artikel ini kita akan membangun alat untuk menganalisis templat Setang di masing-masing langkah ini, sehingga untuk menampilkan hasil yang sedikit lebih baik di layar, saya akan menggunakan penyorot sintaks prisma.js yang dibuat oleh satu-satunya Lea Verou. Unduh sumber yang dikecilkan mengingat untuk memeriksa JavaScript di bagian bahasa.

Langkah selanjutnya adalah membuat file HTML kosong dan mengisinya dengan yang berikut:

Ini hanya beberapa kode boilerplate yang mencakup setang dan prisma dan kemudian mengatur beberapa divs untuk langkah yang berbeda. Di bagian bawah, Anda dapat melihat dua blok skrip: yang pertama adalah untuk template dan yang kedua adalah untuk kode JS.

Saya juga menulis sedikit CSS untuk mengatur semuanya sedikit lebih baik, yang Anda bebas untuk menambahkan:

Selanjutnya kita membutuhkan template, jadi mari kita mulai dengan template yang paling sederhana mungkin, hanya beberapa teks statis:

Membuka halaman ini di browser Anda akan menghasilkan template yang ditampilkan di kotak output seperti yang diharapkan, tidak ada yang berbeda, sekarang kita harus menulis kode untuk menganalisis proses pada masing-masing dari tiga tahap lainnya.

Basic Output

Token

Setang langkah pertama berfungsi pada template Anda adalah untuk meng-tokenize sumber, apa artinya ini kita perlu memisahkan sumber terpisah ke masing-masing komponennya sehingga kita dapat menangani setiap bagian dengan tepat. Jadi misalnya, jika ada teks dengan placeholder di tengah, maka Setang akan memisahkan teks sebelum placeholder menempatkannya ke dalam satu token, kemudian placeholder itu sendiri akan ditempatkan ke token lain, dan terakhir semua teks setelah placeholder akan ditempatkan ke dalam token ketiga. Ini karena potongan-potongan itu harus mempertahankan urutan template tetapi juga perlu diproses secara berbeda.

Proses ini dilakukan menggunakan fungsi Handlebars.parse(), dan apa yang Anda dapatkan adalah objek yang berisi semua segmen atau 'pernyataan'.

Untuk mengilustrasikan dengan lebih baik apa yang saya bicarakan, mari buat daftar paragraf untuk setiap token yang diambil:

Jadi kita mulai dengan menjalankan sumber templat ke Handlebars.parse untuk mendapatkan daftar token. Kita kemudian melakukan siklus melalui semua komponen individu dan membangun serangkaian string yang dapat dibaca manusia berdasarkan jenis segmen. Teks biasa akan memiliki jenis "konten" yang kemudian bisa kita hanya output string dibungkus dalam tanda kutip untuk menunjukkan apa yang sama. Placeholder akan memiliki jenis "mustache" yang kemudian dapat ditampilkan bersama dengan "id" (nama tempat penampung). Dan last but not least, block helper akan memiliki tipe "block" yang kemudian kita dapat juga hanya menampilkan blok internal "id" (nama blok).

Menyegarkan ini sekarang di browser, Anda akan melihat hanya satu 'string' token, dengan teks template kita.

Tokens!

Operasi

Sekali setang memiliki koleksi token, ia mengayuh melalui masing-masing dan "menghasilkan" daftar operasi yang telah ditetapkan yang perlu dilakukan untuk template yang akan dikompilasi. Proses ini dilakukan menggunakan objek Handlebars.Compiler(), meneruskan objek token dari langkah 1:

Di sini kita menyusun token ke dalam urutan operasi yang saya bicarakan, dan kemudian kita bersepeda melalui masing-masing dan menciptakan daftar yang sama seperti pada langkah pertama, kecuali di sini kita hanya perlu mencetak opcode. Opcode adalah "operasi" atau "nama" fungsi yang perlu dijalankan untuk setiap elemen dalam urutan.

Kembali di browser, Anda sekarang akan melihat hanya satu operasi yang disebut 'appendContent' yang akan menambahkan nilai ke 'buffer' atau 'string teks' saat ini. Ada banyak opcode yang berbeda dan saya rasa saya tidak memenuhi syarat untuk menjelaskan beberapa dari mereka, tetapi melakukan pencarian cepat dalam kode sumber untuk opcode yang diberikan akan menunjukkan kepada Anda fungsi yang akan dijalankan untuk itu.

Op Codes

Fungsi

Tahap terakhir adalah mengambil daftar opcode dan mengonversinya menjadi fungsi, ia melakukan ini dengan membaca daftar operasi dan kode gabungan cerdas untuk masing-masing. Di sini adalah kode yang diperlukan untuk mendapatkan fungsi untuk langkah ini:

Baris pertama menciptakan kompiler yang lewat dalam urutan op, dan baris ini akan mengembalikan fungsi terakhir yang digunakan untuk membuat template. Kita kemudian mengonversi fungsi ke string dan memberi tahu Prism untuk sintaks menyorotnya.

Dengan kode final ini, halaman Anda akan terlihat seperti ini:

The Function

Fungsi ini sangat sederhana, karena hanya ada satu operasi, itu hanya mengembalikan string yang diberikan; sekarang mari kita lihat pengeditan template dan melihat bagaimana langkah-langkah lurus ke depan secara langsung ini, kelompokkan bersama untuk membentuk abstraksi yang sangat kuat.


Memeriksa template

Mari kita mulai dengan sesuatu yang sederhana, dan mari kita gantikan kata 'Dunia' dengan placeholder; template baru Anda akan terlihat seperti ini:

Dan jangan lupa untuk meneruskan variabel agar output terlihat OK:

Menjalankan ini, Anda akan menemukan bahwa dengan menambahkan hanya satu placeholder sederhana, itu mempersulit proses cukup sedikit.

Single Placeholder

Bagian if/else yang rumit adalah karena ia tidak tahu apakah placeholder sebenarnya adalah placeholder atau metode helper

Jika Anda masih tidak yakin tentang token apa, Anda harus memiliki ide yang lebih baik sekarang; seperti yang Anda lihat pada gambar, ia memisahkan placeholder dari string dan menciptakan tiga komponen individual.

Selanjutnya, di bagian operasi, ada beberapa tambahan. Jika Anda ingat dari sebelumnya, untuk hanya menampilkan beberapa teks, Handlebars menggunakan operasi 'appendContent', yang sekarang bisa Anda lihat di bagian atas dan bawah daftar (untuk "Hello" dan "!"). Sisanya di tengah adalah semua operasi yang diperlukan untuk memproses placeholder dan menambahkan konten yang lolos.

Akhirnya, di jendela bawah, alih-alih hanya mengembalikan string, kali ini menciptakan variabel buffer, dan menangani satu token pada suatu waktu. Bagian if/else yang rumit adalah karena ia tidak tahu apakah placeholder sebenarnya adalah placeholder atau metode helper. Jadi mencoba untuk melihat apakah metode pembantu dengan nama yang diberikan ada, dalam hal ini akan memanggil metode pembantu dan mengatur 'stack1' ke nilai. Dalam hal ini adalah placeholder, itu akan menetapkan nilai dari konteks yang dilewatkan dalam (di sini bernama 'depth0') dan jika fungsi dilewatkan di dalamnya akan menempatkan hasil dari fungsi ke dalam variabel 'stack1'. Setelah itu semua selesai, itu luput seperti yang kita lihat dalam operasi dan menambahkannya ke buffer.

Untuk perubahan selanjutnya, mari kita coba template yang sama, kecuali kali ini tanpa keluar dari hasil (untuk melakukan ini, tambahkan penjepit keriting lain "{{{name}}}")

Menyegarkan halaman, sekarang Anda akan melihatnya menghapus operasi untuk menghindari variabel dan sebagai gantinya itu hanya menambahkannya, gelembung ini turun ke fungsi yang sekarang hanya memeriksa untuk memastikan nilai bukan nilai falsy (selain 0) dan kemudian menambahkannya tanpa melarikan diri.

Single Placeholder Non Escaped

Jadi saya pikir placeholder cukup lurus ke depan, sekarang mari kita lihat menggunakan fungsi pembantu.


Fungsi Pembantu

Tidak ada gunanya membuat ini lebih rumit maka itu harus, mari kita hanya membuat fungsi sederhana yang akan mengembalikan duplikat dari angka yang dilewatkan, jadi ganti template dan tambahkan blok skrip baru untuk helper (sebelum kode lainnya ):

Saya telah memutuskan untuk tidak menghindarinya, karena itu membuat fungsi terakhir sedikit lebih mudah dibaca, tetapi Anda dapat mencoba keduanya jika Anda suka. Bagaimanapun, menjalankan ini harus menghasilkan yang berikut:

Helper Function

Di sini Anda dapat melihatnya tahu bahwa itu adalah helper, jadi alih-alih mengatakan 'invokeAmbiguous' sekarang kata 'invokeHelper' dan karena itu juga dalam fungsi tidak ada lagi blok if/else. Namun tetap memastikan bahwa helper ada dan mencoba untuk kembali ke konteks untuk fungsi dengan nama yang sama jika tidak.

Hal lain yang layak disebutkan adalah Anda dapat melihat parameter untuk pembantu dilewatkan secara langsung, dan sebenarnya dikodekan dengan keras, jika mungkin, ketika fungsi didapatkan (nomor 3 dalam fungsi dua kali lipat).

Contoh terakhir yang ingin saya bahas adalah tentang pembantu blok.


Blokir Helpers

Block helper memungkinkan Anda untuk membungkus token lain di dalam fungsi yang dapat mengatur konteks dan pilihannya sendiri. Mari kita lihat contoh menggunakan default 'if' block helper:

Di sini kita memeriksa apakah "nama" diatur dalam konteks saat ini, dalam hal ini kita akan menampilkannya, kalau tidak kita output "Dunia!". Menjalankan ini di analisa kita, Anda akan melihat hanya dua token meskipun ada lebih banyak; ini karena setiap blok dijalankan sebagai 'templat' sendiri sehingga semua token di dalamnya (seperti {{{name}}}) tidak akan menjadi bagian dari panggilan luar, dan Anda harus mengekstraknya dari node blok itu sendiri. .

Selain itu, jika Anda melihat fungsinya:

Block Helper

Anda dapat melihat bahwa itu benar-benar mengkompilasi penolong blok fungsi ke fungsi template. Ada dua karena salah satu fungsi utama dan yang lain adalah fungsi invers (untuk Kapan parameter tidak ada atau palsu). Fungsi utama: "program1" adalah apa yang kita miliki sebelumnya ketika kita hanya memiliki beberapa teks dan satu placeholder, karena seperti yang saya sebutkan, masing-masing fungsi pembantu blok dibangun dan diperlakukan persis seperti template biasa. Mereka kemudian dijalankan melalui pembantu "jika" untuk menerima fungsi yang tepat yang kemudian akan ditambahkan ke buffer luar.

Seperti sebelumnya, perlu disebutkan bahwa parameter pertama untuk pemblokir blok adalah kunci itu sendiri, sedangkan parameter 'ini' disetel ke keseluruhan yang dilewatkan dalam konteks, yang dapat berguna saat membuat pembantu blok Anda sendiri.


Kesimpulan

Dalam artikel ini kita mungkin tidak mengambil pandangan praktis tentang bagaimana mencapai sesuatu di Handlebars, tapi saya harap Anda mendapat pemahaman yang lebih baik tentang apa yang sebenarnya terjadi di belakang layar yang memungkinkan Anda untuk membangun templat dan bantuan yang lebih baik dengan penemuan baru ini. pengetahuan.

Saya harap Anda menikmati membaca, seperti biasa jika Anda memiliki pertanyaan jangan ragu untuk menghubungi saya di Twitter (@GabrielManricks) atau di Nettuts + IRC (#nettuts di freenode).

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.