H Kami sedang menulis mesin template sederhana di js dalam draf Tutorial. H Menulis mesin template js sederhana dalam draft Tutorial Menghasilkan kode yang dapat dieksekusi
Sekarang saya hanya melihat dua opsi untuk templat di aplikasi js, mesin templat yang dibangun ke dalam kerangka kerja, dan mie jquery (yang terakhir adalah yang paling umum). Saya yakin ini karena banyak yang tidak memahami cara kerja mesin templat. secara umum (saya berbicara tentang internalnya, bukan fungsinya).
Pada artikel ini saya akan menunjukkan cara membuat mesin template sederhana namun kuat berdasarkan ekspresi reguler.
Namun bagi yang belum mengetahuinya, sedikit tentang apa itu dan apa manfaatnya bagi kita.
Jadi kami ingin merender template dalam 1 langkah dan memiliki presentasi yang terpisah dari logika. Biasanya mesin template memiliki antarmuka yang serupa.
templat.Jalankan("url templat", ( NamaVar:"VarValue" ));
Di bawah ini adalah kode dengan komentar rinci (apa dan mengapa)
window.template = ( //memuat tampilan TemplatGet: function (TemplateUrl) ( // 1. Buat objek XMLHttpRequest baru var xhr = new XMLHttpRequest(); // 2. Konfigurasikan: GET permintaan ke URL "TemplateUrl" xhr .open("GET", TemplateUrl, false); // 3. Kirim permintaan xhr.send(); if (xhr.status >= 200 && xhr.status< 400) {
// вернуть результат
return xhr.responseText;
} else {
// обработать ошибку
alert(xhr.status + ": " + xhr.statusText); // пример вывода: 404: Not Found
return "";
}
},
//класс функций для рендинга
Render:{
//а в этом классе мы напишем все функции рендера
func:{
//рендит переменные
vars: function(html, vars){
//ищем все переменные в шаблоне
var $ = html.match(/{{var.(.*?)}}/g);
//проверяем нашли ли что то
if (Array.isArray($)) {
//мы нашли переменные в шаблоне. Необходимо их все распарсить.
$.forEach(function (item) {
//item содержит найденую строку {{var.VarName}}
//по этому мы должны распарсить ету строку дабы получить только VarName
item = item.replace("{{var.", "");
item = item.replace("}}", "");
//у нас есть имя переменной. Пора проверить передали ли мы такую
//и обработать ошибки
if (vars === undefined){
//перенную не передали.
//пишем об ошибке в консоль и заменяем её значение в шаблоне на null
console.warn("Переменная "+item+" не найдена");
html = html.replace("{{var." + item + "}}", "null");
} else {
//переменную мы нашли. Вставим ка её в шаблон
html = html.replace("{{var." + item + "}}", vars);
}
});
}
//удалим обьект с переменными
delete vars;
//вернём html
return html;
}
},
//точка входа в рендер.
Run:function(html, vars){
html = this.func.vars(html, vars);
return html;
}
},
//точка входа
Run: function (TemplateUrl, vars) {
//загружаем шаблон
var html = this.TemplateGet(TemplateUrl);
//отправляем шаблон рендеру
html = this.Render.Run(html, vars);
//удаляем обьект с переменными. Он нам больше не нужен, а может занимать много места
delete vars;
//результат шаблонизатор вставит в
document.getElementById("page").innerHTML = html;
}
};
//вызовем представление
template.Run("test.tpl", {
VarName: "test"
});
Dan di test.tpl kami hanya akan menulis
((var.NamaVar))
Saya harap sekarang mie jquery akan berkurang)
Ada beberapa kasus ketika Anda mungkin memerlukan mesin templat JavaScript, termasuk kebutuhan untuk menghasilkan konten di klien dan di server jika Anda menggunakan kerangka kerja JavaScript seperti NodeJS atau Rhino. Saya akan segera mengatakan bahwa saya sendiri telah mempertimbangkan banyak mesin template yang ada, dari yang sederhana hingga yang eksotis. Yang terpenting, saya tertarik pada yang sederhana, tetapi memungkinkan penggunaan logika kompleks dalam templat, dan EJS ternyata menjadi salah satunya. Namun, hal ini ditulis agak berbeda dari yang saya inginkan; di satu sisi, ada banyak hal yang tidak perlu, di sisi lain, fungsi utamanya terlalu rumit. Saya melihat peluang untuk membuat kompilasi dan rendering template-nya menjadi lebih mudah.
Penerapan EJSApa yang dilakukan mesin template: mengambil template dan data, lalu kembali contoh konten, diperoleh dengan memproses templat berdasarkan spesifik ini contoh data.
Dengan EJS, idenya sederhana: sebagai bagian dari template, kita dapat menggabungkan konten apa adanya dengan bit JavaScript inline, mirip dengan bagaimana file skrip PHP menggabungkan HTML dengan kode. Kode ini menunjukkan variabel global dan variabel yang akan kami berikan dengan hati-hati ke penyaji saat dipanggil. Anda juga dapat melihat apa yang disebut fungsi pembantu yang menyederhanakan pembentukan struktur yang sering digunakan, misalnya tag tautan atau gambar.
Kode tersebut dibingkai dalam sebuah tag atau tag.
Berikut tampilannya:
Saya sengaja menulis konstruksinya dengan gaya berbeda untuk menunjukkan bahwa keberadaan ruang tidak menjadi masalah. Saat menghasilkan keluaran menggunakan templat, kita meneruskan objek dengan properti yang bertindak sebagai variabel tempat kode di dalam templat kita beroperasi. Intinya adalah dengan bantuan konstruksi logika dalam JavaScript itu sendiri, Anda dapat secara fleksibel mengubah jenis konten yang dihasilkan sebagai hasilnya. Sebagai opsi, dimungkinkan untuk menggunakan tag seperti [% %] jika templat seharusnya dirender setelah disertakan dalam pohon DOM. Mengingat pola penggunaan saya, menurut saya ini tidak terlalu berguna.
Meningkatkan EJSDi mesin templat asli, saya tidak puas dengan fungsionalitas tambahan untuk memuat templat dari file, yang pada dasarnya tidak saya perlukan, karena seharusnya digunakan di lingkungan server, dan tidak hanya di sisi klien. Saya juga terkejut dengan kompleksitas kompiler itu sendiri, karena saya lebih suka menggunakan panggilan asli daripada kompleksitas logika kode. Karena alasan ini, saya memutuskan untuk menulis kompiler dari awal, yang akan kita bicarakan selanjutnya.
Mengurai templat sumberPenyusunan selalu diawali dengan penguraian bahan sumber sesuai aturan yang telah ditentukan. Serangkaian aturan kami bermuara pada membedakan antara konten dalam tag khusus dan yang lainnya. Melihat struktur tag khusus kami, Anda dapat melihat bahwa cukup mudah untuk menangkap seluruhnya menggunakan ekspresi reguler sederhana. Kita ingat bahwa selain kode itu sendiri, kita perlu mengeluarkan tag pembuka untuk memahami apa yang harus dilakukan dengan kode di dalamnya. Seperti inilah tampilan RegExpnya:
/(?:\n\s*)?(])+)%>/gm
Jadi apa yang kami lakukan di sini:
- (?:\n\s*)? - hapus jeda baris dan semua spasi darinya ke tag kode, jika ada. Tentu saja, ini sama sekali tidak perlu dilakukan, tetapi kami adalah estetika, jadi kami akan mencegah munculnya banyak baris kosong di konten yang dihasilkan. Penentu ?: di awal subpola berarti bahwa isinya tidak ditangkap tetapi dilewati begitu saja.
- (] - kode kita adalah karakter apa pun yang bukan % , atau karakter % yang tidak diikuti oleh karakter >.
- (?:[^%]|[%][^>])+ adalah kode kita - urutan ini dapat muncul lebih dari sekali, tetapi tidak boleh ditangkap.
- ((?:[^%]|[%][^>])+) adalah kode kami - dan kami menangkap seluruh urutannya.
- %> - tag penutup tidak ditangkap.
- gm - mengaktifkan pemrosesan teks lengkap global (multi-baris).
Seperti yang Anda lihat, semuanya cukup sepele, yang tersisa hanyalah mencari tahu apa yang harus dilakukan dengan ekspresi reguler ini. Dan di sini metode String.split yang sangat berguna akan membantu kita, yang membagi string menggunakan pembatas yang ditentukan, mengembalikan array dari substring yang dihasilkan. Keunikan metode ini adalah metode ini dapat mengambil ekspresi reguler sebagai pemisah, dan jika metode ini berisi subpola yang diambil, substring yang sesuai dengannya juga akan dimasukkan ke dalam larik yang dihasilkan dalam urutan biasa. Ini memberi kita gambaran tentang pengoptimalan asli kompiler templat: kita membagi string dengan ekspresi reguler, mendapatkan urutan potongan konten string dan penentu kode dengan potongan kode berikut, lalu cukup memprosesnya saja susunan yang dihasilkan.
Menghasilkan kode yang dapat dieksekusiSekarang kita memiliki template yang telah diurai, yang berarti kita sudah dapat membayangkan bagaimana mengubahnya secara linear menjadi kode JavaScript yang dapat dieksekusi. Yang kita perlukan hanyalah mendapatkan suatu fungsi, dengan memanggilnya kita akan menerima konten yang dibentuk dengan benar sesuai dengan template aslinya. Jadi, potongan konten dari template harus disisipkan apa adanya, nilainya harus disisipkan sebagai pengganti variabel, dan kode harus dieksekusi.
Mari kita atur ini dengan cara sederhana berikut:
- kita akan membentuk fungsi sebagai string yang cocok untuk memanggil eval
- di badan fungsi, kami mengatur lampiran berurutan dari potongan konten ke variabel hasil tertentu
- kami akan menempelkan kode JS biasa apa adanya
Namun, kita perlu menyelesaikan permasalahan berikut:
- meneruskan variabel dan fungsi pembantu ke isi fungsi templat yang dapat dieksekusi
- mengatur variabel hasil agar tidak mengganggu variabel yang digunakan pada template
Untuk menyelesaikan masalah pertama, cara termudah adalah dengan menggunakan konstruk with. Ya, inilah hal yang menjadi topik abadi diskusi panas di antara para pengembang dan memusingkan para standardizer w3c, inilah yang sangat dibenci oleh semua jenis validator seperti JSLINT dan kompiler seperti Closure Compiler. Apa yang dilakukan konstruksi ini paling mudah dianggap sebagai menyediakan suatu objek sebagai lapisan visibilitas untuk variabel lokal, artinya Anda dapat mengakses properti objek berdasarkan nama seolah-olah itu adalah variabel biasa, yaitu, tanpa mengawali nama objek dengan titik, jadi inilah tampilannya:
Var obj = ( foo: "Ini foo.", bar: 42 ); dengan(obj)( foo += " Dan bar adalah " + bar; )
Saat membaca nilai, semuanya cukup sederhana, tidak terlalu sepele saat menulis, terutama saat menggunakan konstruksi bersarang, namun, dalam templat kita terutama perlu membaca nilai, jadi menggunakan pendekatan asli daripada membuat kruk lain lebih dari sekadar dibenarkan. Tepatnya, ini sebenarnya menciptakan dua tingkat visibilitas variabel lokal yang bersarang: satu dari objek, yang lain di dalam badan with, artinya, saat membuat variabel lokal di sana, variabel tersebut tidak berakhir di objek aslinya.
Memecahkan masalah keduaYang tersisa hanyalah mencari tahu bagaimana kita akan merakit potongan konten ke dalam fungsi rendering template. Hal pertama yang mungkin terlintas dalam pikiran adalah membuat variabel lokal di badan fungsi dengan nama yang jarang ditemui dan melampirkan semua yang diperlukan selama eksekusi ke dalamnya. Sejujurnya, pada awalnya saya ingin melakukan ini; ini adalah ide yang sangat bagus jika Anda mengurangi kemungkinan perpotongan nama variabel seminimal mungkin. Namun, tentu saja, solusi ini tidak terlalu estetis, sebagai pencipta seni tinggi, kami tidak berhak menciptakan variabel lokal apa pun dalam fungsi yang sempurna ini.
Mari kita lihat apa yang kita miliki, tetapi secara umum tidak ada banyak pilihan: gunakan objek ini atau objek argumen, yang, karena kekhasan bahasanya, tidak boleh digunakan pengguna dalam templat, dan jika dia bisa, maka hanya dengan cara yang khusus. Setelah mempertimbangkan semua pro dan kontra, saya memutuskan untuk menggunakan argumentasi, serangkaian argumen tanpa nama yang diteruskan ke fungsi, ke salah satunya dan kami akan memasukkan semua yang diperlukan untuk menghasilkan konten dengan benar.
Fitur ImplementasiSekarang kami memiliki segalanya untuk mengimplementasikan mesin template yang lengkap. Seperti yang saya katakan, ini tidak akan sepenuhnya kompatibel dengan EJS asli, tetapi akan dapat menggunakan template yang dibuat untuk itu. Selain itu, tidak akan ada penerapan pemuat templat otomatis; Anda perlu menginstalnya sendiri, berdasarkan prinsip kerangka kerja yang Anda gunakan dalam lingkungan eksekusi khusus ini.
Sekarang saatnya langsung ke kodenya, mari kita lihat semuanya sebagian, dimulai dari yang utama dan utama yaitu objek template:
// Konstruktor var EJS = function(src)( if(typeof src == "string")( // Jika templat dilewatkan this.compile(src); // Kompilasi segera ) ); // Prototipe EJS.prototipe = ( regexp: /(?:\n\s*)?(])+)%>/gm, helper: () // Fungsi pembantu );
EJS.prototype.compile = function(src)( delete this.method; delete this.error; // hapus jejak panggilan compiler sebelumnya var p = src.split(this.regexp), // Hasil parsing r = , // Hasil rakitan i, o; this.parsed = p; // Segera simpan hasil parsing // Kita rakit fungsi pembuatan konten untuk(i = 0; i< p.length; i++){
if(p[i] == " 0) {
str += parts[ len ];
}
}
return str;
}
Kode di atas sedikit lebih kecil dari hasil akhirnya.
Jadi, misalnya, saya tidak menunjukkan apa yang harus dilakukan dengan elemen saat ini jika disetel ke titik.
Saya juga tidak menyediakan pemrosesan filter.
Selain itu, di versi final, saya menambahkan "sendiri" ke pemrosesan situasi ketika "elemen saat ini" atau "nilai untuk" adalah fungsi.
Tapi tujuan saya adalah untuk menunjukkan konsep itu sendiri...
Dan hasilnya, seperti yang sudah disebutkan di awal artikel, bisa diketahui.
Contoh terakhir.
Saya harap ini bermanfaat bagi seseorang.
Terima kasih atas perhatian Anda!
Artikel ini adalah review mesin template untuk pengembangan front-end. Jika Anda bekerja dengan JS, mesin templating adalah pilihan yang sangat baik dan cocok, karena memungkinkan Anda menulis kode dasar yang lebih bersih dan membuat aplikasi Anda lebih mudah digunakan. Mari kita lihat mesin template JS paling populer yang ditawarkan Wikipedia kepada kita. Untuk bekerja secara efisien dengan mesin templat ini, Anda harus memiliki pemahaman bahasa yang baik dan keterampilan yang memadai di bidang ini.
ICanHaz.js adalah perpustakaan yang cukup sederhana dan ringan untuk bekerja dengan template Kumis. Dengan itu, Anda dapat menentukan fragmen template dalam tag skrip dengan type=”text/html” dan memanggilnya melalui id, dengan validasi.
Moustache.js adalah mesin templat yang sangat populer di area aplikasi ini. Ini memberikan solusi sisi server dan sisi klien sehingga Anda tidak perlu khawatir tentang penggunaan beberapa mesin templat. Ini memiliki dokumentasi yang baik dan jelas, serta komunitas yang besar. Templat menggunakan format data JSON. Berjalan dengan baik dalam bahasa pemrograman populer. Perpustakaan versi terbaru dapat diunduh dari halaman resmi.
adalah ekstensi untuk Kumis dan sepenuhnya kompatibel dengannya. Ini memiliki kecepatan eksekusi yang lebih tinggi, karena tidak dibebani dengan logika yang tidak perlu. HTML dihasilkan menggunakan prinsip yang sama dari data dalam format JSON. Kelemahan yang signifikan adalah beratnya perpustakaan.
Underscore.js adalah alat yang nyaman dan praktis untuk bekerja dengan jQuery. Memiliki lebih dari 60 utilitas fungsional. Mesin templat ini meningkatkan fungsionalitas jQuery saat bekerja dengan array, fungsi, objek, koleksi, dll. 5 Alternatif jQuery UI.
Hogan.js adalah mesin template yang dikembangkan oleh Twitter. Ini digunakan sebagai pembuat templat perantara untuk pemrosesan dinamis cepatnya oleh browser web. Pengembangan mesin template ini didasarkan pada Moustache, namun Hogan.js jauh lebih cepat. API ditawarkan untuk mengakses fungsi parser. Pemindaian dan penguraian template dilakukan dengan metode terpisah, sehingga template dapat diproses terlebih dahulu di server dan digunakan dalam bentuk Javascript di sisi klien.
– digunakan untuk bekerja dengan templat server, tetapi secara umum dapat diterapkan untuk tujuan lain. Ini memiliki keterbacaan kode yang tinggi dan keamanan yang baik. Ini beroperasi dari bagian klien; dimungkinkan untuk menggunakan utilitas untuk mengkompilasi templat HTML dari baris perintah. Mesin templat telah berganti nama menjadi Pug.js, tetapi dengan nama lama Anda dapat menemukan banyak dokumentasi dan informasi berguna bagi pengembang.
Mesin template ECT dirancang untuk meningkatkan kecepatan. Ini didasarkan pada mesin template Coffeescript. Ini memiliki kompatibilitas yang baik dengan Node.js dan sintaksis yang cukup sederhana. Anda juga dapat melihat tes pendahuluan yang menunjukkan kinerja perpustakaan ini.
Hyper Host™ mendoakan Anda mendapatkan pekerjaan yang menyenangkan di dunia JS dan siap memposting proyek luar biasa Anda di situs web kami!
4366 kali 3 kali dilihat hari ini
