Apakah itu enjin templat javascript

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.

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>

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>
}

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 72637aecae1027e7d023ac098a170986

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

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);

} 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, {'list': [1, 2, 3]});

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!