Baru-baru ini, konten kerja saya secara bertahap mendekati idealisasi saya (front-end web), jadi saya lebih memperhatikan kinerja front-end! Seorang kolega di latar belakang memperkenalkan penggunaan mesin template Ajax untuk meningkatkan kecepatan rendering!
Berikut adalah beberapa mesin template javascript
1. Kumis
Mesin template yang didasarkan pada JavaScript, mirip dengan plugin Template Microsoft, tetapi lebih sederhana dan lebih mudah digunakan!
2. Dot.js
dot.js berisi mesin template javascript untuk browser dan node.js.
3. JSmart
JSmart adalah versi porting JavaScript dari mesin template PHP yang terkenal Smarty.
4. Dom.js
DOM.JS adalah mesin template JavaScript yang dapat digunakan pada klien dan sisi server.
5. Jade
Jade adalah mesin template berkinerja tinggi untuk node yang dipengaruhi oleh HAML di JavaScript.
6. Hogan.js
Mesin Template JavaScript dari Twitter.
7. Setang
Setang adalah perpustakaan template halaman javascript
8. Arttemplate
Arttemplate adalah generasi baru mesin template JavaScript. Efisiensi renderingnya di V8 dapat mendekati batas kinerja JavaScript. Dalam uji efisiensi rendering di bawah Chrome, masing-masing adalah 25 dan 32 kali kumis mesin dan mikro TMPL. Mesin mendukung debugging. Jika kesalahan ditemui selama rendering, debugger dapat secara akurat menemukan pernyataan templat yang menghasilkan pengecualian, menyelesaikan masalah bahwa templat ujung depan sulit untuk debug.
Alat kompilasi template unik dapat menyusun template front-end menjadi file JS yang tidak bergantung pada mesin template untuk dijalankan, memungkinkan templat front-end untuk menerobos pembatasan browser dan mewujudkan organisasi file dan direktori dengan cara yang sama seperti template back-end, memuat permintaan, termasuk bersarang, dll. Semua ini dilakukan dalam 2kb (GZIP)!
Mungkin Anda akan berpikir bahwa nama plugin ini terlihat akrab, itu benar! Ini juga penulis ArtDialog.
Alamat blog: http://www.planeart.cn/
Mesin kutipan
Salinan kode adalah sebagai berikut:
<skrip src = "js/template.js"> </script>
Tulis template
Salinan kode adalah sebagai berikut:
<skrip id = "test" type = "text/html">
// Gunakan tag skrip dengan type = "text/html" untuk menyimpan templat:
<h1> <%= judul%> </h1>
<ul>
<%
untuk (i = 0; i <list.length; i ++) {%>
<li> iteml <%= i+1%>: <%= daftar [i]%> </li>
<%}%>
</ul>
// Simbol definisi untuk awal dan akhir sintaks logika template adalah < % dan %>. Jika <% diikuti oleh tanda =, konten variabel akan menjadi output.
</script>
Rendering template
Salinan kode adalah sebagai berikut:
var data = {
Judul: 'Tag',
Daftar: ['sastra', 'blog', 'fotografi', 'film', 'folk', 'travel', 'gitar']
};
var html = template.render ("tes", data);
document.geteLementById ('konten'). innerHtml = html;