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






	

    

        

            

                
                    
                
            
            

                

                    社群
                    

                        

                            文章
                            合集
                            問答
                        
                    
                

                

                    學(xué)習(xí)
                    

                        

                            課程
                            程式設(shè)計(jì)字典
                        
                    
                

                

                    工具庫
                    

                        

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

                

                    AI工具
                

                

                    休閒
                    

                        

                            遊戲下載
                            遊戲教程

                        
                    
                
            
        
                    

                
                
            
                

            

                繁體中文
                

                    

                                                簡體中文
                                                English
                                                繁體中文
                                                日本語
                                                ???
                                                Melayu
                                                Fran?ais
                                                Deutsch
                                            
                
            
            
                            

                    Login
                
                

                    singup
                
            
        
    


	
	

		

			

							

					

						首頁
						
												web前端
						
												js教程
						
						模組化邊緣端包含 JavaScript 運(yùn)算元件
					
					
					

						

							
模組化邊緣端包含 JavaScript 運(yùn)算元件
							

								

									
									
									
									

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

					

						

						
						
						

					

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





  
  
  可程式性和模組化


近十年來，F(xiàn)astly 的 CDN 一直支援 Edge Side Includes (ESI)，這是一種模板語言，透過解釋 HTML 原始碼中的特殊標(biāo)籤來運(yùn)作。它圍繞著標(biāo)籤  展開，該標(biāo)籤指示邊緣伺服器取得另一個(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)入場景時(shí)，邊緣景觀主要在兩個(gè)方面發(fā)生了變化：可編程性和模組化。 

在我們對 Rust 的平臺支援穩(wěn)定後不久，我們發(fā)布了一個(gè)實(shí)現(xiàn) ESI 的 Rust 包，並添加了可編程性?，F(xiàn)在您可以使用程式碼配置如何建立其他後端請求以及如何處理回應(yīng)片段。您甚至可以對並非來自後端伺服器的文件執(zhí)行 ESI 處理。這種可編程性將其與我們在 VCL 中提供的 ESI 支援區(qū)分開來，後者僅限於我們提供的固定功能集。 

同時(shí)，這種方法是高度模組化的，使程式設(shè)計(jì)師可以選擇在每個(gè)請求的基礎(chǔ)上執(zhí)行此ESI 處理，並可以選擇將處理與使用相容資料類型的其他模組結(jié)合起來，並應(yīng)用它們按照指定的任何順序和/或邏輯條件。 

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


與我們的 Rust 版本類似，我們希望這個(gè) JavaScript 函式庫是可程式化的。 Fastly 的 JavaScript 支援始終包含 Fetch API 及其配套的 Streams API。 Streams API 的一個(gè)實(shí)用功能是 TransformStream 接口，它允許透過物件「輸送」資料以應(yīng)用轉(zhuǎn)換，這對於 ESI 來說是完美的。透過將 ESI 處理器實(shí)現(xiàn)為 TransformStream 的實(shí)現(xiàn)，我們能夠?qū)⑵渲苯臃湃胗?JavaScript 編寫的快速計(jì)算應(yīng)用程式中。 

您可以透過以下方式進(jìn)行串流：


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



我們將其稱為 EsiTransformStream 的轉(zhuǎn)換直接應(yīng)用於流，從而減輕了記憶體和效能問題。這意味著：


在應(yīng)用轉(zhuǎn)換之前無需緩衝整個(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è)工具。例如，您可能希望對回應(yīng)套用其他轉(zhuǎn)換（例如壓縮），並且可以透過任意數(shù)量的這些轉(zhuǎn)換流傳送回應(yīng)，因?yàn)樗峭耆珮?biāo)準(zhǔn)的介面。  如果您願(yuàn)意，您甚至可以有條件地僅針對某些請求或回應(yīng)啟用 ESI，例如透過請求標(biāo)頭、路徑或回應(yīng)內(nèi)容類型。 

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


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



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


URL用於解析的src中的相對路徑標(biāo)籤。 

在發(fā)出額外請求來取得範(fàn)本時(shí)使用標(biāo)頭。 
可選的配置物件可用於覆寫所進(jìn)行的獲取的行為，並應(yīng)用其他自訂行為，例如如何處理取得的範(fàn)本以及自訂錯(cuò)誤處理。 


在最簡單的情況下，您將僅使用配置物件的取得值。如果您不提供它，那麼它會(huì)使用全域獲取函數(shù)，但在計(jì)算中，您將需要它來指定一個(gè)後端，以供在包含模板時(shí)使用的獲?。ǔ悄褂脛?dòng)態(tài)後端功能）。上面的範(fàn)例片段在呼叫全域取得之前分配名為 origin_0 的後端。 

就是這樣！透過這個(gè)簡單的設(shè)置，您可以擁有一個(gè)服務(wù) ESI 標(biāo)籤的後端和一個(gè)處理它們的計(jì)算應(yīng)用程式。這是您可以運(yùn)行的完整範(fàn)例：



    
      小提琴.fastly.dev
    


  
  
  支援 ESI 功能


此實(shí)作提供了比我們過去提供的其他功能更多的 ESI 功能。 


  
  
  錯(cuò)誤處理


有時(shí)， 引用的文件會(huì)被引用。標(biāo)籤可能由於不存在或?qū)е滤欧麇e(cuò)誤而無法取得。在這些情況下可以透過新增屬性 onerror="continue" 來忽略錯(cuò)誤。 



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



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

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


<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ò)誤。在上面的範(fàn)例中，如果/templates/header.html 導(dǎo)致錯(cuò)誤，那麼這也會(huì)導(dǎo)致文字"Main header" 不會(huì)出現(xiàn)在輸出中；只包含文字「替代標(biāo)題」。有關(guān)更多詳細(xì)信息，請參閱 ESI 語言規(guī)範(fàn)。 

  
  
  條件句


ESI 還允許透過對變數(shù)執(zhí)行運(yùn)行時(shí)檢查來進(jìn)行條件執(zhí)行。以下是此類檢查的範(fàn)例：



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

Content





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

處理器提供一組有限的變量，這些變量主要基於請求 cookie。在上面的範(fàn)例中，檢查名為「group」的 HTTP cookie 的值。我們的實(shí)作是基於ESI語言規(guī)範(fàn)；請參閱它以了解更多詳細(xì)資訊。 

  
  
  支援的標(biāo)籤和功能列表


此實(shí)作支援 ESI 語言規(guī)範(fàn)的以下標(biāo)籤。 


ESI：包括
esi：評論
esi:刪除

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


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

esi:vars


;標(biāo)籤在規(guī)格中定義為可選，且不包含在此實(shí)作中。 
ESI 標(biāo)籤的屬性支援 ESI 變量， 的 test 屬性支援 ESI 表達(dá)式。另外，支持評論。 

  
  
  自訂行為意味著無限的可能性


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

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

我們可以使用特製的 ES??I 標(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)處理器遇到上面的範(fàn)例片段時(shí)，它將發(fā)出類似於以下內(nèi)容的結(jié)果（取決於您未來運(yùn)行它的天數(shù)）：


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

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



由於後端文件可透過 Fastly 進(jìn)行緩存，因此未來的請求可以從快取 HIT 中受益，同時(shí)處理將繼續(xù)顯示更新的相對時(shí)間。 

有關(guān)此範(fàn)例的實(shí)例，請查看以下小提琴：



    
      小提琴.fastly.dev
    





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


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

甚至在建立 Fastly 帳戶之前，就可以開始複製上面的任何一個(gè) Fiddle，並用您自己的來源測試它們。當(dāng)您準(zhǔn)備好在我們的全球網(wǎng)路上發(fā)布服務(wù)時(shí)，您可以註冊 Compute 的免費(fèi)試用版，然後立即開始使用 npm 上的 ESI 庫。 

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


          

            
        
以上是模組化邊緣端包含 JavaScript 運(yùn)算元件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！


						
					
					

						
本網(wǎng)站聲明
						
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)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脫衣器
											
										
																		

											
												
											
											

												
													
Video Face Swap
												
												
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
											
										
																
								

									顯示更多
								
							
						
					


					

						

							

								
								
熱門文章
							
							

															

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

										4 週前
										By DDD
									
								
															

									Oguri Cap Build Guide |漂亮的德比志
									

										2 週前
										By Jack chen
									
								
															

									Agnes Tachyon Build Guide |漂亮的德比志
									

										1 週前
										By Jack chen
									
								
															

									沙丘：覺醒 - 高級行星學(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
												
												
視覺化網(wǎng)頁開發(fā)工具
											
										
																			

											
												
											
											

												
													
SublimeText3 Mac版
												
												
神級程式碼編輯軟體(SublimeText3)
											
										
																	
								

									顯示更多
								
							
						
										

					
					

						

							

								
								
熱門話題
							
							

															

									gmail信箱登陸入口在哪裡
									

										

											
											8636
										
										

											
											17
										
									
								
															

									Java教學(xué)
									

										

											
											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īng)用場景。 Java用於大型企業(yè)和移動(dòng)應(yīng)用開發(fā)，而JavaScript主要用於網(wǎng)頁開發(fā)。
							
														

								
									
								
								JavaScript評論：簡短說明
								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對像有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫；4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫，如Luxon。掌握這些要點(diǎ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.事件捕獲通過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是不同的編程語言。 1.Java是靜態(tài)類型、編譯型語言，適用於企業(yè)應(yīng)用和大型系統(tǒng)。 2.JavaScript是動(dòng)態(tài)類型、解釋型語言，主要用於網(wǎng)頁交互和前端開發(fā)。
							
													

													
								See all articles