header.html
\n<\/p>\n

Welcome to the web site<\/header>\n<\/pre>\n\n\n
Ausgabe
\n<\/p>\n

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
\n
Welcome to the web site<\/header>\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
Als Compute auf den Markt kam, ver?nderte sich die Edge-Landschaft haupts?chlich auf zwei Arten: Programmierbarkeit und Modularit?t.<\/p>\n\n
Kurz nachdem sich unsere Plattformunterstützung für Rust stabilisiert hatte, ver?ffentlichten wir eine Kiste für Rust, die ESI implementierte und Programmierbarkeit hinzufügte. Sie k?nnen jetzt mithilfe von Code konfigurieren, wie zus?tzliche Backend-Anfragen erstellt und Antwortfragmente verarbeitet werden. Sie k?nnen die ESI-Verarbeitung sogar für Dokumente durchführen, die nicht vom Backend-Server stammen. Diese Programmierbarkeit unterschied es von der ESI-Unterstützung, die wir in VCL haben, die auf die von uns angebotenen festen Funktionen beschr?nkt war.<\/p>\n\n
Gleichzeitig war dieser Ansatz hochgradig modular und gab dem Programmierer die M?glichkeit, diese ESI-Verarbeitung auf Anfragebasis durchzuführen, und die M?glichkeit, die Verarbeitung mit anderen Modulen zu kombinieren, die mit kompatiblen Datentypen arbeiten und anwenden sie in beliebiger Reihenfolge und\/oder logischer Bedingung.<\/p>\n
\n  \n  \n  N?chstes Ziel: JavaScript\n<\/h2>\n\n
?hnlich wie bei unserer Rust-Version wollten wir, dass diese JavaScript-Bibliothek programmierbar ist. Die JavaScript-Unterstützung von Fastly umfasst seit jeher die Fetch-API und die dazugeh?rige Streams-API. Eine nützliche Funktion der Streams-API ist die TransformStream-Schnittstelle, die es erm?glicht, Daten durch ein Objekt zu ?leiten“, um eine Transformation anzuwenden – perfekt für ESI. Durch die Implementierung des ESI-Prozessors als Implementierung von TransformStream konnten wir ihn direkt in eine in JavaScript geschriebene Fastly Compute-Anwendung integrieren.<\/p>\n\n
So k?nnen Sie es streamen:
\n<\/p>\n
\n\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
Die Transformation, die wir EsiTransformStream nennen, wird direkt auf den Stream angewendet, wodurch Speicher- und Leistungsprobleme entfallen. Das bedeutet:<\/p>\n\n
\n
Es ist nicht erforderlich, die gesamte Upstream-Antwort zu puffern, bevor die Transformation angewendet wird.<\/li>\n
Der Transformer verbraucht die Upstream-Antwort so schnell wie m?glich und verarbeitet ESI-Tags, sobald sie im Stream angezeigt werden. Sobald der Transformator die Verarbeitung jedes ESI-Tags abgeschlossen hat, werden die Ergebnisse sofort nachgelagert freigegeben, sodass wir den kleinstm?glichen Puffer vorhalten k?nnen. Dadurch kann der Client das erste Byte des gestreamten Ergebnisses empfangen, sobald es bereit ist, ohne auf die vollst?ndige Verarbeitung warten zu müssen.<\/li>\n<\/ul>\n\n
Darüber hinaus ist dieses Design modular, sodass EsiTransformStream zu einem weiteren Tool wird, das Sie neben anderen Dingen verwenden k?nnen. Beispielsweise m?chten Sie m?glicherweise andere Transformationen wie Komprimierung auf Antworten anwenden, und eine Antwort kann durch eine beliebige Anzahl dieser Transformationsstr?me geleitet werden, da es sich um eine vollst?ndig standardm??ige Schnittstelle handelt.  Wenn Sie m?chten, k?nnen Sie ESI sogar nur für bestimmte Anfragen oder Antworten bedingt aktivieren, z. B. nach Anfrageheadern, Pfaden oder Antwortinhaltstyp.<\/p>\n\n
So instanziieren Sie EsiTransformStream:
\n<\/p>\n
Welcome to the web site<\/header>\n<\/pre>\n\n\n
Der Konstruktor akzeptiert eine URL und ein Headers-Objekt und optional einige Optionen als dritten Parameter. Wie bereits beschrieben, besteht die Hauptfunktion von ESI darin, zus?tzliche Vorlagen herunterzuladen, um sie in den resultierenden Stream einzubinden. Begegnung mit einem  Tag verwendet fetch als zugrunde liegenden Mechanismus zum Abrufen einer Vorlage, und der Hauptzweck dieser Parameter besteht darin, diese Abrufaufrufe zu konfigurieren:<\/p>\n\n
\n
Die URL wird verwendet, um relative Pfade im Quellcode von  aufzul?sen. Tags.<\/li>\n
Die Header werden verwendet, wenn zus?tzliche Anfragen zum Abrufen der Vorlagen gestellt werden.<\/li>\n
Das optionale Konfigurationsobjekt kann verwendet werden, um das Verhalten des durchgeführten Abrufs zu überschreiben und um anderes benutzerdefiniertes Verhalten anzuwenden, z. B. die Art und Weise, wie die abgerufene Vorlage verarbeitet wird, und eine benutzerdefinierte Fehlerbehandlung.<\/li>\n<\/ul>\n\n
Im einfachsten Fall verwenden Sie nur den Abrufwert des Konfigurationsobjekts. Wenn Sie es nicht bereitstellen, wird stattdessen die globale Abruffunktion verwendet. In Compute ben?tigen Sie es jedoch, um ein Backend für den Abruf anzugeben, das beim Einbinden einer Vorlage verwendet werden soll (es sei denn, Sie verwenden die dynamische Backend-Funktion). Der obige Beispielausschnitt weist das Backend mit dem Namen origin_0 zu, bevor der globale Abruf aufgerufen wird.<\/p>\n\n
Das ist es! Mit diesem einfachen Setup k?nnen Sie ein Backend einrichten, das ESI-Tags bereitstellt, und eine Compute-Anwendung, die diese verarbeitet. Hier ist ein vollst?ndiges Beispiel, das Sie ausführen k?nnen:<\/p>\n\n\n
\n    \n      fiddle.fastly.dev\n    \n<\/div>\n
\n  \n  \n  Unterstützung für ESI-Funktionen\n<\/h2>\n\n
Diese Implementierung bietet mehr ESI-Funktionen als andere, die wir in der Vergangenheit zur Verfügung gestellt haben.<\/p>\n\n
\n  \n  \n  Fehlerbehandlung\n<\/h3>\n\n
Manchmal wird eine Datei, auf die von einem  Das Abrufen des Tags schl?gt m?glicherweise fehl, da es nicht vorhanden ist oder einen Serverfehler verursacht. In diesen F?llen ist es m?glich, den Fehler zu ignorieren, indem man das Attribut onerror=\"continue\" hinzufügt.
\n<\/p>\n\n
\n\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
Wenn \/templates\/header.html einen Fehler verursacht, ignoriert der ESI-Prozessor den Fehler stillschweigend und ersetzt das gesamte  Tag mit einer leeren Zeichenfolge.<\/p>\n\n
Es ist auch m?glich, eine strukturiertere Fehlerbehandlung zu verwenden, indem ein  Block, der so aussieht:
\n<\/p>\n
Welcome to the web site<\/header>\n<\/pre>\n\n\n
Der ESI-Prozessor führt zun?chst den Inhalt von  aus. Wenn ein esi:include-Tag einen Fehler verursacht, führt der ESI-Prozessor den Inhalt von  aus.<\/p>\n\n
Es ist wichtig zu beachten, dass das gesamte  Der Block wird durch den gesamten -Block ersetzt. blockieren, wenn es erfolgreich ist oder das  wenn ein Fehler vorliegt. Wenn im obigen Beispiel \/templates\/header.html einen Fehler verursacht, führt dies auch dazu, dass der Text ?Hauptkopfzeile“<\/em> nicht in der Ausgabe erscheint. Es ist nur der Text ?Alternativer Header“<\/em> enthalten. Weitere Einzelheiten finden Sie in der ESI-Sprachspezifikation.<\/p>\n
\n  \n  \n  Bedingungen\n<\/h3>\n\n
ESI erm?glicht auch die bedingte Ausführung, indem es Laufzeitprüfungen für Variablen durchführt. Das Folgende ist ein Beispiel für eine solche Prüfung:
\n<\/p>\n
\n
Welcome to the web site<\/header>\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
Wenn der Prozessor auf ein  Block durchl?uft es den  Bl?cken und überprüft die in ihren Testattributen festgelegten Ausdrücke. Der Prozessor führt den ersten esi:when-Block aus, in dem der Ausdruck als wahr ausgewertet wird. Wenn keiner der Ausdrücke ?true“ ergibt, wird optional der Block ?esi:otherwise“ ausgeführt, sofern dieser bereitgestellt wird. Das gesamte  Der Block wird durch die Gesamtheit des -Blocks ersetzt. oder  Block, der ausgeführt wird.<\/p>\n\n
Der Prozessor stellt einen begrenzten Satz an Variablen zur Verfügung, die haupts?chlich auf Anfragecookies basieren. Im obigen Beispiel wird ein HTTP-Cookie mit dem Namen ?group“ auf seinen Wert überprüft. Unsere Implementierung basiert auf der ESI-Sprachspezifikation; Weitere Informationen finden Sie hier.<\/p>\n
\n  \n  \n  Liste der unterstützten Tags und Funktionen\n<\/h3>\n\n
Diese Implementierung unterstützt die folgenden Tags der ESI-Sprachspezifikation.<\/p>\n\n
\n
esi:include<\/li>\n
esi:comment<\/li>\n
esi:remove<\/li>\n
\nesi:try \/ esi:attempt \/ esi:exclusive\n<\/li>\n
\nesi:choose \/ esi:when \/ esi:otherwise\n<\/li>\n
esi:vars<\/li>\n<\/ul>\n\n
Das  Tag ist in der Spezifikation als optional definiert und in dieser Implementierung nicht enthalten.<\/p>\n
ESI-Variablen werden in den Attributen von ESI-Tags unterstützt und ESI-Ausdrücke werden im Testattribut von  unterstützt. Darüber hinaus ist das  Kommentar wird unterstützt.<\/p>\n
\n  \n  \n  Individuelles Verhalten bedeutet endlose M?glichkeiten\n<\/h2>\n\n
W?hrend der Funktionsumfang ausreicht, um begeistert zu sein, ist das wirklich Spannende an der Programmierbarkeit, dass noch mehr Dinge m?glich sind. Das Einbinden von Vorlagen ist die Hauptanwendung von ESI, aber das ist bei weitem nicht alles, was es kann. Hier ist ein Beispiel.<\/p>\n\n
Bedenken Sie, dass in Ihrem Dokument ein Zeitstempel markiert ist, der bei der Anzeige als relatives Datum dargestellt werden soll, z. B. ?vor 2 Tagen“. Es gibt viele M?glichkeiten, dies zu tun, aber um die besten Auswirkungen auf Leistung und Speicher zu erzielen, w?re es gro?artig, ein Suchen\/Ersetzen in Streams durchzuführen. Die Programmierung dieser ESI-Bibliothek kann hierfür tats?chlich eine gute Option sein.<\/p>\n\n
Wir k?nnen Zeitstempel definieren, die in Ihrem Backend-Dokument kodiert werden sollen, indem wir ein speziell gestaltetes ESI-Tag in einem Format wie dem folgenden verwenden:
\n<\/p>\n
\n\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
Dieses Snippet kann beispielsweise Mitternacht am 1. Januar 2024 (Pazifikzeit) darstellen:
\n<\/p>\n
Welcome to the web site<\/header>\n<\/pre>\n\n\n
Richten Sie nun den EsiTransformStream so ein, dass ein synthetisches Ersatzdokument bereitgestellt wird, wann immer er dieses URL-Muster sieht:
\n<\/p>\n
\n
Welcome to the web site<\/header>\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
Wenn der Prozessor nun auf den obigen Beispielausschnitt st??t, gibt er ein Ergebnis ?hnlich dem folgenden aus (abh?ngig davon, wie viele Tage in der Zukunft Sie es ausführen):
\n<\/p>\n
const transformedBody = resp.body.pipeThrough(esiTransformStream);\n\nreturn new Response(\n  transformedBody,\n  {\n    status: resp.status,\n    headers: resp.headers,\n  },\n);\n<\/pre>\n\n\n
Da das Backend-Dokument von Fastly zwischengespeichert werden kann, k?nnen zukünftige Anfragen von einem Cache-HIT profitieren, w?hrend bei der Verarbeitung weiterhin die aktualisierte relative Zeit angezeigt wird.<\/p>\n\n
Ein Live-Beispiel hierfür finden Sie in der folgenden Geige:
\n<\/p>\n
\n    \n      fiddle.fastly.dev\n    \n<\/div>\n\n\n\n
\n  \n  \n  Machen Sie eine Spritztour!\n<\/h2>\n\n
@fastly\/esi ist jetzt auf npm verfügbar und kann zu jedem JavaScript-Programm hinzugefügt werden. Verwenden Sie es natürlich am Edge in Ihren Fastly Compute-Programmen, aber tats?chlich funktioniert es auch au?erhalb von Compute, solange Ihre Umgebung die Fetch-API unterstützt. Der vollst?ndige Quellcode ist auf GitHub verfügbar.<\/p>\n\n
Klonen Sie zun?chst eine der oben genannten Fiddles und testen Sie sie mit Ihren eigenen Ursprüngen, noch bevor Sie ein Fastly-Konto erstellt haben. Wenn Sie bereit sind, Ihren Dienst in unserem globalen Netzwerk zu ver?ffentlichen, k?nnen Sie sich für eine kostenlose Testversion von Compute anmelden und dann sofort mit der ESI-Bibliothek auf npm loslegen.<\/p>\n\n
Mit Compute ist der Vorsprung programmierbar und modular – w?hlen und kombinieren Sie die L?sungen, die für Sie am besten funktionieren, oder erstellen Sie sogar Ihre eigenen. Wir sind nicht die Einzigen, die solche Module für Compute bereitstellen k?nnen. Jeder kann zum ?kosystem beitragen und davon profitieren. Und wie immer treffen Sie uns im Fastly-Community-Forum und teilen Sie uns mit, was Sie erstellt haben!<\/p>\n\n\n          \n\n            \n        "}	
	






	

    

        

            

                
                    
                
            
            

                

                    Gemeinschaft
                    

                        

                            Artikel
                            Themen
                            Fragen und Antworten
                        
                    
                

                

                    Lernen
                    

                        

                            Kurs
                            Programmierw?rterbuch
                        
                    
                

                

                    Tools-Bibliothek
                    

                        

                            Entwicklungswerkzeuge
                            Quellcode der Website
                            PHP-Bibliotheken
                            JS-Spezialeffekte
                            Website-Materialien
                            Erweiterungs-Plug-Ins
                        
                    
                

                

                    KI-Tools
                

                

                    Freizeit
                    

                        

                            Spiel-Download
                            Spiel-Tutorials

                        
                    
                
            
        
                    

                
                
            
                

            

                Deutsch
                

                    

                                                簡(jiǎn)體中文
                                                English
                                                繁體中文
                                                日本語(yǔ)
                                                ???
                                                Melayu
                                                Fran?ais
                                                Deutsch
                                            
                
            
            
                            

                    Login
                
                

                    singup
                
            
        
    


	
	

		

			

							

					

						Heim
						
												Web-Frontend
						
												js-Tutorial
						
						Eine modulare Edge Side Includes-Komponente für JavaScript Compute
					
					
					

						

							
Eine modulare Edge Side Includes-Komponente für JavaScript Compute
							

								

									
									
									
									

																			Mary-Kate Olsen
                                										
								
                			
							Dec 20, 2024 am	 03:13 AM
														
						
					
					

					

						

						
						
						

					

Im Sommer 2022 arbeitete mein Teamkollege Kailan an einer Rust-Kiste für Fastly Compute, implementierte eine Teilmenge der Edge Side Includes (ESI)-Vorlagensprache und ver?ffentlichte einen Blogbeitrag darüber Es. Dieser Artikel war nicht nur deshalb von Bedeutung, weil wir eine nützliche Bibliothek ver?ffentlicht haben, sondern auch, weil er ein brillantes Beispiel dafür war, was Compute uns bieten kann: einen programmierbaren Edge mit modularer Funktionalit?t. Und da JavaScript nun seit mehr als einem Jahr allgemein auf Compute verfügbar ist, war es an der Zeit, dass wir eine ?hnliche L?sung für unsere JavaScript-Benutzer haben. Mit der ESI-Bibliothek für JavaScript von Fastly, die jetzt auf npm verfügbar ist, k?nnen Sie Ihrer Anwendung leistungsstarke ESI-Verarbeitung hinzufügen.





  
  
  Programmierbarkeit und Modularit?t


Seit fast einem Jahrzehnt unterstützt das CDN von Fastly Edge Side Includes (ESI), eine Vorlagensprache, die durch die Interpretation spezieller Tags in Ihrer HTML-Quelle funktioniert. Es dreht sich um das Tag , das den Edge-Server anweist, ein anderes Dokument abzurufen und es in den Stream einzubinden.

index.html



<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>



header.html


<header>Welcome to the web site</header>



Ausgabe



<header>Welcome to the web site</header>

Content






Als Compute auf den Markt kam, ver?nderte sich die Edge-Landschaft haupts?chlich auf zwei Arten: Programmierbarkeit und Modularit?t.

Kurz nachdem sich unsere Plattformunterstützung für Rust stabilisiert hatte, ver?ffentlichten wir eine Kiste für Rust, die ESI implementierte und Programmierbarkeit hinzufügte. Sie k?nnen jetzt mithilfe von Code konfigurieren, wie zus?tzliche Backend-Anfragen erstellt und Antwortfragmente verarbeitet werden. Sie k?nnen die ESI-Verarbeitung sogar für Dokumente durchführen, die nicht vom Backend-Server stammen. Diese Programmierbarkeit unterschied es von der ESI-Unterstützung, die wir in VCL haben, die auf die von uns angebotenen festen Funktionen beschr?nkt war.

Gleichzeitig war dieser Ansatz hochgradig modular und gab dem Programmierer die M?glichkeit, diese ESI-Verarbeitung auf Anfragebasis durchzuführen, und die M?glichkeit, die Verarbeitung mit anderen Modulen zu kombinieren, die mit kompatiblen Datentypen arbeiten und anwenden sie in beliebiger Reihenfolge und/oder logischer Bedingung.

  
  
  N?chstes Ziel: JavaScript


?hnlich wie bei unserer Rust-Version wollten wir, dass diese JavaScript-Bibliothek programmierbar ist. Die JavaScript-Unterstützung von Fastly umfasst seit jeher die Fetch-API und die dazugeh?rige Streams-API. Eine nützliche Funktion der Streams-API ist die TransformStream-Schnittstelle, die es erm?glicht, Daten durch ein Objekt zu ?leiten“, um eine Transformation anzuwenden – perfekt für ESI. Durch die Implementierung des ESI-Prozessors als Implementierung von TransformStream konnten wir ihn direkt in eine in JavaScript geschriebene Fastly Compute-Anwendung integrieren.

So k?nnen Sie es streamen:


<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>



Die Transformation, die wir EsiTransformStream nennen, wird direkt auf den Stream angewendet, wodurch Speicher- und Leistungsprobleme entfallen. Das bedeutet:


Es ist nicht erforderlich, die gesamte Upstream-Antwort zu puffern, bevor die Transformation angewendet wird.
Der Transformer verbraucht die Upstream-Antwort so schnell wie m?glich und verarbeitet ESI-Tags, sobald sie im Stream angezeigt werden. Sobald der Transformator die Verarbeitung jedes ESI-Tags abgeschlossen hat, werden die Ergebnisse sofort nachgelagert freigegeben, sodass wir den kleinstm?glichen Puffer vorhalten k?nnen. Dadurch kann der Client das erste Byte des gestreamten Ergebnisses empfangen, sobald es bereit ist, ohne auf die vollst?ndige Verarbeitung warten zu müssen.


Darüber hinaus ist dieses Design modular, sodass EsiTransformStream zu einem weiteren Tool wird, das Sie neben anderen Dingen verwenden k?nnen. Beispielsweise m?chten Sie m?glicherweise andere Transformationen wie Komprimierung auf Antworten anwenden, und eine Antwort kann durch eine beliebige Anzahl dieser Transformationsstr?me geleitet werden, da es sich um eine vollst?ndig standardm??ige Schnittstelle handelt.  Wenn Sie m?chten, k?nnen Sie ESI sogar nur für bestimmte Anfragen oder Antworten bedingt aktivieren, z. B. nach Anfrageheadern, Pfaden oder Antwortinhaltstyp.

So instanziieren Sie EsiTransformStream:


<header>Welcome to the web site</header>



Der Konstruktor akzeptiert eine URL und ein Headers-Objekt und optional einige Optionen als dritten Parameter. Wie bereits beschrieben, besteht die Hauptfunktion von ESI darin, zus?tzliche Vorlagen herunterzuladen, um sie in den resultierenden Stream einzubinden. Begegnung mit einem  Tag verwendet fetch als zugrunde liegenden Mechanismus zum Abrufen einer Vorlage, und der Hauptzweck dieser Parameter besteht darin, diese Abrufaufrufe zu konfigurieren:


Die URL wird verwendet, um relative Pfade im Quellcode von  aufzul?sen. Tags.
Die Header werden verwendet, wenn zus?tzliche Anfragen zum Abrufen der Vorlagen gestellt werden.
Das optionale Konfigurationsobjekt kann verwendet werden, um das Verhalten des durchgeführten Abrufs zu überschreiben und um anderes benutzerdefiniertes Verhalten anzuwenden, z. B. die Art und Weise, wie die abgerufene Vorlage verarbeitet wird, und eine benutzerdefinierte Fehlerbehandlung.


Im einfachsten Fall verwenden Sie nur den Abrufwert des Konfigurationsobjekts. Wenn Sie es nicht bereitstellen, wird stattdessen die globale Abruffunktion verwendet. In Compute ben?tigen Sie es jedoch, um ein Backend für den Abruf anzugeben, das beim Einbinden einer Vorlage verwendet werden soll (es sei denn, Sie verwenden die dynamische Backend-Funktion). Der obige Beispielausschnitt weist das Backend mit dem Namen origin_0 zu, bevor der globale Abruf aufgerufen wird.

Das ist es! Mit diesem einfachen Setup k?nnen Sie ein Backend einrichten, das ESI-Tags bereitstellt, und eine Compute-Anwendung, die diese verarbeitet. Hier ist ein vollst?ndiges Beispiel, das Sie ausführen k?nnen:



    
      fiddle.fastly.dev
    


  
  
  Unterstützung für ESI-Funktionen


Diese Implementierung bietet mehr ESI-Funktionen als andere, die wir in der Vergangenheit zur Verfügung gestellt haben.


  
  
  Fehlerbehandlung


Manchmal wird eine Datei, auf die von einem  Das Abrufen des Tags schl?gt m?glicherweise fehl, da es nicht vorhanden ist oder einen Serverfehler verursacht. In diesen F?llen ist es m?glich, den Fehler zu ignorieren, indem man das Attribut onerror="continue" hinzufügt.



<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>



Wenn /templates/header.html einen Fehler verursacht, ignoriert der ESI-Prozessor den Fehler stillschweigend und ersetzt das gesamte  Tag mit einer leeren Zeichenfolge.

Es ist auch m?glich, eine strukturiertere Fehlerbehandlung zu verwenden, indem ein  Block, der so aussieht:


<header>Welcome to the web site</header>



Der ESI-Prozessor führt zun?chst den Inhalt von  aus. Wenn ein esi:include-Tag einen Fehler verursacht, führt der ESI-Prozessor den Inhalt von  aus.

Es ist wichtig zu beachten, dass das gesamte  Der Block wird durch den gesamten -Block ersetzt. blockieren, wenn es erfolgreich ist oder das  wenn ein Fehler vorliegt. Wenn im obigen Beispiel /templates/header.html einen Fehler verursacht, führt dies auch dazu, dass der Text ?Hauptkopfzeile“ nicht in der Ausgabe erscheint. Es ist nur der Text ?Alternativer Header“ enthalten. Weitere Einzelheiten finden Sie in der ESI-Sprachspezifikation.

  
  
  Bedingungen


ESI erm?glicht auch die bedingte Ausführung, indem es Laufzeitprüfungen für Variablen durchführt. Das Folgende ist ein Beispiel für eine solche Prüfung:



<header>Welcome to the web site</header>

Content





Wenn der Prozessor auf ein  Block durchl?uft es den  Bl?cken und überprüft die in ihren Testattributen festgelegten Ausdrücke. Der Prozessor führt den ersten esi:when-Block aus, in dem der Ausdruck als wahr ausgewertet wird. Wenn keiner der Ausdrücke ?true“ ergibt, wird optional der Block ?esi:otherwise“ ausgeführt, sofern dieser bereitgestellt wird. Das gesamte  Der Block wird durch die Gesamtheit des -Blocks ersetzt. oder  Block, der ausgeführt wird.

Der Prozessor stellt einen begrenzten Satz an Variablen zur Verfügung, die haupts?chlich auf Anfragecookies basieren. Im obigen Beispiel wird ein HTTP-Cookie mit dem Namen ?group“ auf seinen Wert überprüft. Unsere Implementierung basiert auf der ESI-Sprachspezifikation; Weitere Informationen finden Sie hier.

  
  
  Liste der unterstützten Tags und Funktionen


Diese Implementierung unterstützt die folgenden Tags der ESI-Sprachspezifikation.


esi:include
esi:comment
esi:remove

esi:try / esi:attempt / esi:exclusive


esi:choose / esi:when / esi:otherwise

esi:vars


Das  Tag ist in der Spezifikation als optional definiert und in dieser Implementierung nicht enthalten.
ESI-Variablen werden in den Attributen von ESI-Tags unterstützt und ESI-Ausdrücke werden im Testattribut von  unterstützt. Darüber hinaus ist das  Kommentar wird unterstützt.

  
  
  Individuelles Verhalten bedeutet endlose M?glichkeiten


W?hrend der Funktionsumfang ausreicht, um begeistert zu sein, ist das wirklich Spannende an der Programmierbarkeit, dass noch mehr Dinge m?glich sind. Das Einbinden von Vorlagen ist die Hauptanwendung von ESI, aber das ist bei weitem nicht alles, was es kann. Hier ist ein Beispiel.

Bedenken Sie, dass in Ihrem Dokument ein Zeitstempel markiert ist, der bei der Anzeige als relatives Datum dargestellt werden soll, z. B. ?vor 2 Tagen“. Es gibt viele M?glichkeiten, dies zu tun, aber um die besten Auswirkungen auf Leistung und Speicher zu erzielen, w?re es gro?artig, ein Suchen/Ersetzen in Streams durchzuführen. Die Programmierung dieser ESI-Bibliothek kann hierfür tats?chlich eine gute Option sein.

Wir k?nnen Zeitstempel definieren, die in Ihrem Backend-Dokument kodiert werden sollen, indem wir ein speziell gestaltetes ESI-Tag in einem Format wie dem folgenden verwenden:


<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>



Dieses Snippet kann beispielsweise Mitternacht am 1. Januar 2024 (Pazifikzeit) darstellen:


<header>Welcome to the web site</header>



Richten Sie nun den EsiTransformStream so ein, dass ein synthetisches Ersatzdokument bereitgestellt wird, wann immer er dieses URL-Muster sieht:



<header>Welcome to the web site</header>

Content





Wenn der Prozessor nun auf den obigen Beispielausschnitt st??t, gibt er ein Ergebnis ?hnlich dem folgenden aus (abh?ngig davon, wie viele Tage in der Zukunft Sie es ausführen):


const transformedBody = resp.body.pipeThrough(esiTransformStream);

return new Response(
  transformedBody,
  {
    status: resp.status,
    headers: resp.headers,
  },
);



Da das Backend-Dokument von Fastly zwischengespeichert werden kann, k?nnen zukünftige Anfragen von einem Cache-HIT profitieren, w?hrend bei der Verarbeitung weiterhin die aktualisierte relative Zeit angezeigt wird.

Ein Live-Beispiel hierfür finden Sie in der folgenden Geige:



    
      fiddle.fastly.dev
    





  
  
  Machen Sie eine Spritztour!


@fastly/esi ist jetzt auf npm verfügbar und kann zu jedem JavaScript-Programm hinzugefügt werden. Verwenden Sie es natürlich am Edge in Ihren Fastly Compute-Programmen, aber tats?chlich funktioniert es auch au?erhalb von Compute, solange Ihre Umgebung die Fetch-API unterstützt. Der vollst?ndige Quellcode ist auf GitHub verfügbar.

Klonen Sie zun?chst eine der oben genannten Fiddles und testen Sie sie mit Ihren eigenen Ursprüngen, noch bevor Sie ein Fastly-Konto erstellt haben. Wenn Sie bereit sind, Ihren Dienst in unserem globalen Netzwerk zu ver?ffentlichen, k?nnen Sie sich für eine kostenlose Testversion von Compute anmelden und dann sofort mit der ESI-Bibliothek auf npm loslegen.

Mit Compute ist der Vorsprung programmierbar und modular – w?hlen und kombinieren Sie die L?sungen, die für Sie am besten funktionieren, oder erstellen Sie sogar Ihre eigenen. Wir sind nicht die Einzigen, die solche Module für Compute bereitstellen k?nnen. Jeder kann zum ?kosystem beitragen und davon profitieren. Und wie immer treffen Sie uns im Fastly-Community-Forum und teilen Sie uns mit, was Sie erstellt haben!


          

            
        
Das obige ist der detaillierte Inhalt vonEine modulare Edge Side Includes-Komponente für JavaScript Compute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!


						
					
					

						
Erkl?rung dieser Website
						
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
					
				

				



				



				
    


					


											

							

								

									
									
Hei?e KI -Werkzeuge
								
								

																		

											
												
											
											

												
													
Undress AI Tool
												
												
Ausziehbilder kostenlos
											
										
																		

											
												
											
											

												
													
Undresser.AI Undress
												
												
KI-gestützte App zum Erstellen realistischer Aktfotos
											
										
																		

											
												
											
											

												
													
AI Clothes Remover
												
												
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
											
										
																		

											
												
											
											

												
													
Clothoff.io
												
												
KI-Kleiderentferner
											
										
																		

											
												
											
											

												
													
Video Face Swap
												
												
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
											
										
																
								

									Mehr anzeigen
								
							
						
					


					

						

							

								
								
Hei?er Artikel
							
							

															

									Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern
									

										4 Wochen vor
										By DDD
									
								
															

									Oguri Cap Build Guide | Ein hübsches Derby -Musume
									

										2 Wochen vor
										By Jack chen
									
								
															

									Agnes Tachyon Build Guide | Ein hübsches Derby -Musume
									

										1 Wochen vor
										By Jack chen
									
								
															

									Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough
									

										3 Wochen vor
										By Jack chen
									
								
															

									Datum alles: Dirk und Harper Relationship Guide
									

										4 Wochen vor
										By Jack chen
									
								
														
							

								Mehr anzeigen
							
						
					


											

							

								

									
									
Hei?e Werkzeuge
								
								

																		

											
												
											
											

												
													
Notepad++7.3.1
												
												
Einfach zu bedienender und kostenloser Code-Editor
											
										
																			

											
												
											
											

												
													
SublimeText3 chinesische Version
												
												
Chinesische Version, sehr einfach zu bedienen
											
										
																			

											
												
											
											

												
													
Senden Sie Studio 13.0.1
												
												
Leistungsstarke integrierte PHP-Entwicklungsumgebung
											
										
																			

											
												
											
											

												
													
Dreamweaver CS6
												
												
Visuelle Webentwicklungstools
											
										
																			

											
												
											
											

												
													
SublimeText3 Mac-Version
												
												
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
											
										
																	
								

									Mehr anzeigen
								
							
						
										

					
					

						

							

								
								
Hei?e Themen
							
							

															

									Wo ist der Login-Zugang für Gmail-E-Mail?
									

										

											
											8637
										
										

											
											17
										
									
								
															

									Java-Tutorial
									

										

											
											1783
										
										

											
											16
										
									
								
															

									CakePHP-Tutorial
									

										

											
											1727
										
										

											
											56
										
									
								
															

									Laravel-Tutorial
									

										

											
											1577
										
										

											
											28
										
									
								
															

									PHP-Tutorial
									

										

											
											1442
										
										

											
											31
										
									
								
														
							

								Mehr anzeigen
							
						
					
				
			
							

					

						

							Related knowledge
						
						


													

								
									
								
								Java vs. JavaScript: Die Verwirrung beseitigen
								Jun 20, 2025 am	 12:27 AM
								
Java und JavaScript sind unterschiedliche Programmiersprachen, die jeweils für verschiedene Anwendungsszenarien geeignet sind. Java wird für die Entwicklung gro?er Unternehmen und mobiler Anwendungen verwendet, w?hrend JavaScript haupts?chlich für die Entwicklung von Webseiten verwendet wird.
							
														

								
									
								
								JavaScript -Kommentare: Kurzer Erl?uterung
								Jun 19, 2025 am	 12:40 AM
								
JavaScriptComents AreseessentialFormaintaining, Lesen und GuidingCodeexexecution.1) einzelne Linecommments Arequickickexplanationen.2) Multi-LindexplainComproxlogicorProvedetailedDocumentation.3) InlinecommentsclarifyspecificPartsosensofCode.BestPracticic
							
														

								
									
								
								Wie arbeite man mit Daten und Zeiten in JS?
								Jul 01, 2025 am	 01:27 AM
								
Die folgenden Punkte sollten bei der Verarbeitung von Daten und Zeiten in JavaScript festgestellt werden: 1. Es gibt viele M?glichkeiten, Datumsobjekte zu erstellen. Es wird empfohlen, ISO -Format -Zeichenfolgen zu verwenden, um die Kompatibilit?t sicherzustellen. 2. Die Zeitinformationen erhalten und festlegen k?nnen und setzen Sie Methoden fest, und beachten Sie, dass der Monat mit 0 beginnt. 3. Die manuell formatierende Daten sind Zeichenfolgen erforderlich, und auch Bibliotheken von Drittanbietern k?nnen verwendet werden. 4. Es wird empfohlen, Bibliotheken zu verwenden, die Zeitzonen wie Luxon unterstützen. Das Beherrschen dieser wichtigen Punkte kann h?ufige Fehler effektiv vermeiden.
							
														

								
									
								
								Warum sollten Sie  Tags am Ende des  platzieren?
								Jul 02, 2025 am	 01:22 AM
								
PlatztagsattheBottomofabogpostorwebpageServeSpracticalPurposesforseo, Usexperience und design.1ithelpswithseobyallowingEnginestoaccessKeyword-relevantTagswithoutClutteringHemainContent.2.
							
														

								
									
								
								JavaScript vs. Java: Ein umfassender Vergleich für Entwickler
								Jun 20, 2025 am	 12:21 AM
								
JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor
							
														

								
									
								
								JavaScript: Datentypen zur effizienten Codierung untersuchen
								Jun 20, 2025 am	 12:46 AM
								
JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf
							
														

								
									
								
								Was sprudelt und f?ngt Ereignis im Dom?
								Jul 02, 2025 am	 01:19 AM
								
Ereigniserfassung und Blase sind zwei Phasen der Ereignisausbreitung in DOM. Die Erfassung erfolgt von der oberen Schicht bis zum Zielelement, und die Blase ist vom Zielelement bis zur oberen Schicht. 1. Die Ereigniserfassung wird implementiert, indem der UseCapture -Parameter von AddEventListener auf true festgelegt wird. 2. Ereignisblase ist das Standardverhalten, Uscapture ist auf false oder weggelassen. 3. Die Ereignisausbreitung kann verwendet werden, um die Ereignisausbreitung zu verhindern. 4. Event Bubbling unterstützt die Ereignisdelegation, um die Effizienz der dynamischen Inhaltsverarbeitung zu verbessern. 5. Capture kann verwendet werden, um Ereignisse im Voraus abzufangen, wie z. B. Protokollierung oder Fehlerverarbeitung. Das Verst?ndnis dieser beiden Phasen hilft dabei, das Timing und die Reaktion von JavaScript auf Benutzeroperationen genau zu steuern.
							
														

								
									
								
								Was ist der Unterschied zwischen Java und JavaScript?
								Jun 17, 2025 am	 09:17 AM
								
Java und JavaScript sind verschiedene Programmiersprachen. 1.Java ist eine statisch typisierte und kompilierte Sprache, die für Unternehmensanwendungen und gro?e Systeme geeignet ist. 2. JavaScript ist ein dynamischer Typ und eine interpretierte Sprache, die haupts?chlich für die Webinteraktion und die Front-End-Entwicklung verwendet wird.
							
													

													
								See all articles
								
							
											
				
					
	
	






		
	
	
	
	
	

	
	









<th id="yiwag"><s id="yiwag"></s></th>
<strike id="yiwag"><menu id="yiwag"></menu></strike>
<tr id="yiwag"></tr>