Laytpl adalah mesin template JavaScript yang mengganggu. Ini menggunakan metode implementasi yang cerdas untuk membuat ukurannya sendiri kecil dan indah. Tidak hanya memiliki kinerja pamungkas, tetapi juga memiliki hampir semua fungsi mesin front-end tradisional. Semua sihir transformasi diciptakan oleh kurang dari 1kb kode, yang tampak seperti revolusi, atau tidak, tetapi tidak ada keraguan bahwa Laytpl memang menyajikannya kepada dunia dengan cara yang paling ringan. Jika Anda belum pernah terpapar aplikasi ini, itu tidak masalah. Kisah berikut akan membuat Anda tidak dapat menunggu untuk memilih Laytpl, dan sejak saat itu, Anda dapat lebih memahami rendering data halaman dan mencapai puncak hidup Anda!
Keuntungan Laytpl
• Kinerja yang sangat baik, hampir 1 kali lebih cepat dari arttemplate dan dot, yang dikenal sebagai King of Performance, dan 20-40 kali lebih cepat daripada Baidutemplate, Kissytemplate, dll. Semakin besar skala data dan frekuensi rendering, semakin jelas.
• Volume hanya kecil hingga ekstrem, kurang dari 1kb, dan akan menjadi lebih kecil di masa depan.
• Memiliki mekanisme keamanan seperti Escape, dan memiliki fungsi pelaporan kesalahan yang relatif ilmiah.
• JavaScript asli dapat ditulis secara sewenang -wenang dalam templat untuk sepenuhnya memastikan fleksibilitas template
• Dukungan aplikasi di platform Node.js
• Mendukung semua browser arus utama kuno atau modern
Cara menggunakan
Salinan kode adalah sebagai berikut:
// Langkah 1: Tulis templat. Anda dapat menggunakan tag skrip untuk menyimpan templat, seperti:
<skrip id = "demo" type = "text/html">
<h1> {{d.title}} </h1>
<ul>
{{# for (var i = 0, len = d.list.length; i <len; i ++) {}}
<li>
<span> name: {{d.list [i] .name}} </span>
<span> city: {{d.list [i] .city}} </span>
</li>
{{#}}}
</ul>
</script>
// Langkah 2: Buat tampilan. Digunakan untuk memberikan hasil rendering.
<Div id = "view"> </div>
// Langkah 3: Rendering template
var data = {
Judul: 'Pengepungan Front-End',
Daftar: [{name: 'xianxin', city: 'hangzhou'}, {name: 'xie liang', city: 'beijing'}, {name: 'qianqian', city: 'hangzhou'}, {name: 'dem', city: 'beijing'}]
};
var getTpl = document.geteLementById ('demo'). innerHtml;
Laytpl (getTpl) .render (data, fungsi (html) {
document.geteLementById ('view'). innerHtml = html;
});
Deskripsi dokumentasi
1. Sintaks Template
Output bidang normal tanpa melarikan diri dari html: {{d.field}}
Output bidang normal dan pelarian html: {{= d.field}}
JavaScript Script: {{# JavaScript Pernyataan}}
2. Metode bawaan
1): Laytpl (template); // fungsi inti, kembalikan objek
var tpl = laytpl (template);
tpl.render (data, panggilan balik); // metode rendering, hasil rendering hasil, mendukung dua mode: asinkron dan sinkron
A): Asynchronous
tpl.render (data, fungsi (hasil) {
console.log (hasil);
});
b): Sinkron
var result = tpl.render (data);
console.log (hasil);
2): laytpl.config (opsi); // Inisialisasi konfigurasi
Opsi adalah objek
{buka: 'Mulai tag', tutup: 'tutup tag'}
3): Laytpl.v // Dapatkan Nomor Versi
Hal -hal yang perlu diperhatikan
1. Cukup perkenalkan Laytpl.js secara langsung, dan Anda juga dapat menggunakan Seajs dan pemuatan modular lainnya secara langsung.
2. Laytpl dapat digunakan sesuka hati, baik dalam bisnis maupun di platform pribadi.
3. Pastikan untuk menjaga sumbernya dalam setiap kesempatan, dan jangan lepaskan komentar header tata letak.
Situs web resmi: http://sentsin.com/layui/laytpl/
Unduh: //www.vevb.com/codes/207072.html