Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah itu enjin templat javascript

Apakah itu enjin templat javascript

WBOY
Lepaskan: 2022-04-26 15:12:09
asal
2628 orang telah melayarinya

Enjin templat JavaScript ialah kaedah mengasingkan struktur html daripada kandungan yang terkandung di dalamnya. Ia dihasilkan untuk memisahkan antara muka pengguna daripada data perniagaan dinamik Sesuatu yang boleh digunakan untuk memudahkan operasi penggabungan rentetan semasa memaparkan halaman.

Apakah itu enjin templat javascript

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi JavaScript 1.8.5, komputer Dell G3.

Apakah itu enjin templat javascript?

Enjin templat (di sini secara khusus merujuk kepada enjin templat yang digunakan untuk pembangunan Web) dihasilkan untuk memisahkan antara muka pengguna daripada data perniagaan (kandungan itu). boleh menjana Untuk dokumen dalam format tertentu, enjin templat yang digunakan untuk tapak web akan menjana dokumen HTML standard.

Enjin templat direka untuk memudahkan operasi penyambungan rentetan apabila memaparkan halaman dinamik.

Templat JavaScript ialah satu cara untuk memisahkan struktur HTML daripada kandungan yang terkandung di dalamnya. Sistem templat sering memperkenalkan beberapa sintaks baharu, tetapi biasanya sangat mudah digunakan, terutamanya jika kami pernah menggunakan sistem templat di tempat lain sebelum ini (seperti Twig dalam PHP). Perkara yang menarik untuk diperhatikan ialah penggantian token lazimnya diwakili oleh pendakap berganda ( {{ ... }} ), dari mana Misai dan Bar Hendal diperoleh (petua: pusingkannya ke sisi untuk melihat persamaan).

Sebagai contoh, kita perlu memberikan senarai pada halaman:

<li>111</li>
<li>222</li>
<li>333</li>
Salin selepas log masuk

Data dalam senarai ialah tatasusunan yang diperolehi secara dinamik data=['111','222',' 333']. Kemudian kita menulisnya terus dalam kod, kita perlu menggelung data, dan kemudian menyambung data setiap li. Pelajar yang biasa menulis halaman ingin menulis logik kod secara langsung dalam html Selagi sumber data ditukar, kod halaman yang berbeza boleh dikeluarkan. Sebagai contoh, kita boleh menulis seperti ini:

for(var i = 0; i < this.list.length; i++){
  <li>this.list[i]</li>
}
Salin selepas log masuk

Apabila data this.list ditukar, hasil yang berbeza boleh diperolehi. Tetapi dengan kod sedemikian, adalah mustahil untuk membezakan di mana kod logik dan di mana kod html itu sendiri. Jadi kami menambah beberapa teg, di sini kami menggunakan <% %>

<%for(var i = 0; i < this.list.length; i++){%>
  <li><%=this.list[i]%></li>
<%}%>
Salin selepas log masuk

Kami boleh menambahkan kod ini pada teg skrip, menukar jenis kepada teks/html atau format lain dan mendapatkan kandungan teks di dalam melalui dom apabila diperlukan. Jika js boleh memahami kod ini, ia boleh mengemas kini kandungan templat dengan menukar sumber data. Kita boleh menangkap semua kod logik melalui pemadanan biasa dan kemudian menganalisisnya. Di sini saya mengambil helah dan menggunakan js untuk menggunakan Fungsi baru untuk melaksanakan kod Saya menambah bahagian selain kod logik ke dalam rentetan Selepas pelaksanaan, hasil rentetan terakhir adalah output: var etj = function (str, data) {.

var reg = /^<%.*?%>/,
    reg2 = /^(.*?)<%/,
    str2 = &#39;var str = "";&#39;,
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], &#39;&#39;);
            str2 += (&#39;str +&#39; + match[0].replace(/<%|%>/g, &#39;&#39;));
            str2 += &#39;;&#39;;
        } else {
            str = str.replace(match[0], &#39;&#39;);
            str2 += match[0].replace(/<%|%>/g, &#39;&#39;);
            str2 += &#39;;&#39;;
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], &#39;&#39;);
        str2 += &#39;str +="&#39;;
        str2 += match[0];
        str2 += &#39;";&#39;;
    }
}
str2 += &#39;return str;&#39;
var f = new Function(str2);
return f.call(data);
Salin selepas log masuk

} Ini adalah enjin mainan yang ditulis oleh saya sendiri, dan ia masih mempunyai pepijat Mari buat demo dahulu (lagi pun logiknya mudah). Di sini kami menggunakan peraturan biasa yang mudah untuk mengubah templat menjadi sekeping kod js tulen Selepas mengimport sumber data, hasil pelaksanaan ialah kod html yang kami inginkan. Kita hanya perlu melaksanakan:

etj(str, {&#39;list&#39;: [1, 2, 3]});
Salin selepas log masuk

Dengan cara ini, logik HTML tidak perlu dibenamkan dalam kod js.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Apakah itu enjin templat javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan