HTMX的簡介，以HTML為中心的動態UI庫

現代網頁用戶期待流暢、動態的單頁應用 (SPA) 體驗。然而，創建 SPA 通常需要 React 和 Angular 等複雜的框架，學習和使用這些框架可能很複雜。 htmx 應運而生——它是一個庫，通過直接在 HTML 中利用 Ajax 和 CSS 過渡等功能，為構建動態網頁體驗提供了新的視角。

本指南將探討 htmx 的功能、它如何簡化動態 Web 開發以及如何利用它的潛力來增強您的 Web 開發流程。

關鍵要點

• htmx 基礎：htmx 通過利用 HTML 來實現動態網頁體驗，降低了通常與 JavaScript 密集型 SPA 相關的複雜性。
• 簡易安裝：htmx 可以通過 CDN 輕鬆集成到項目中，方便快速集成，無需複雜的設置。
• 簡化 Ajax：該庫允許使用特定屬性直接從 HTML 元素發出簡單的 Ajax 請求，增強用戶交互，無需大量的 JavaScript 代碼。
• 動態內容加載：htmx 支持針對特定元素進行內容更新，並提供多種插入新內容的方式，使網頁更具交互性。
• 增強用戶體驗：htmx 內置支持 CSS 過渡和實驗性的視圖過渡 API，允許在更新內容時實現流暢的視覺效果。
• 表單處理和驗證：htmx 與 HTML5 驗證集成，確保表單按預期運行，增強可用性和功能性。

什麼是 htmx？它是如何工作的？

在構建交互式 Web 體驗時，開發人員傳統上有兩種主要選擇，每種都有其自身的權衡。一方面，有多頁應用程序 (MPA)，每次用戶與之交互時都會刷新整個頁面。這種方法確保服務器控制應用程序狀態，客戶端忠實地表示它。但是，完整的頁面重新加載會導致緩慢且笨拙的用戶體驗。

另一方面，單頁應用程序 (SPA) 依賴於在瀏覽器中運行的 JavaScript 來管理應用程序狀態。它們使用 API 調用與服務器通信，API 調用返回數據，通常為 JSON 格式。然後，SPA 使用此數據來更新用戶界面而無需頁面刷新，從而提供更流暢的用戶體驗，有點類似於本機桌面或移動應用程序。但是，這種方法也不是完美的。由於大量的客戶端處理，計算開銷通常更高；初始加載時間可能更慢，因為客戶端必須先下載和解析大型JavaScript 包才能呈現第一頁；設置開發環境通常需要處理複雜的構建工具和工作流程。

htmx 為這兩種極端情況提供了一種折中方案。它提供了 SPA 的用戶體驗優勢——無需完全頁面重新加載——同時保持了 MPA 的服務器端簡單性。在此模型中，服務器不是返回客戶端需要解釋和呈現的數據，而是返回 HTML 片段。然後，htmx 只需替換這些片段即可更新用戶界面。

這種方法通過最大限度地減少客戶端複雜性以及 SPA 常用的大量 JavaScript 依賴性來簡化開發過程。它不需要復雜的設置，並提供流暢且響應迅速的用戶體驗。

安裝 htmx

有多種方法可以將 htmx 包含在您的項目中。您可以直接從項目的 GitHub 頁面下載它，或者如果您使用的是 Node.js，則可以使用命令 npm install htmx.org 通過 npm 安裝它。

但是，最簡單的方法（本指南中將使用的方法）是通過內容交付網絡 (CDN) 包含它。這允許我們在沒有任何設置或安裝過程的情況下開始使用 htmx。只需在您的 HTML 文件中包含以下腳本標籤：

<🎜>

此腳本標籤指向版本 1.9.4，但如果可用較新版本，則可以將“1.9.4”替換為最新版本。

htmx 非常輕量級，最小化和 gzip 版本的重量約為 ~14KB。它沒有依賴項，並且與所有主要瀏覽器兼容，包括 IE11。

將 htmx 添加到您的項目後，您可能需要檢查它是否正常工作。您可以使用以下簡單示例進行測試：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

單擊按鈕後，如果 htmx 正常工作，它將向 Joke API 發送 GET 請求，並用服務器的響應替換

標籤的內容。

Ajax 請求：htmx 方法

htmx 的主要賣點之一是它使開發人員能夠通過利用一組不同的屬性直接從 HTML 元素發送 Ajax 請求。每個屬性代表不同的 HTTP 請求方法：

• hx-get：向指定的 URL 發出 GET 請求。
• hx-post：向指定的 URL 發出 POST 請求。
• hx-put：向指定的 URL 發出 PUT 請求。
• hx-patch：向指定的 URL 發出 PATCH 請求。
• hx-delete：向指定的 URL 發出 DELETE 請求。

這些屬性接受一個 URL，它們將向該 URL 發送 Ajax 請求。默認情況下，Ajax 請求是由 HTML 元素的“自然”事件觸發的（例如，在按鈕的情況下為單擊事件，或在輸入字段的情況下為更改事件）。

考慮以下內容：

<button hx-get="/api/resource">Load Data</button>

在上面的示例中，按鈕元素被分配了一個 hx-get 屬性。單擊按鈕後，將向 /api/resource URL 發出 GET 請求。

服務器返回數據後會發生什麼？默認情況下，htmx 將直接將此響應注入到啟動元素中——在我們的示例中，是按鈕。但是，htmx 不限於此行為，並提供將響應數據指定為目標元素的功能。我們將在接下來的部分中更深入地探討此功能。

使用 htmx 觸發請求

htmx 會響應特定元素上發生的特定事件來啟動 Ajax 請求：

• 對於 input、textarea 和 select 元素，這是 change 事件。
• 對於表單元素，這是 submit 事件。
• 對於所有其他元素，這是 click 事件。

讓我們通過擴展上面的笑話示例來演示這一點，允許用戶搜索包含特定單詞的笑話：

<🎜>

要觸發搜索，我們需要觸發 change 事件。對於 <input> 元素，當元素的值更改後失去焦點時，就會發生這種情況。因此，在框中鍵入一些內容（例如“bar”），單擊頁面上的其他位置，笑話就會出現在 <div> 元素中。這很好，但通常用戶希望在鍵入時更新其搜索結果。為此，我們可以向我們的 <input> 元素添加 htmx trigger 屬性：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

現在結果會立即更新。這很好，但它引入了一個新問題：我們現在正在使用每次按鍵都進行 API 調用。為了避免這種情況，我們可以使用修飾符來更改觸發器的行為。 htmx 提供以下內容：

• once：如果您只想執行一次請求，請使用此修飾符。
• changed：此修飾符確保僅在元素的值已更改時才發出請求。
• delay:：此修飾符在發出請求之前設置等待時間（例如 1 秒）。如果在此等待期間再次觸發事件，則倒計時將重置。
• throttle:：使用此修飾符，您也可以在發出請求之前設置等待時間（例如 1 秒）。但是，與 delay 不同，如果在設定的時間內觸發了新的事件，則該事件將被忽略，確保僅在定義的時間段後才觸發請求。
• from:：此修飾符允許您偵聽不同元素上的事件，而不是原始元素。

在這種情況下，我們似乎需要 delay：

<button hx-get="/api/resource">Load Data</button>

現在，當您在框中鍵入內容（嘗試使用較長的單詞，例如“developer”）時，只有在您暫停或完成鍵入時才會觸發請求。

正如您所看到的，這允許我們僅用幾行客戶端代碼來實現活動搜索框模式。

請求指示器

在 Web 開發中，用戶反饋至關重要，尤其是在可能需要花費大量時間才能完成的操作（例如發出網絡請求）方面。提供此反饋的一種常見方法是通過請求指示器——指示操作正在進行中的視覺提示。

htmx 集成了對請求指示器的支持，允許我們向用戶提供此反饋。它使用 hx-indicator 類來指定用作請求指示器的元素。任何具有此類的元素的不透明度默認為 0，使其不可見但存在於 DOM 中。

當 htmx 發出 Ajax 請求時，它會將 htmx-request 類應用於啟動元素。 htmx-request 類將導致該元素（或任何具有 htmx-indicator 類的子元素）過渡到不透明度為 1。

例如，考慮一個使用加載微調器作為其請求指示器的元素：

<🎜>

當單擊具有 hx-get 屬性的按鈕並啟動請求時，按鈕將接收 htmx-request 類。這會導致顯示圖像，直到請求完成並刪除該類。

也可以使用 htmx-indicator 屬性來指示哪個元素應該接收 htmx-request 類。

讓我們用我們的 Joke API 示例來演示這一點：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

注意：我們可以從 CSS 加載器和微調器中獲取微調器的 CSS 樣式。有很多可供選擇；只需單擊一個即可接收 HTML 和 CSS。

這將導致在請求進行中時顯示加載微調器。

如果我們的網絡速度很快，則在發出請求時微調器只會短暫閃爍。如果我們想確保它確實存在，我們可以使用瀏覽器的開發工具來限制我們的網絡連接速度。

或者，僅僅是為了好玩（也就是說，不要在真實的應用程序中這樣做），我們可以配置 htmx 來模擬一些網絡延遲：

<button hx-get="/api/resource">Load Data</button>

這利用了 htmx 的事件系統，我們可以利用它來修改和增強其行為。在這裡，我們使用 htmx:afterOnLoad 事件，該事件在 Ajax onload 完成後觸發。我還使用了來自 SitePoint 文章中關於同一主題的 sleep 函數。

這是完成的演示。在框中鍵入一些內容（例如“JavaScript”），然後在啟動請求後觀察加載指示器。

正如您所看到的，這允許我們僅用幾行客戶端代碼來實現活動搜索框模式。

目標元素和內容交換

在某些情況下，我們可能希望更新與啟動請求的元素不同的元素。 htmx 允許我們使用 hx-target 屬性來定位特定元素以進行 Ajax 響應。此屬性可以採用 CSS 選擇器，htmx 將使用它來查找要更新的元素。例如，如果我們有一個將新評論發佈到我們博客的表單，我們可能希望將新評論附加到評論列表，而不是更新表單本身。

我們實際上在第一個示例中看到了這一點：

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

按鈕不會替換它自己的內容，而是 hx-target 屬性聲明響應應該替換 ID 為“joke-container”的元素的內容。

擴展 CSS 選擇器

htmx 還提供了一些更高級的方法來選擇應將內容加載到的元素。這些包括 this、closest、next、previous 和 find。

• this 關鍵字指定具有 hx-target 屬性的元素是實際目標。
• closest 關鍵字查找與給定 CSS 選擇器匹配的源元素的最近祖先。
• next 和 previous 關鍵字查找 DOM 中與給定 CSS 選擇器匹配的後續或前序元素。
• find 關鍵字查找與給定 CSS 選擇器匹配的第一個子元素。

參考我們之前的示例，我們還可以編寫 hx-target="next p" 來避免指定 ID。

內容交換

默認情況下，htmx 將使用 Ajax 響應替換目標元素的內容。但是，如果我們想附加新內容而不是替換它呢？這就是 hx-swap 屬性的用武之地。此屬性允許我們指定如何將新內容插入到目標元素中。可能的值是 outerHTML、innerHTML、beforebegin、afterbegin、beforeend 和 afterend。例如，使用 hx-swap="beforeend" 將在新內容添加到目標元素的末尾，這對於我們的新評論場景來說非常完美。

htmx 中的 CSS 過渡

CSS 過渡允許元素的樣式從一種狀態平滑地更改為另一種狀態，無需使用 JavaScript。這些過渡可以像顏色更改一樣簡單，也可以像完整的 3D 變換一樣複雜。

htmx 使在我們的代碼中使用 CSS 過渡變得很容易：我們只需要在 HTTP 請求中保持一致的元素 ID。

考慮此 HTML 內容：

<🎜>

在對 /new-content 進行 htmx Ajax 請求後，服務器返回以下內容：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

儘管內容髮生了變化，但 <div> 保持相同的 ID。但是，fadeIn 類已添加到新內容中。我們現在可以創建一個 CSS 過渡，該過渡會平滑地從初始狀態過渡到新狀態：

<button hx-get="/api/resource">Load Data</button>

當 htmx 加載新內容時，它會觸發 CSS 過渡，從而創建到更新狀態的平滑視覺進度。

使用視圖過渡 API

新的視圖過渡 API 提供了一種在 DOM 元素的不同狀態之間進行動畫的方法。與 CSS 過渡（涉及更改元素的 CSS 屬性）不同，視圖過渡是關於對元素的內容進行動畫。

視圖過渡 API 是一項新的實驗性功能，目前正在積極開發中。在撰寫本文時，此 API 已在 Chrome 111 中實現，預計更多瀏覽器將在未來添加支持（您可以在 caniuse 上檢查其支持情況）。 htmx 提供了一個用於使用視圖過渡 API 的接口，並在不支持 API 的瀏覽器中回退到非過渡機制。

在 htmx 中，有兩種使用視圖過渡 API 的方法：

• 將 htmx.config.globalViewTransitions 配置變量設置為 true。這將對所有交換使用過渡。
• 在 hx-swap 屬性中使用 transition:true 選項。

可以使用 CSS 定義和配置視圖過渡。這是一個“彈跳”過渡的示例，其中舊內容彈跳出來，新內容彈跳進來：

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

在 htmx 代碼中，我們在 hx-swap 屬性中使用 transition:true 選項，並將 bounce-it 類應用於我們要對其進行動畫處理的內容：

...
hx-trigger="keyup"
...

在此示例中，當 <div> 的內容更新時，舊內容將彈跳出來，新內容將彈跳進來，從而產生令人愉悅且引人入勝的視覺效果。

請記住，目前，此演示僅適用於基於 Chromium 的瀏覽器。

表單驗證

htmx 與 HTML5 驗證 API 很好地集成，如果用戶輸入驗證失敗，它將阻止發送表單請求。

例如，當用戶單擊提交時，只有當輸入字段包含有效的電子郵件地址時，才會向 /contact 發送 POST 請求：

<🎜>

如果我們想更進一步，我們可以添加一些服務器端驗證以確保只接受 gmail.com 地址：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

在這裡，我們添加了一個父元素（div#wrapper），它將自身聲明為請求的接收者（使用 this 關鍵字）並使用 outerHTML 交換策略。這意味著整個 <div> 將被服務器的響應替換，即使它不是實際觸發請求的元素。我們還在輸入字段中添加了 hx-post="/contact/email"，這意味著每當此字段模糊時，它都會向 /contact/email 端點發送 POST 請求。此請求將包含我們字段的值。

在服務器端（在 /contact/email），我們可以使用 PHP 進行驗證：

<button hx-get="/api/resource">Load Data</button>

如您所見，htmx 期望服務器返回 HTML（不是 JSON），然後將其插入到頁面中指定的位置。

如果我們運行上面的代碼，在輸入中鍵入非 gmail.com 地址，然後使輸入失去焦點，則會在字段下方出現一條錯誤消息，指出“Only Gmail addresses accepted！”

注意：當動態地將內容插入 DOM 時，我們還應該考慮屏幕閱讀器如何解釋此內容。在上面的示例中，錯誤消息位於我們的標籤內，因此屏幕閱讀器將在字段下次獲得焦點時讀取它。如果錯誤消息插入到其他位置，我們應該使用 aria-describedby 屬性將其與正確的字段關聯起來。

還值得注意的是，htmx 在驗證過程中會觸發一組事件，我們可以使用這些事件來添加我們自己的驗證邏輯和錯誤處理方法。例如，如果我們想在 JavaScript 代碼中實現電子郵件檢查，我們可以這樣做：

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

在這裡，我們使用 htmx 的 htmx:validation:validate 事件，該事件在調用元素的 checkValidity() 方法之前調用。

現在，當我們嘗試使用非 gmail.com 地址提交表單時，我們將看到相同的錯誤消息。

htmx 還能做什麼？

htmx 是一個多功能、輕量級且易於使用的工具。它成功地將 HTML 的簡單性與通常與復雜的 JavaScript 庫相關的動態功能相結合，為創建交互式 Web 應用程序提供了一個引人注目的替代方案。

但是，它不是一個萬能的解決方案。對於更複雜的應用程序，您可能仍然需要 JavaScript 框架。但是，如果您的目標是創建快速、交互式和用戶友好的 Web 應用程序而無需添加太多複雜性，那麼 htmx 絕對值得考慮。

隨著 Web 開發的不斷發展，htmx 等工具為構建更好的用戶體驗提供了令人興奮的新方法。為什麼不在未來的項目中嘗試一下，看看 htmx 能為您做什麼呢？

關於 HTMX 的常見問題解答 (FAQ)

什麼是 HTMX，它與其他 UI 設計工具有何不同？

HTMX 是一個現代的、輕量級的 HTML 擴展，用於 AJAX、CSS 過渡、WebSockets 和服務器發送事件。它允許您直接從 HTML 訪問現代瀏覽器功能，而無需 JavaScript 或 JQuery。這使其與其他 UI 設計工具不同，後者通常嚴重依賴 JavaScript。 HTMX 易於與任何後端集成，並且不需要您重寫現有代碼。它是增強用戶界面的強大工具，同時保持代碼簡潔且易於維護。

如何開始使用 HTMX？

開始使用 HTMX 非常簡單。您只需在 HTML 文件中包含 HTMX 腳本即可。完成此操作後，您可以開始在 HTML 標籤中使用 HTMX 屬性來啟用 AJAX、WebSockets 和其他功能。 HTMX 網站提供全面的指南和示例，以幫助您入門。

HTMX 可以與任何後端一起使用嗎？

是的，HTMX 的主要優勢之一就是它與後端無關的特性。它可以與任何服務器端語言或框架一起使用。這使其成為在不同環境中工作的開發人員的通用工具。

HTMX 的一些常見用例是什麼？

HTMX 可用於各種場景，在這些場景中，您希望增強用戶界面而無需依賴 JavaScript。這包括表單提交、實時搜索、無限滾動、實時更新等等。它是創建動態、交互式 Web 應用程序的強大工具。

HTMX 如何處理 CSS 過渡？

HTMX 內置支持 CSS 過渡。您可以使用“hx-swap”屬性來指定在發出請求時元素應如何交換進出。這允許您創建流暢、視覺上吸引人的過渡，而無需編寫任何 JavaScript。

HTMX 與所有瀏覽器兼容嗎？

HTMX 旨在與所有現代瀏覽器兼容。但是，因為它使用了一些較新的瀏覽器功能，所以在較舊或不太常見的瀏覽器中可能無法完美運行。始終建議在用戶可能使用的瀏覽器中測試您的應用程序。

HTMX 如何提高 Web 應用程序的性能？

通過允許您直接從 HTML 訪問現代瀏覽器功能，HTMX 可以大大減少您需要編寫的 JavaScript 量。這可以導致更快的加載時間和更高的性能，尤其是在移動設備上，JavaScript 在移動設備上可能特別慢。

我可以將 HTMX 與我現有的 HTML 和 CSS 一起使用嗎？

是的，HTMX 旨在與您現有的 HTML 和 CSS 一起使用。您無需重寫代碼或學習新的語言即可開始使用 HTMX。這使其成為增強現有應用程序的絕佳選擇。

HTMX 提供哪種類型的支持？

HTMX 是一個開源項目，並且有一個充滿活力的開發人員社區使用和貢獻它。您可以在 HTMX 網站、GitHub 和各種在線論壇上找到幫助和建議。

如何為 HTMX 項目做出貢獻？

作為一個開源項目，HTMX 歡迎社區的貢獻。您可以通過多種方式做出貢獻，從報告錯誤和建議新功能到編寫代碼和改進文檔。查看 HTMX GitHub 頁面，了解如何參與。

以上是HTMX的簡介，以HTML為中心的動態UI庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！