Enjin templat fungsi JavaScript: alat berkuasa untuk menjana HTML secara dinamik

Enjin templat fungsi JavaScript: alat berkuasa untuk menjana HTML secara dinamik

Dalam pembangunan bahagian hadapan, menjana HTML secara dinamik ialah keperluan biasa, contohnya: memaparkan hasil carian berdasarkan maklumat yang dimasukkan oleh pengguna dan memaparkan halaman secara dinamik berdasarkan data yang masuk dari latar belakang dll. Dalam pembangunan front-end tradisional, kami biasanya menggunakan penggabungan rentetan untuk menjana kod HTML dinamik. Walau bagaimanapun, kaedah ini mempunyai banyak batasan, seperti kebolehbacaan yang lemah, mudah ralat, dan penyelenggaraan yang sukar. Enjin templat fungsi JavaScript boleh menyelesaikan masalah ini dengan baik Pada masa yang sama, berbanding dengan enjin templat lain, enjin templat fungsi JavaScript lebih ringan, fleksibel dan mudah digunakan.

Apakah enjin templat fungsi JavaScript?

Enjin templat fungsi JavaScript ialah alat biasa dalam pembangunan bahagian hadapan Ia menggunakan serpihan HTML sebagai parameter untuk menjana rentetan HTML secara dinamik untuk melengkapkan tujuan pemaparan data ke antara muka. Ia menggunakan sintaks templat rentetan yang serupa dengan ES6, iaitu, menggunakan tanda belakang untuk melampirkan rentetan dan menggunakan ${} untuk menandakan pembolehubah dalam rentetan, serupa dengan contoh berikut:

<div>
  <h1 id="title">${title}</h1>
  <p>${content}</p>
</div>

Dalam enjin templat, kami Anda boleh memetakan pembolehubah kepada serpihan HTML dengan mentakrifkan fungsi untuk memaparkan data ke halaman.

Kelebihan enjin templat fungsi JavaScript

Enjin templat fungsi JavaScript mempunyai kelebihan berikut:

1. Kebolehbacaan yang baik: Menggunakan enjin templat fungsi untuk menjana kod HTML adalah lebih konsisten dengan struktur seperti HTML, mudah dibaca dan mudah untuk pemaju lain Lakukan penyelenggaraan susulan.
2. Fleksibiliti yang kuat: Disebabkan penggunaan fungsi JavaScript, pembangun boleh mentakrif dan menulis fungsi secara fleksibel mengikut keperluan perniagaan tertentu.
3. Mudah diselenggara: Apabila menggunakan enjin templat fungsi untuk menjana kod HTML, kami boleh mengekstrak serpihan HTML yang sama dan merangkumnya ke dalam fungsi berasingan untuk memudahkan penyelenggaraan masa hadapan.
4. Ringan: Enjin templat fungsi JavaScript sangat ringan, dan kerana ia dilaksanakan dalam JavaScript itu sendiri, tidak perlu memperkenalkan perpustakaan pihak ketiga, jadi ia tidak akan memberi tekanan pada kelajuan pemuatan halaman.

Pelaksanaan enjin templat fungsi JavaScript

Berikut ialah pelaksanaan asas enjin templat fungsi JavaScript:

function template(tmpl, data) {
  return tmpl.replace(/${(w+)}/g, function(match, key) {
    return data[key];
  });
}

var data = {
  title: "Hello World",
  content: "This is a demo of JavaScript function template engine"
};

var tmpl = `
  <div>
    <h1 id="title">${title}</h1>
    <p>${content}</p>
  </div>
`;

var html = template(tmpl, data);

document.body.innerHTML = html;

Kami mentakrifkan keseluruhan serpihan HTML sebagai rentetan, gunakan ${} untuk menggantikan pembolehubah yang perlu diisi secara dinamik , dan kemudian gunakan JavaScript Kaedah replace() rentetan menggantikan pembolehubah dalam rentetan dan akhirnya mengeluarkan hasilnya ke halaman.

Perlu diingat bahawa dalam aplikasi sebenar, kita mungkin menghadapi senario yang lebih kompleks, seperti keperluan untuk menggelungkan data rendering, keperluan untuk menggunakan pertimbangan bersyarat, dsb. Pada masa ini, kita boleh melaksanakan fungsi yang lebih kompleks dengan menambahkan beberapa pertimbangan logik pada fungsi tersebut.

Berikut ialah versi lanjutan bagi contoh kod di atas yang menyokong gelung pada pemaparan data:

function template(tmpl, data) {
  return tmpl.replace(/<%=(w+)%>/g, function(match, key) {
    return data[key];
  }).replace(/<%for +(w+) +in +(w+)((w+))%>((?!
).|
)+<%endfor%>/g, function(match, key, fn, name) {
    var str = "";
    data[name].forEach(function(item) {
      str += fn(item);
    });
    return str;
  });
}

var data = {
  title: "Hello World",
  content: "This is a demo of JavaScript function template engine",
  list: [{
      name: "item1",
      content: "This is item 1"
    },
    {
      name: "item2",
      content: "This is item 2"
    },
    {
      name: "item3",
      content: "This is item 3"
    }
  ]
};

var tmpl = `
  <div>
    <h1><%=title%></h1>
    <p><%=content%></p>
    <%for item in list(function(item){%>
    <div>
      <h2><%=item.name%></h2>
      <p><%=item.content%></p>
    </div>
    <%})%>
  </div>
`;

var html = template(tmpl, data);

document.body.innerHTML = html;

Dalam contoh ini, kami mentakrifkan sintaks a for gelung, yang menjana fungsi yang digunakan pada tatasusunan item untuk setiap elemen , dan mengembalikan rentetan yang terhasil.

Oleh kerana enjin templat fungsi JavaScript sangat fleksibel, ia boleh diperluaskan dengan mudah untuk memenuhi keperluan tertentu. Walau bagaimanapun, dalam pembangunan sebenar, adalah disyorkan untuk menggunakan enjin templat JavaScript sumber terbuka, seperti Handlebars.js, Moustache.js, ejs, dll., yang mengandungi sejumlah besar fungsi dan pengoptimuman, lebih komprehensif dan stabil, dan juga menyokong pra-kompilasi untuk prestasi yang lebih baik.

Ringkasan

Enjin templat fungsi JavaScript ialah alat yang sangat berguna yang boleh menjana HTML dinamik dengan mudah dan menjadikannya pada halaman. Berbanding dengan enjin templat lain, ia mempunyai kelebihan fleksibiliti yang lebih tinggi, saiz yang lebih ringan dan pelaksanaan yang lebih mudah. Walau bagaimanapun, untuk meningkatkan kecekapan dan kestabilan dalam pengeluaran sebenar, adalah disyorkan untuk menggunakan enjin templat sumber terbuka yang matang.

Atas ialah kandungan terperinci Enjin templat fungsi JavaScript: alat berkuasa untuk menjana HTML secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!