Di manakah logik pergi ke laman web jamStack?

Pilihan terbaik untuk kod logik di bawah seni bina jamStack

Isu utama apabila membina laman web Jamstack adalah menentukan penempatan terbaik kod logik. Artikel ini meneroka empat kaedah pemprosesan logik yang berbeza melalui contoh laman web tempat muzik dan menganalisis kelebihan dan kekurangan masing -masing.

Anggapkan bahawa fungsi teras laman web ini adalah untuk membentangkan senarai konsert, termasuk acara yang berakhir dan akan datang, yang perlu dibezakan mengikut tarikh.

Penyelesaian 1: Tulis HTML secara langsung

Cara yang paling langsung ialah menulis semua maklumat aktiviti terus ke dalam fail HTML. Kaedah ini mudah dan mudah difahami, tetapi kelemahannya ialah setiap kali anda mengemas kini maklumat aktiviti, anda perlu mengubahsuai fail HTML secara manual dan menyusun semula, yang tidak cekap dan rawan ralat.

<h1 id="Akan-Datang-Malam-banjo-Bill"> Akan Datang: Malam banjo Bill</h1>
<h1 id="Tamat-Konsert-Klasik-an-Jill">Tamat: Konsert Klasik 70 -an Jill</h1>

Penyelesaian 2: Proses data berstruktur semasa pembinaan

Cara yang lebih berkesan ialah menggunakan data berstruktur (seperti fail markdown atau CMS tanpa kepala) untuk menyimpan maklumat aktiviti dan kemudian menggunakan penjana laman web statik (seperti Eleventy) untuk memproses logik semasa proses membina. Kaedah ini membolehkan operasi logik yang kompleks seperti perbandingan tarikh, panggilan API, dan lain -lain yang akan dilakukan pada masa membina.

Sebagai contoh, gunakan fail markdown untuk mewakili aktiviti:

 ---
Tajuk: Bill Banjo Tarikh Malam: 2020-09-02
---

Penerangan Aktiviti ...

Gunakan templat untuk menilai tarikh semasa pembinaan:

 { % jika event.date> sekarang %}
<h1 id="Akan-datang-event-title">Akan datang: {{event.title}}</h1>
{ % else %}
<h1 id="Berakhir-event-title">Berakhir: {{event.title}}</h1>
{ % endif %}

Walau bagaimanapun, perbandingan tarikh kaedah ini dilakukan hanya sekali pada masa membina. Ini bermakna selepas acara itu, laman web perlu dibina semula untuk mengemas kini maklumat. Walaupun proses binaan boleh automatik, pembentukan kerap dapat meningkatkan kos dan masih ada risiko lag data.

Penyelesaian 3: Logik Pemprosesan Pengkomputeran Kelebihan

Apabila teknologi pengkomputeran Edge matang, logik pemprosesan kod boleh dijalankan di lapisan CDN. Ini memastikan bahawa data terkini diambil setiap permintaan dan menyediakan prestasi yang sangat tinggi. Walau bagaimanapun, teknologi pengkomputeran Edge belum lagi popular.

 // Contoh kod ini tidak lengkap, untuk rujukan hanya peristiwa import dari "./eventslist.json"
fungsi onRequest (permintaan) {
 const sekarang = tarikh baru ();
 eventList.Foreach (event => {
  jika (event.date> sekarang) {
   event.upcoming = true;
  }
 })
 const props = {
  Acara: Acara,
 }
 request.respondenwith (200, render (props), {})
}

Penyelesaian 4: Logik Pemprosesan Runtime

Akhirnya, anda boleh lulus data berstruktur terus ke bahagian depan, dan kemudian gunakan JavaScript untuk melakukan operasi logik pada peranti pengguna untuk mengemas kini DOM secara dinamik. Kaedah ini menyesuaikan bagaimana tarikh dipaparkan berdasarkan bahasa dan zon masa pengguna dan memastikan maklumat tersebut sentiasa terkini.

Sebagai contoh, gunakan atribut data untuk menyimpan maklumat tarikh:

<h1 id="event-title"> {{event.title}}</h1>

Kemudian gunakan JavaScript untuk perbandingan tarikh:

 ProcessEvents fungsi () {
 const sekarang = tarikh baru ()
 events.foreach (event => {
  const EventDate = tarikh baru (event.getAttribute ('data-tarikh'))
  jika (eventDate> sekarang) {
    event.classlist.add ('akan datang')
  } else {
    event.classlist.add ('masa lalu')
  }
 })
}

Kesimpulan: Pemilihan kedudukan logik bergantung pada keperluan tertentu

Kaedah pemprosesan logik untuk dipilih bergantung kepada keperluan khusus. Untuk kandungan statik, hanya mungkin untuk menulis HTML secara langsung atau pemprosesan masa; Untuk kandungan yang sering berubah, disyorkan untuk menggunakan CMS dan pemprosesan masa membina; Untuk kandungan yang memerlukan prestasi masa nyata yang tinggi, pengkomputeran kelebihan atau pemprosesan jangka masa perlu dipertimbangkan. Kita perlu menimbang faktor seperti kecekapan, kos dan data kesaksian sebenar untuk memilih penyelesaian yang paling sesuai.

Atas ialah kandungan terperinci Di manakah logik pergi ke laman web jamStack?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!