Penjelasan terperinci tentang prinsip pelaksanaan kemahiran engine_javascript template JavaScript berprestasi tinggi

Dengan pembangunan web, aplikasi bahagian hadapan telah menjadi lebih dan lebih kompleks, dan javascript berasaskan belakang (Node.js) juga telah mula muncul Pada masa ini, jangkaan yang lebih besar diletakkan pada javascript, dan pada masa yang sama, idea javascript MVC juga telah mula menjadi popular. Sebagai bahagian yang paling penting dalam pengasingan data dan antara muka, enjin templat javascript telah menarik lebih banyak perhatian daripada pembangun Pada tahun lalu, ia telah berkembang dalam komuniti sumber terbuka, dan telah digunakan dalam Twitter, Taobao, Sina Weibo, Tencent QQ Zone dan Tencent Weibo Mereka boleh dilihat di laman web besar seperti Bo.

Artikel ini akan menggunakan kod contoh paling mudah untuk menerangkan prinsip enjin templat javascript sedia ada, termasuk prinsip pelaksanaan ciri enjin templat javascript generasi baharu ArtTemplate Selamat berbincang bersama.

artTemplate Pengenalan

artTemplate ialah enjin templat javascript generasi baharu Ia menggunakan pra-kompilasi untuk mencapai lonjakan kualitatif dalam prestasi, dan menggunakan sepenuhnya ciri-ciri enjin javascript untuk mencapai prestasi yang sangat cemerlang dalam kedua-dua bahagian hadapan dan bahagian belakang. . Dalam ujian kecekapan rendering di bawah krom, ia adalah 25 dan 32 kali ganda berbanding enjin terkenal Misai dan mikro tmpl.

Selain kelebihan prestasi, keupayaan penyahpepijatan juga patut disebut. Penyahpepijat templat boleh mengesan dengan tepat penyataan templat yang menyebabkan ralat pemaparan, yang menyelesaikan kesakitan kerana tidak dapat menyahpepijat semasa proses menulis templat, menjadikan pembangunan lebih cekap dan mengelakkan keseluruhan aplikasi ranap disebabkan oleh ralat templat tunggal.

artTemplat Semua ini dalam 1.7kb(gzip)!

Prinsip asas enjin templat javascript

Walaupun setiap enjin mempunyai kaedah pelaksanaan yang berbeza daripada sintaks templat, penghuraian sintaks, penugasan pembolehubah dan penyambungan rentetan, prinsip pemaparan utama masih merupakan pelaksanaan dinamik rentetan javascript.

Mengenai pelaksanaan dinamik rentetan javascript, artikel ini menggunakan kod templat sebagai contoh:

Ini ialah kaedah penulisan templat yang sangat mudah, di mana "" ialah closeTag (tag penutup pernyataan logik Jika openTag diikuti dengan "=", kandungan pembolehubah akan dikeluarkan).

Pernyataan HTML dan pernyataan keluaran boleh ubah dikeluarkan secara langsung dan rentetan yang dihuraikan adalah serupa:

Selepas analisis sintaks selesai, kaedah pemaparan biasanya akan dikembalikan:

Ujian pemaparan:

Dalam kaedah pemaparan di atas, penetapan pembolehubah templat menggunakan pernyataan dengan dan penyambungan rentetan menggunakan kaedah tolak tatasusunan untuk meningkatkan prestasi di bawah IE6 dan 7. Enjin templat mikro tmpl yang dibangunkan oleh pengarang jQuery john ialah contoh tipikal kaedah ini. Untuk wakil, lihat: http://ejohn.org/blog/javascript-micro-templating/

Ia dapat dilihat daripada pelaksanaan prinsip bahawa terdapat dua masalah yang perlu diselesaikan dalam enjin templat javascript tradisional:

1. Prestasi: Enjin templat bergantung pada pembina Fungsi semasa memaparkan Fungsi, seperti eval, setTimeout dan setInterval, menyediakan kaedah menggunakan teks untuk mengakses enjin penghuraian JavaScript, tetapi prestasi melaksanakan JavaScript dengan cara ini. adalah sangat rendah.

2. Penyahpepijatan: Memandangkan ia adalah rentetan pelaksanaan dinamik, jika ralat ditemui, penyahpepijat tidak dapat menangkap sumber ralat, menjadikan penyahpepijatan BUG templat amat menyakitkan. Dalam enjin tanpa toleransi kesalahan, templat tempatan malah boleh menyebabkan keseluruhan aplikasi ranap disebabkan oleh anomali data Apabila bilangan templat meningkat, kos penyelenggaraan akan meningkat secara mendadak.

rahsia artTemplate untuk kecekapan

1. Pra-penyusunan

Dalam prinsip pelaksanaan enjin templat di atas, kerana pembolehubah templat perlu diberikan nilai, setiap pemaparan memerlukan kompilasi dinamik rentetan javascript untuk menyelesaikan penugasan pembolehubah. Walau bagaimanapun, proses penyusunan dan penugasan artTemplate selesai sebelum rendering Kaedah ini dipanggil "pra-kompilasi". Pengkompil templat artTemplate akan mengekstrak semua pembolehubah templat mengikut beberapa peraturan mudah dan mengisytiharkannya dalam kepala fungsi pemaparan Fungsi ini serupa dengan:

Fungsi yang dijana secara automatik ini sama seperti fungsi javascript yang ditulis tangan Dengan bilangan pelaksanaan yang sama, penggunaan CPU dan memori berkurangan dengan ketara, dan prestasinya menghampiri had.

Perlu dinyatakan bahawa banyak ciri artTemplate adalah berdasarkan pelaksanaan yang telah dikompilasi, seperti spesifikasi kotak pasir dan sintaks tersuai.

2. Kaedah penambahan rentetan yang lebih pantas

Ramai orang tersilap percaya bahawa kaedah tolak tatasusunan untuk menggabungkan rentetan adalah lebih pantas daripada = Anda mesti tahu bahawa ini hanya di bawah pelayar IE6-8. Pengukuran sebenar menunjukkan bahawa menggunakan = dalam penyemak imbas moden adalah lebih pantas daripada kaedah tolak tatasusunan, dan dalam enjin v8, menggunakan = adalah 4.7 kali lebih pantas daripada penyambungan tatasusunan. Oleh itu, artTemplate menggunakan dua kaedah penyambungan rentetan yang berbeza berdasarkan ciri-ciri enjin javascript.

prinsip mod nyahpepijat artTemplate

Enjin templat bahagian hadapan tidak seperti enjin templat bahagian belakang Ia dihuraikan secara dinamik, jadi penyahpepijat tidak dapat mengesan nombor baris ralat dan artTemplate menggunakan cara yang bijak untuk membenarkan penyahpepijat templat mengesan templat dengan tepat. pernyataan yang menyebabkan ralat pemaparan, seperti :

artTemplate menyokong dua jenis tangkapan ralat, satu ialah ralat pemaparan (Ralat Render) dan ralat kompilasi (Ralat Sintaks).

1. Ralat pemaparan

Ralat pemaparan biasanya disebabkan oleh ralat data templat atau ralat pembolehubah Hanya apabila ralat ditemui semasa pemaparan, mod nyahpepijat akan dimasukkan untuk menyusun semula templat, tanpa menjejaskan kecekapan pelaksanaan templat biasa. Pengkompil templat merekodkan nombor baris mengikut aksara baris baharu templat, dan fungsi yang disusun adalah serupa:

Apabila ralat ditemui semasa pelaksanaan, nombor baris yang sepadan dengan templat pengecualian segera dilemparkan Penyahpepijat templat kemudian menyemak pernyataan yang sepadan dengan templat berdasarkan nombor baris dan mencetaknya ke konsol.

2. Ralat kompilasi

Ralat kompilasi biasanya ralat sintaks templat, seperti sarang tidak layak, sintaks tidak diketahui, dsb. Oleh kerana artTemplate tidak melakukan analisis leksikal yang lengkap, ia tidak dapat menentukan lokasi sumber ralat Ia hanya boleh mengeluarkan teks asal mesej ralat dan kod sumber untuk dinilai oleh pembangun.