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

Welcome to the web site<\/header>\n<\/pre>\n\n\n
輸出
\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
當(dāng)計(jì)算進(jìn)入場(chǎng)景時(shí)，邊緣景觀主要在兩個(gè)方面發(fā)生了變化：可編程性和模塊化。<\/p>\n\n
在我們對(duì) Rust 的平臺(tái)支持穩(wěn)定后不久，我們發(fā)布了一個(gè)實(shí)現(xiàn) ESI 的 Rust 包，并添加了可編程性。您現(xiàn)在可以使用代碼配置如何構(gòu)建其他后端請(qǐng)求以及如何處理響應(yīng)片段。您甚至可以對(duì)并非來(lái)自后端服務(wù)器的文檔執(zhí)行 ESI 處理。這種可編程性將其與我們?cè)?VCL 中提供的 ESI 支持區(qū)分開來(lái)，后者僅限于我們提供的固定功能集。<\/p>\n\n
同時(shí)，這種方法是高度模塊化的，使程序員可以選擇在每個(gè)請(qǐng)求的基礎(chǔ)上執(zhí)行此 ESI 處理，并可以選擇將處理與使用兼容數(shù)據(jù)類型的其他模塊結(jié)合起來(lái)，并應(yīng)用它們按照指定的任何順序和\/或邏輯條件。<\/p>\n
\n  \n  \n  下一個(gè)目標(biāo)：JavaScript\n<\/h2>\n\n
與我們的 Rust 版本類似，我們希望這個(gè) JavaScript 庫(kù)是可編程的。 Fastly 的 JavaScript 支持始終包含 Fetch API 及其配套的 Streams API。 Streams API 的一項(xiàng)有用功能是 TransformStream 接口，它允許通過(guò)對(duì)象“輸送”數(shù)據(jù)以應(yīng)用轉(zhuǎn)換，這對(duì)于 ESI 來(lái)說(shuō)是完美的。通過(guò)將 ESI 處理器實(shí)現(xiàn)為 TransformStream 的實(shí)現(xiàn)，我們能夠?qū)⑵渲苯臃湃胗?JavaScript 編寫的快速計(jì)算應(yīng)用程序中。<\/p>\n\n
您可以通過(guò)以下方式進(jìn)行流式傳輸：
\n<\/p>\n
\n\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
我們將其稱為 EsiTransformStream 的轉(zhuǎn)換直接應(yīng)用于流，從而減輕了內(nèi)存和性能問(wèn)題。這意味著：<\/p>\n\n
\n
在應(yīng)用轉(zhuǎn)換之前無(wú)需緩沖整個(gè)上游響應(yīng)。<\/li>\n
變壓器會(huì)盡快消耗上游響應(yīng)，并處理流中顯示的 ESI 標(biāo)簽。當(dāng)轉(zhuǎn)換器完成處理每個(gè) ESI 標(biāo)簽時(shí)，結(jié)果會(huì)立即發(fā)布到下游，因此我們能夠保留盡可能小的緩沖區(qū)。這允許客戶端在準(zhǔn)備就緒時(shí)接收流式結(jié)果的第一個(gè)字節(jié)，而不必等待它被完全處理。<\/li>\n<\/ul>\n\n
此外，這種設(shè)計(jì)是模塊化的，使 EsiTransformStream 成為您可以與其他東西一起使用的另一個(gè)工具。例如，您可能希望對(duì)響應(yīng)應(yīng)用其他轉(zhuǎn)換（例如壓縮），并且可以通過(guò)任意數(shù)量的這些轉(zhuǎn)換流傳送響應(yīng)，因?yàn)樗峭耆珮?biāo)準(zhǔn)的接口。  如果您愿意，您甚至可以有條件地僅針對(duì)某些請(qǐng)求或響應(yīng)啟用 ESI，例如通過(guò)請(qǐng)求標(biāo)頭、路徑或響應(yīng)內(nèi)容類型。<\/p>\n\n
以下是實(shí)例化 EsiTransformStream 的方法：
\n<\/p>\n
Welcome to the web site<\/header>\n<\/pre>\n\n\n
構(gòu)造函數(shù)接受一個(gè) URL 和一個(gè) Headers 對(duì)象，并且可以選擇接受一些選項(xiàng)作為第三個(gè)參數(shù)。如前所述，ESI 的主要功能是下載附加模板，以包含到結(jié)果流中。遇到 標(biāo)簽使用 fetch 作為檢索模板的底層機(jī)制，這些參數(shù)的主要目的是配置這些 fetch 調(diào)用：<\/include><\/p>\n\n
\n
URL用于解析的src中的相對(duì)路徑標(biāo)簽。<\/include>\n<\/li>\n
在發(fā)出額外請(qǐng)求來(lái)獲取模板時(shí)使用標(biāo)頭。<\/li>\n
可選的配置對(duì)象可用于覆蓋所進(jìn)行的獲取的行為，并應(yīng)用其他自定義行為，例如如何處理獲取的模板以及自定義錯(cuò)誤處理。<\/li>\n<\/ul>\n\n
在最簡(jiǎn)單的情況下，您將僅使用配置對(duì)象的獲取值。如果您不提供它，那么它會(huì)使用全局獲取函數(shù)，但在計(jì)算中，您將需要它來(lái)指定一個(gè)后端，以供在包含模板時(shí)使用的獲?。ǔ悄褂脛?dòng)態(tài)后端功能）。上面的示例片段在調(diào)用全局獲取之前分配名為 origin_0 的后端。<\/p>\n\n
就是這樣！通過(guò)這個(gè)簡(jiǎn)單的設(shè)置，您可以擁有一個(gè)服務(wù) ESI 標(biāo)簽的后端和一個(gè)處理它們的計(jì)算應(yīng)用程序。這是您可以運(yùn)行的完整示例：<\/p>\n\n\n
\n    \n      小提琴.fastly.dev\n    \n<\/div>\n
\n  \n  \n  支持 ESI 功能\n<\/h2>\n\n
此實(shí)現(xiàn)提供了比我們過(guò)去提供的其他功能更多的 ESI 功能。<\/p>\n\n
\n  \n  \n  錯(cuò)誤處理\n<\/h3>\n\n
有時(shí)， 引用的文件會(huì)被引用。標(biāo)簽可能由于不存在或?qū)е路?wù)器錯(cuò)誤而無(wú)法獲取。在這些情況下可以通過(guò)添加屬性 onerror=\"continue\" 來(lái)忽略錯(cuò)誤。
\n<\/include><\/p>\n\n
\n\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
如果 \/templates\/header.html 導(dǎo)致錯(cuò)誤，ESI 處理器會(huì)默默地忽略該錯(cuò)誤并替換整個(gè)  。帶有空字符串的標(biāo)簽。<\/include><\/p>\n\n
還可以通過(guò)使用  來(lái)使用更結(jié)構(gòu)化的錯(cuò)誤處理。塊，看起來(lái)像這樣：
\n<\/try><\/p>\n
Welcome to the web site<\/header>\n<\/pre>\n\n\n
ESI 處理器首先執(zhí)行 的內(nèi)容。如果 esi:include 標(biāo)記導(dǎo)致錯(cuò)誤，則 ESI 處理器會(huì)執(zhí)行 .<\/esi:><\/attempt><\/p> 的內(nèi)容\n\n
需要注意的是，整個(gè)  是塊被整個(gè)  替換。如果成功或  則阻止如果有錯(cuò)誤。在上面的示例中，如果 \/templates\/header.html 導(dǎo)致錯(cuò)誤，那么這也會(huì)導(dǎo)致文本 \"Main header\"<\/em> 不會(huì)出現(xiàn)在輸出中；僅包含文本 “替代標(biāo)題”<\/em>。有關(guān)更多詳細(xì)信息，請(qǐng)參閱 ESI 語(yǔ)言規(guī)范。<\/esi:><\/attempt><\/try><\/p>\n
\n  \n  \n  條件句\n<\/h3>\n\n
ESI 還允許通過(guò)對(duì)變量執(zhí)行運(yùn)行時(shí)檢查來(lái)進(jìn)行條件執(zhí)行。以下是此類檢查的示例：
\n<\/p>\n
\n
Welcome to the web site<\/header>\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
當(dāng)處理器遇到  時(shí)塊，它貫穿 ;塊，檢查其測(cè)試屬性中設(shè)置的表達(dá)式。處理器執(zhí)行第一個(gè) esi:when 塊，其中表達(dá)式的計(jì)算結(jié)果為 true。如果沒(méi)有一個(gè)表達(dá)式的計(jì)算結(jié)果為 true，那么它將選擇執(zhí)行 esi:otherwise 塊（如果提供）。整個(gè)塊被替換為  中的整個(gè)塊?；?esi>執(zhí)行的塊。<\/esi><\/when><\/when><\/choose><\/p>\n\n
處理器提供一組有限的變量，這些變量主要基于請(qǐng)求 cookie。在上面的示例中，檢查名為“group”的 HTTP cookie 的值。我們的實(shí)現(xiàn)是基于ESI語(yǔ)言規(guī)范；請(qǐng)參閱它以了解更多詳細(xì)信息。<\/p>\n
\n  \n  \n  支持的標(biāo)簽和功能列表\n<\/h3>\n\n
此實(shí)現(xiàn)支持 ESI 語(yǔ)言規(guī)范的以下標(biāo)簽。<\/p>\n\n
\n
ESI：包括<\/li>\n
esi：評(píng)論<\/li>\n
esi:刪除<\/li>\n
\nesi：嘗試 \/ esi：嘗試 \/ esi：例外\n<\/li>\n
\nESI:選擇 \/ ESI:何時(shí) \/ ESI:否則\n<\/li>\n
esi:vars<\/li>\n<\/ul>\n\n
;標(biāo)簽在規(guī)范中定義為可選，并且不包含在此實(shí)現(xiàn)中。<\/inline><\/p>\n
ESI 標(biāo)簽的屬性支持 ESI 變量， 的 test 屬性支持 ESI 表達(dá)式。另外，支持評(píng)論。<\/when><\/p>\n
\n  \n  \n  自定義行為意味著無(wú)限的可能性\n<\/h2>\n\n
雖然功能集足以令人興奮，但可編程的真正令人興奮的部分是更多的事情是可能的。引入模板是 ESI 的主要用途，但這絕不是它能做的全部。這是一個(gè)例子。<\/p>\n\n
假設(shè)您在文檔中標(biāo)記了一個(gè)時(shí)間戳，您希望在顯示時(shí)將其表示為相對(duì)日期，例如“2 天前”。執(zhí)行此操作的方法有很多，但為了獲得最佳性能和內(nèi)存影響，最好在流中執(zhí)行查找\/替換。對(duì)此 ESI 庫(kù)進(jìn)行編程實(shí)際上可以作為實(shí)現(xiàn)此目的的一個(gè)不錯(cuò)的選擇。<\/p>\n\n
我們可以使用特制的 ESI 標(biāo)簽定義要在后端文檔中編碼的時(shí)間戳，格式如下：
\n<\/p>\n
\n\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
例如，此代碼片段可以代表太平洋時(shí)間 2024 年 1 月 1 日午夜：
\n<\/p>\n
Welcome to the web site<\/header>\n<\/pre>\n\n\n
現(xiàn)在，設(shè)置 EsiTransformStream 以在看到該 URL 模式時(shí)提供合成替換文檔：
\n<\/p>\n
\n
Welcome to the web site<\/header>\n
\nContent\n<\/main>\n<\/body>\n<\/pre>\n\n\n
現(xiàn)在，當(dāng)處理器遇到上面的示例片段時(shí)，它將發(fā)出類似于以下內(nèi)容的結(jié)果（取決于您未來(lái)運(yùn)行它的天數(shù)）：
\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
由于后端文檔可通過(guò) Fastly 進(jìn)行緩存，因此未來(lái)的請(qǐng)求可以從緩存 HIT 中受益，同時(shí)處理將繼續(xù)顯示更新的相對(duì)時(shí)間。<\/p>\n\n
有關(guān)此示例的實(shí)例，請(qǐng)查看以下小提琴：
\n<\/p>\n
\n    \n      小提琴.fastly.dev\n    \n<\/div>\n\n\n\n
\n  \n  \n  拿它來(lái)旋轉(zhuǎn)一下吧！\n<\/h2>\n\n
@fastly\/esi 現(xiàn)已在 npm 上提供，可以添加到任何 JavaScript 程序中。當(dāng)然，在 Fastly Compute 程序的邊緣使用它，但事實(shí)上，只要您的環(huán)境支持 fetch API，它甚至可以在 Compute 之外工作。完整的源代碼可在 GitHub 上獲取。<\/p>\n\n
甚至在創(chuàng)建 Fastly 帳戶之前，就可以開始克隆上面的任何一個(gè) Fiddle，并用您自己的來(lái)源測(cè)試它們。當(dāng)您準(zhǔn)備好在我們的全球網(wǎng)絡(luò)上發(fā)布服務(wù)時(shí)，您可以注冊(cè) Compute 的免費(fèi)試用版，然后立即開始使用 npm 上的 ESI 庫(kù)。<\/p>\n\n
通過(guò)計(jì)算，邊緣是可編程和模塊化的 - 選擇并組合最適合您的解決方案，甚至構(gòu)建您自己的解決方案。我們并不是唯一能夠?yàn)橛?jì)算提供此類模塊的公司。任何人都可以為生態(tài)系統(tǒng)做出貢獻(xiàn)并從中受益。并且，一如既往，在 Fastly 社區(qū)論壇上與我們見(jiàn)面，讓我們知道您一直在構(gòu)建什么！<\/p>\n\n\n          \n\n            \n        "}	
	






	

    

        

            

                
                    
                
            
            

                

                    社區(qū)
                    

                        

                            文章
                            合集
                            問(wèn)答
                        
                    
                

                

                    學(xué)習(xí)
                    

                        

                            課程
                            編程詞典
                        
                    
                

                

                    工具庫(kù)
                    

                        

                            開發(fā)工具
                            網(wǎng)站源碼
                            PHP 庫(kù)
                            JS特效
                            網(wǎng)站素材
                            擴(kuò)展插件
                        
                    
                

                

                    AI工具
                

                

                    休閑
                    

                        

                            游戲下載
                            游戲教程

                        
                    
                
            
        
                    

                
                
            
                

            

                簡(jiǎn)體中文
                

                    

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

                    Login
                
                

                    singup
                
            
        
    


	
	

		

			

							

					

						首頁(yè)
						
												web前端
						
												js教程
						
						模塊化邊緣端包含 JavaScript 計(jì)算組件
					
					
					

						

							
模塊化邊緣端包含 JavaScript 計(jì)算組件
							

								

									
									
									
									

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

					

						

						
						
						

					

2022 年夏天，我的隊(duì)友 Kailan 為 Fastly Compute 開發(fā)了 Rust 箱，實(shí)現(xiàn)了 Edge Side Includes (ESI) 模板語(yǔ)言的子集，并發(fā)表了一篇關(guān)于它。這篇文章很重要，不僅因?yàn)槲覀儼l(fā)布了一個(gè)有用的庫(kù)，還因?yàn)樗芎玫卣f(shuō)明了計(jì)算可以為我們帶來(lái)什么：具有模塊化功能的可編程邊緣。現(xiàn)在 JavaScript 在 Compute 上普遍可用已有一年多了，我們是時(shí)候?yàn)?JavaScript 用戶提供類似的解決方案了。 Fastly 的 JavaScript ESI 庫(kù)現(xiàn)已在 npm 上提供，允許您向應(yīng)用程序添加強(qiáng)大的 ESI 處理。





  
  
  可編程性和模塊化


近十年來(lái)，F(xiàn)astly 的 CDN 一直支持 Edge Side Includes (ESI)，這是一種模板語(yǔ)言，通過(guò)解釋 HTML 源代碼中的特殊標(biāo)簽來(lái)工作。它圍繞標(biāo)簽  展開，該標(biāo)簽指示邊緣服務(wù)器獲取另一個(gè)文檔并將其內(nèi)聯(lián)到流中。

index.html



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



header.html


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



輸出



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

Content






當(dāng)計(jì)算進(jìn)入場(chǎng)景時(shí)，邊緣景觀主要在兩個(gè)方面發(fā)生了變化：可編程性和模塊化。

在我們對(duì) Rust 的平臺(tái)支持穩(wěn)定后不久，我們發(fā)布了一個(gè)實(shí)現(xiàn) ESI 的 Rust 包，并添加了可編程性。您現(xiàn)在可以使用代碼配置如何構(gòu)建其他后端請(qǐng)求以及如何處理響應(yīng)片段。您甚至可以對(duì)并非來(lái)自后端服務(wù)器的文檔執(zhí)行 ESI 處理。這種可編程性將其與我們?cè)?VCL 中提供的 ESI 支持區(qū)分開來(lái)，后者僅限于我們提供的固定功能集。

同時(shí)，這種方法是高度模塊化的，使程序員可以選擇在每個(gè)請(qǐng)求的基礎(chǔ)上執(zhí)行此 ESI 處理，并可以選擇將處理與使用兼容數(shù)據(jù)類型的其他模塊結(jié)合起來(lái)，并應(yīng)用它們按照指定的任何順序和/或邏輯條件。

  
  
  下一個(gè)目標(biāo)：JavaScript


與我們的 Rust 版本類似，我們希望這個(gè) JavaScript 庫(kù)是可編程的。 Fastly 的 JavaScript 支持始終包含 Fetch API 及其配套的 Streams API。 Streams API 的一項(xiàng)有用功能是 TransformStream 接口，它允許通過(guò)對(duì)象“輸送”數(shù)據(jù)以應(yīng)用轉(zhuǎn)換，這對(duì)于 ESI 來(lái)說(shuō)是完美的。通過(guò)將 ESI 處理器實(shí)現(xiàn)為 TransformStream 的實(shí)現(xiàn)，我們能夠?qū)⑵渲苯臃湃胗?JavaScript 編寫的快速計(jì)算應(yīng)用程序中。

您可以通過(guò)以下方式進(jìn)行流式傳輸：


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



我們將其稱為 EsiTransformStream 的轉(zhuǎn)換直接應(yīng)用于流，從而減輕了內(nèi)存和性能問(wèn)題。這意味著：


在應(yīng)用轉(zhuǎn)換之前無(wú)需緩沖整個(gè)上游響應(yīng)。
變壓器會(huì)盡快消耗上游響應(yīng)，并處理流中顯示的 ESI 標(biāo)簽。當(dāng)轉(zhuǎn)換器完成處理每個(gè) ESI 標(biāo)簽時(shí)，結(jié)果會(huì)立即發(fā)布到下游，因此我們能夠保留盡可能小的緩沖區(qū)。這允許客戶端在準(zhǔn)備就緒時(shí)接收流式結(jié)果的第一個(gè)字節(jié)，而不必等待它被完全處理。


此外，這種設(shè)計(jì)是模塊化的，使 EsiTransformStream 成為您可以與其他東西一起使用的另一個(gè)工具。例如，您可能希望對(duì)響應(yīng)應(yīng)用其他轉(zhuǎn)換（例如壓縮），并且可以通過(guò)任意數(shù)量的這些轉(zhuǎn)換流傳送響應(yīng)，因?yàn)樗峭耆珮?biāo)準(zhǔn)的接口。  如果您愿意，您甚至可以有條件地僅針對(duì)某些請(qǐng)求或響應(yīng)啟用 ESI，例如通過(guò)請(qǐng)求標(biāo)頭、路徑或響應(yīng)內(nèi)容類型。

以下是實(shí)例化 EsiTransformStream 的方法：


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



構(gòu)造函數(shù)接受一個(gè) URL 和一個(gè) Headers 對(duì)象，并且可以選擇接受一些選項(xiàng)作為第三個(gè)參數(shù)。如前所述，ESI 的主要功能是下載附加模板，以包含到結(jié)果流中。遇到 標(biāo)簽使用 fetch 作為檢索模板的底層機(jī)制，這些參數(shù)的主要目的是配置這些 fetch 調(diào)用：


URL用于解析的src中的相對(duì)路徑標(biāo)簽。

在發(fā)出額外請(qǐng)求來(lái)獲取模板時(shí)使用標(biāo)頭。
可選的配置對(duì)象可用于覆蓋所進(jìn)行的獲取的行為，并應(yīng)用其他自定義行為，例如如何處理獲取的模板以及自定義錯(cuò)誤處理。


在最簡(jiǎn)單的情況下，您將僅使用配置對(duì)象的獲取值。如果您不提供它，那么它會(huì)使用全局獲取函數(shù)，但在計(jì)算中，您將需要它來(lái)指定一個(gè)后端，以供在包含模板時(shí)使用的獲取（除非您使用動(dòng)態(tài)后端功能）。上面的示例片段在調(diào)用全局獲取之前分配名為 origin_0 的后端。

就是這樣！通過(guò)這個(gè)簡(jiǎn)單的設(shè)置，您可以擁有一個(gè)服務(wù) ESI 標(biāo)簽的后端和一個(gè)處理它們的計(jì)算應(yīng)用程序。這是您可以運(yùn)行的完整示例：



    
      小提琴.fastly.dev
    


  
  
  支持 ESI 功能


此實(shí)現(xiàn)提供了比我們過(guò)去提供的其他功能更多的 ESI 功能。


  
  
  錯(cuò)誤處理


有時(shí)， 引用的文件會(huì)被引用。標(biāo)簽可能由于不存在或?qū)е路?wù)器錯(cuò)誤而無(wú)法獲取。在這些情況下可以通過(guò)添加屬性 onerror="continue" 來(lái)忽略錯(cuò)誤。



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



如果 /templates/header.html 導(dǎo)致錯(cuò)誤，ESI 處理器會(huì)默默地忽略該錯(cuò)誤并替換整個(gè)  。帶有空字符串的標(biāo)簽。

還可以通過(guò)使用  來(lái)使用更結(jié)構(gòu)化的錯(cuò)誤處理。塊，看起來(lái)像這樣：


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



ESI 處理器首先執(zhí)行 的內(nèi)容。如果 esi:include 標(biāo)記導(dǎo)致錯(cuò)誤，則 ESI 處理器會(huì)執(zhí)行 .
 的內(nèi)容

需要注意的是，整個(gè)  是塊被整個(gè)  替換。如果成功或  則阻止如果有錯(cuò)誤。在上面的示例中，如果 /templates/header.html 導(dǎo)致錯(cuò)誤，那么這也會(huì)導(dǎo)致文本 "Main header" 不會(huì)出現(xiàn)在輸出中；僅包含文本 “替代標(biāo)題”。有關(guān)更多詳細(xì)信息，請(qǐng)參閱 ESI 語(yǔ)言規(guī)范。

  
  
  條件句


ESI 還允許通過(guò)對(duì)變量執(zhí)行運(yùn)行時(shí)檢查來(lái)進(jìn)行條件執(zhí)行。以下是此類檢查的示例：



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

Content





當(dāng)處理器遇到  時(shí)塊，它貫穿 ;塊，檢查其測(cè)試屬性中設(shè)置的表達(dá)式。處理器執(zhí)行第一個(gè) esi:when 塊，其中表達(dá)式的計(jì)算結(jié)果為 true。如果沒(méi)有一個(gè)表達(dá)式的計(jì)算結(jié)果為 true，那么它將選擇執(zhí)行 esi:otherwise 塊（如果提供）。整個(gè)塊被替換為  中的整個(gè)塊?；?esi>執(zhí)行的塊。

處理器提供一組有限的變量，這些變量主要基于請(qǐng)求 cookie。在上面的示例中，檢查名為“group”的 HTTP cookie 的值。我們的實(shí)現(xiàn)是基于ESI語(yǔ)言規(guī)范；請(qǐng)參閱它以了解更多詳細(xì)信息。

  
  
  支持的標(biāo)簽和功能列表


此實(shí)現(xiàn)支持 ESI 語(yǔ)言規(guī)范的以下標(biāo)簽。


ESI：包括
esi：評(píng)論
esi:刪除

esi：嘗試 / esi：嘗試 / esi：例外


ESI:選擇 / ESI:何時(shí) / ESI:否則

esi:vars


;標(biāo)簽在規(guī)范中定義為可選，并且不包含在此實(shí)現(xiàn)中。
ESI 標(biāo)簽的屬性支持 ESI 變量， 的 test 屬性支持 ESI 表達(dá)式。另外，支持評(píng)論。

  
  
  自定義行為意味著無(wú)限的可能性


雖然功能集足以令人興奮，但可編程的真正令人興奮的部分是更多的事情是可能的。引入模板是 ESI 的主要用途，但這絕不是它能做的全部。這是一個(gè)例子。

假設(shè)您在文檔中標(biāo)記了一個(gè)時(shí)間戳，您希望在顯示時(shí)將其表示為相對(duì)日期，例如“2 天前”。執(zhí)行此操作的方法有很多，但為了獲得最佳性能和內(nèi)存影響，最好在流中執(zhí)行查找/替換。對(duì)此 ESI 庫(kù)進(jìn)行編程實(shí)際上可以作為實(shí)現(xiàn)此目的的一個(gè)不錯(cuò)的選擇。

我們可以使用特制的 ESI 標(biāo)簽定義要在后端文檔中編碼的時(shí)間戳，格式如下：


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



例如，此代碼片段可以代表太平洋時(shí)間 2024 年 1 月 1 日午夜：


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



現(xiàn)在，設(shè)置 EsiTransformStream 以在看到該 URL 模式時(shí)提供合成替換文檔：



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

Content





現(xiàn)在，當(dāng)處理器遇到上面的示例片段時(shí)，它將發(fā)出類似于以下內(nèi)容的結(jié)果（取決于您未來(lái)運(yùn)行它的天數(shù)）：


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

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



由于后端文檔可通過(guò) Fastly 進(jìn)行緩存，因此未來(lái)的請(qǐng)求可以從緩存 HIT 中受益，同時(shí)處理將繼續(xù)顯示更新的相對(duì)時(shí)間。

有關(guān)此示例的實(shí)例，請(qǐng)查看以下小提琴：



    
      小提琴.fastly.dev
    





  
  
  拿它來(lái)旋轉(zhuǎn)一下吧！


@fastly/esi 現(xiàn)已在 npm 上提供，可以添加到任何 JavaScript 程序中。當(dāng)然，在 Fastly Compute 程序的邊緣使用它，但事實(shí)上，只要您的環(huán)境支持 fetch API，它甚至可以在 Compute 之外工作。完整的源代碼可在 GitHub 上獲取。

甚至在創(chuàng)建 Fastly 帳戶之前，就可以開始克隆上面的任何一個(gè) Fiddle，并用您自己的來(lái)源測(cè)試它們。當(dāng)您準(zhǔn)備好在我們的全球網(wǎng)絡(luò)上發(fā)布服務(wù)時(shí)，您可以注冊(cè) Compute 的免費(fèi)試用版，然后立即開始使用 npm 上的 ESI 庫(kù)。

通過(guò)計(jì)算，邊緣是可編程和模塊化的 - 選擇并組合最適合您的解決方案，甚至構(gòu)建您自己的解決方案。我們并不是唯一能夠?yàn)橛?jì)算提供此類模塊的公司。任何人都可以為生態(tài)系統(tǒng)做出貢獻(xiàn)并從中受益。并且，一如既往，在 Fastly 社區(qū)論壇上與我們見(jiàn)面，讓我們知道您一直在構(gòu)建什么！


          

            
        
以上是模塊化邊緣端包含 JavaScript 計(jì)算組件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！


						
					
					

						
本站聲明
						
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系admin@php.cn
					
				

				



				



				
    


					


											

							

								

									
									
熱AI工具
								
								

																		

											
												
											
											

												
													
Undress AI Tool
												
												
免費(fèi)脫衣服圖片
											
										
																		

											
												
											
											

												
													
Undresser.AI Undress
												
												
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
											
										
																		

											
												
											
											

												
													
AI Clothes Remover
												
												
用于從照片中去除衣服的在線人工智能工具。
											
										
																		

											
												
											
											

												
													
Clothoff.io
												
												
AI脫衣機(jī)
											
										
																		

											
												
											
											

												
													
Video Face Swap
												
												
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
											
										
																
								

									顯示更多
								
							
						
					


					

						

							

								
								
熱門文章
							
							

															

									指南：恒星刀片保存文件位置/保存文件丟失/不保存
									

										4 周前
										By DDD
									
								
															

									Oguri Cap Build Guide |漂亮的德比志
									

										2 周前
										By Jack chen
									
								
															

									Agnes Tachyon Build Guide |漂亮的德比志
									

										1 周前
										By Jack chen
									
								
															

									沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練
									

										3 周前
										By Jack chen
									
								
															

									約會(huì)一切：德克和哈珀關(guān)系指南
									

										4 周前
										By Jack chen
									
								
														
							

								顯示更多
							
						
					


											

							

								

									
									
熱工具
								
								

																		

											
												
											
											

												
													
記事本++7.3.1
												
												
好用且免費(fèi)的代碼編輯器
											
										
																			

											
												
											
											

												
													
SublimeText3漢化版
												
												
中文版，非常好用
											
										
																			

											
												
											
											

												
													
禪工作室 13.0.1
												
												
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
											
										
																			

											
												
											
											

												
													
Dreamweaver CS6
												
												
視覺(jué)化網(wǎng)頁(yè)開發(fā)工具
											
										
																			

											
												
											
											

												
													
SublimeText3 Mac版
												
												
神級(jí)代碼編輯軟件(SublimeText3)
											
										
																	
								

									顯示更多
								
							
						
										

					
					

						

							

								
								
熱門話題
							
							

															

									gmail郵箱登陸入口在哪里
									

										

											
											8636
										
										

											
											17
										
									
								
															

									Java教程
									

										

											
											1783
										
										

											
											16
										
									
								
															

									CakePHP 教程
									

										

											
											1725
										
										

											
											56
										
									
								
															

									Laravel 教程
									

										

											
											1577
										
										

											
											28
										
									
								
															

									PHP教程
									

										

											
											1440
										
										

											
											31
										
									
								
														
							

								顯示更多
							
						
					
				
			
							

					

						

							Related knowledge
						
						


													

								
									
								
								Java vs. JavaScript：清除混亂
								Jun 20, 2025 am	 12:27 AM
								
Java和JavaScript是不同的編程語(yǔ)言，各自適用于不同的應(yīng)用場(chǎng)景。Java用于大型企業(yè)和移動(dòng)應(yīng)用開發(fā)，而JavaScript主要用于網(wǎng)頁(yè)開發(fā)。
							
														

								
									
								
								JavaScript評(píng)論：簡(jiǎn)短說(shuō)明
								Jun 19, 2025 am	 12:40 AM
								
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
							
														

								
									
								
								如何在JS中與日期和時(shí)間合作？
								Jul 01, 2025 am	 01:27 AM
								
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫(kù)；4.處理時(shí)區(qū)問(wèn)題建議使用支持時(shí)區(qū)的庫(kù)，如Luxon。掌握這些要點(diǎn)能有效避免常見(jiàn)錯(cuò)誤。
							
														

								
									
								
								JavaScript與Java：開發(fā)人員的全面比較
								Jun 20, 2025 am	 12:21 AM
								
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
							
														

								
									
								
								為什么要將標(biāo)簽放在的底部？
								Jul 02, 2025 am	 01:22 AM
								
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
							
														

								
									
								
								JavaScript：探索用于高效編碼的數(shù)據(jù)類型
								Jun 20, 2025 am	 12:46 AM
								
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
							
														

								
									
								
								什么是在DOM中冒泡和捕獲的事件？
								Jul 02, 2025 am	 01:19 AM
								
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。1.事件捕獲通過(guò)addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委托，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用于提前攔截事件，如日志記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助于精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
							
														

								
									
								
								Java和JavaScript有什么區(qū)別？
								Jun 17, 2025 am	 09:17 AM
								
Java和JavaScript是不同的編程語(yǔ)言。1.Java是靜態(tài)類型、編譯型語(yǔ)言，適用于企業(yè)應(yīng)用和大型系統(tǒng)。2.JavaScript是動(dòng)態(tài)類型、解釋型語(yǔ)言，主要用于網(wǎng)頁(yè)交互和前端開發(fā)。
							
													

													
								See all articles