Dengan pengembangan Web, aplikasi front-end menjadi semakin kompleks, dan JavaScript berbasis back-end (Node.js) juga telah mulai muncul. Pada saat ini, JavaScript telah ditempatkan dengan harapan yang lebih besar. Pada saat yang sama, Ide MVC JavaScript juga menjadi populer. Sebagai bagian terpenting dari pemisahan data dan antarmuka, mesin Template JavaScript telah menarik lebih banyak dan lebih banyak perhatian dari pengembang. Pada tahun lalu, ia telah berkembang di komunitas open source. Mereka dapat dilihat di situs web besar seperti Twitter, Taobao, Sina Weibo, ruang QQ Tencent, dan Tencent Weibo.
Artikel ini akan menggunakan kode contoh paling sederhana untuk menggambarkan prinsip -prinsip mesin Template JavaScript yang ada, termasuk prinsip -prinsip implementasi karakteristik generasi baru Arttemplate Mesin Template JavaScript. Selamat mendiskusikan mereka bersama.
Pendahuluan Arttemplate
Arttemplate adalah generasi baru mesin template JavaScript. Ini menggunakan prekompilasi untuk membuat lompatan kualitatif dalam kinerja dan memanfaatkan fitur mesin JavaScript secara penuh, membuat kinerjanya sangat luar biasa baik di front-end dan back-end. Dalam uji efisiensi rendering di bawah Chrome, adalah 25 dan 32 kali kumis mesin terkenal dan TMPL mikro.
Selain keunggulan kinerja, fungsi debugging juga patut disebutkan. Debugger template dapat secara akurat menemukan pernyataan templat yang memicu kesalahan rendering, memecahkan rasa sakit debugging yang tidak disengaja selama penulisan templat, membuat pengembangan menjadi efisien, dan menghindari seluruh crash aplikasi karena kesalahan dalam satu templat.
Arttemplate Ini semua diimplementasikan dalam 1.7kb (GZIP)!
Dasar -dasar mesin template javascript
Meskipun setiap mesin memiliki metode implementasi yang berbeda dari sintaks template, parsing sintaks, penugasan variabel, dan splicing string, prinsip rendering kunci masih untuk secara dinamis menjalankan string javascript.
Mengenai eksekusi dinamis string JavaScript, artikel ini menggunakan sepotong kode template sebagai contoh:
Ini adalah penulisan templat yang sangat sederhana, di mana "" adalah closetag (tag tertutup pernyataan logis). Jika opentag diikuti oleh "=", konten variabel akan menjadi output.
Pernyataan HTML dan pernyataan output variabel adalah output secara langsung, dan string parsed serupa:
Setelah analisis sintaks selesai, metode rendering umumnya akan dikembalikan:
Tes Rendering:
Dalam metode render di atas, penugasan variabel template menggunakan pernyataan dengan dengan splicing menggunakan metode push array untuk meningkatkan kinerja di IE6 dan 7. Mesin Template Mikro TMPL yang dikembangkan oleh JQuery Woror John adalah perwakilan khas dari metode ini, lihat: http://ejohn.org/blog/javascript-micro
Dapat dilihat dari implementasi prinsip bahwa dua masalah yang harus diselesaikan ditinggalkan di mesin template javascript tradisional:
1. Kinerja: Saat merender mesin template, ia bergantung pada konstruktor fungsi untuk mengimplementasikannya. Seperti Fungsi Eval, SetTimeout, dan SetInterval, menyediakan metode untuk mengakses mesin parsing JavaScript menggunakan teks, tetapi kinerja mengeksekusi JavaScript dengan cara ini sangat rendah.
2. Debugging: Karena ini adalah string eksekusi yang dinamis, jika debugger menemukan kesalahan, debugger tidak dapat menangkap sumber kesalahan, menyebabkan debugging bug template menjadi sangat menyakitkan. Dalam mesin yang tidak melakukan toleransi kesalahan, jika templat lokal bahkan dapat menyebabkan seluruh aplikasi macet karena pengecualian data, biaya pemeliharaan akan meningkat secara dramatis ketika jumlah templat meningkat.
arttemplate rahasia efisien
1. Pra-Dikompilasi
Dalam prinsip implementasi mesin templat yang disebutkan di atas, karena variabel template ditetapkan, masing-masing rendering membutuhkan kompilasi dinamis string JavaScript untuk menyelesaikan penugasan variabel. Namun, proses kompilasi dan penugasan arttemplate selesai sebelum rendering, yang disebut "prekompilasi". Kompiler Template Arttemplate akan mengekstraksi semua variabel templat sesuai dengan beberapa aturan sederhana dan menyatakannya di kepala fungsi rendering. Fungsi ini mirip dengan:
Fungsi yang dihasilkan secara otomatis ini seperti fungsi JavaScript yang ditulis tangan. Dengan jumlah eksekusi yang sama, baik CPU dan penggunaan memori telah berkurang secara signifikan, dan kinerjanya hampir pada batasnya.
Perlu disebutkan bahwa banyak fitur Arttemplate didasarkan pada implementasi yang dikompilasi, seperti spesifikasi kotak pasir dan sintaks khusus.
2. Metode penambahan string yang lebih cepat
Banyak orang secara keliru berpikir bahwa metode dorongan array akan menyambungkan string lebih cepat dari +=. Anda harus tahu bahwa ini hanya di browser IE6-8. Pengukuran aktual menunjukkan bahwa browser modern menggunakan += untuk menggunakan metode push array, saat berada di mesin V8, menggunakan metode += 4,7 kali lebih cepat dari splicing array. Oleh karena itu, Arttemplate mengadopsi dua metode splicing string yang berbeda sesuai dengan karakteristik mesin JavaScript.
Prinsip Mode Debug Arttemplate
Mesin template front-end tidak seperti mesin template back-end. Ini adalah parsing dinamis, sehingga debugger tidak dapat menemukan nomor baris yang salah. Arttemplate secara cerdik memungkinkan debugger template untuk secara akurat menemukan pernyataan templat yang melempar kesalahan rendering, misalnya:
Arttemplate mendukung dua jenis pengambilan kesalahan, satu adalah kesalahan render (kesalahan render) dan penyusunan kesalahan (kesalahan sintaks).
1. Kesalahan Rendering
Kesalahan rendering umumnya disebabkan oleh kesalahan data templat atau kesalahan variabel. Saat rendering, mereka akan memasuki mode debug untuk mengkompilasi ulang template tanpa mempengaruhi efisiensi eksekusi template normal. Nomor baris Catatan Kompiler Template berdasarkan istirahat garis template, dan fungsi yang dikompilasi serupa:
Ketika kesalahan terjadi selama proses eksekusi, nomor baris yang sesuai dengan templat pengecualian segera dilemparkan, dan debugger templat kemudian memeriksa pernyataan yang sesuai yang sesuai dengan templat sesuai dengan nomor baris dan mencetaknya ke konsol.
2. Kesalahan Kompilasi
Kesalahan kompilasi umumnya merupakan kesalahan sintaks templat, seperti sintaks yang tidak memenuhi syarat, sintaks yang tidak diketahui, dll. Karena arttemplate tidak melakukan analisis leksikal lengkap, tidak mungkin untuk menentukan lokasi sumber kesalahan, dan hanya dapat menghasilkan informasi kesalahan dan kode sumber untuk teks asli untuk pengembang untuk menilai.