Wohin geht Logic auf Jamstack -Sites?

Die beste Wahl für den logischen Code unter Jamstack Architecture

Ein wichtiges Problem beim Erstellen einer Jamstack -Website ist die Bestimmung der besten Platzierung des logischen Code. In diesem Artikel werden vier verschiedene logische Verarbeitungsmethoden anhand eines Beispiels einer Website für Musik Veranstaltungsort untersucht und ihre jeweiligen Vor- und Nachteile analysiert.

Nehmen wir an, dass die Kernfunktion der Website darin besteht, eine Liste von Konzerten zu präsentieren, einschließlich beendeter und bevorstehender Veranstaltungen, die bis zum Datum unterschieden werden müssen.

Lösung 1: HTML direkt schreiben

Die direkteste Möglichkeit besteht darin, alle Aktivitätsinformationen direkt in die HTML -Datei zu schreiben. Diese Methode ist einfach und leicht zu verstehen, aber der Nachteil besteht darin, dass Sie jedes Mal, wenn Sie die Aktivitätsinformationen aktualisieren, die HTML-Datei manuell ändern und sie neu einsetzen müssen, was ineffizient und fehleranfällig ist.

<h1 id="Bald-kommen-Bills-Banjo-Nacht"> Bald kommen: Bills Banjo -Nacht</h1>
<h1 id="Ende-Jills-er-Jahre-Klassikerkonzert">Ende: Jills 70er -Jahre -Klassikerkonzert</h1>

Lösung 2: Prozess strukturierte Daten während der Konstruktion

Eine effizientere Möglichkeit besteht darin, strukturierte Daten (z. B. Markdown -Dateien oder kopfloses CMS) zu verwenden, um Aktivitätsinformationen zu speichern und dann einen statischen Website -Generator (z. B. elf) zu verwenden, um die Logik während des Erstellungsprozesses zu verarbeiten. Diese Methode ermöglicht es, komplexe logische Operationen wie Datumsvergleiche, API -Aufrufe usw. zum Erstellungszeit auszuführen.

Verwenden Sie beispielsweise eine Markdown -Datei, um die Aktivität darzustellen:

 ---
Titel: Bills Banjo-Nachtdatum: 2020-09-02
---

Aktivitätsbeschreibung ...

Verwenden Sie Vorlagen, um Daten während des Baus zu beurteilen:

 { % if Event.date> jetzt %}
<h1 id="Bald-kommen-Event-title">Bald kommen: {{Event.title}}</h1>
{% anders %}
<h1 id="Ende-Event-title">Ende: {{Event.title}}</h1>
{ % endif %}

Der Datumsvergleich dieser Methode wird jedoch nur einmal zur Erstellung durchgeführt. Dies bedeutet, dass nach der Veranstaltung die Website umgebaut werden muss, um die Informationen zu aktualisieren. Während der Build -Prozess automatisiert werden kann, können häufige Builds die Kosten erhöhen und es besteht immer noch das Risiko für Datenverzögerung.

Lösung 3: Edge Computing -Verarbeitungslogik

Wenn die Edge Computing -Technologie reift, kann die Codeverarbeitungslogik auf der CDN -Ebene ausgeführt werden. Dies stellt sicher, dass die neuesten Daten bei jeder Anfrage abgerufen werden und eine äußerst hohe Leistung bieten. Die Edge Computing -Technologie ist jedoch noch nicht beliebt.

 // Dieses Code -Beispiel ist unvollständig, da Referenz nur eine Ereignisliste von "./eventlist.json" importieren kann.
Funktion onRequest (Anfrage) {
 const jetzt = neues Datum ();
 Eventlist.foreach (Event => {
  if (event.date> jetzt) ​​{
   event.upcoming = true;
  }
 })
 const props = {
  Ereignisse: Ereignisse,
 }
 Request.respectorwith (200, Render (Requisiten), {})
}

Lösung 4: Laufzeitverarbeitungslogik

Schließlich können Sie die strukturierten Daten direkt an das Front-End übergeben und dann JavaScript verwenden, um logische Operationen auf dem Benutzergerät auszuführen, um das DOM dynamisch zu aktualisieren. Diese Methode passt an, wie Daten basierend auf der Sprache und Zeitzone des Benutzers angezeigt werden, und stellt sicher, dass die Informationen immer auf dem neuesten Stand sind.

Verwenden Sie beispielsweise Datenattribute, um Datumsinformationen zu speichern:

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

Verwenden Sie dann JavaScript zum Datumsvergleich:

 Funktion processEvents () {
 const jetzt = neues Datum ()
 Ereignisse.foreach (Event => {
  const eventDate = neues Datum (Event.GetAttribute ('Datendatum'))
  if (eventDate> jetzt) ​​{
    event.classlist.add ('bevorstehend')
  } anders {
    event.classlist.add ('past')
  }
 })
}

Schlussfolgerung: Die logische Positionsauswahl hängt von bestimmten Anforderungen ab

Welche die zu wählene logische Verarbeitungsmethode zu wählen ist, hängt von den spezifischen Anforderungen ab. Für statische Inhalte ist es nur möglich, HTML direkt zu schreiben oder Zeitverarbeitung zu erstellen. Bei Inhalten, die sich häufig ändert, wird empfohlen, CMS und Build-Time-Verarbeitung zu verwenden. Für Inhalte, die eine hohe Echtzeitleistung erfordern, muss das Edge Computing oder die Laufzeitverarbeitung berücksichtigt werden. Wir müssen Faktoren wie Effizienz, Kosten und Daten in der Realität abwägen, um die am besten geeignete Lösung zu wählen.

Das obige ist der detaillierte Inhalt vonWohin geht Logic auf Jamstack -Sites?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!