两个人看的www免费高清观看,国产freesexvideos中国麻豆

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

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

關鍵要點

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

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

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

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

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

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

安裝 htmx

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

但是，最簡單的方法（本指南中將使用的方法）是通過內(nèi)容交付網(wǎng)絡 (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 發(fā)送 GET 請求，并用服務器的響應替換

標簽的內(nèi)容。

An Introduction to htmx, the HTML-focused Dynamic UI Library

Ajax 請求：htmx 方法

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

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

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

考慮以下內(nèi)容：

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

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

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

使用 htmx 觸發(fā)請求

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

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

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

<??>

要觸發(fā)搜索，我們需要觸發(fā) change 事件。對于 <input> 元素，當元素的值更改后失去焦點時，就會發(fā)生這種情況。因此，在框中鍵入一些內(nèi)容（例如“bar”），單擊頁面上的其他位置，笑話就會出現(xiàn)在 <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>

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

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

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

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

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

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

請求指示器

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

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

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

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

<??>

當單擊具有 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 加載器和微調(diào)器中獲取微調(diào)器的 CSS 樣式。有很多可供選擇；只需單擊一個即可接收 HTML 和 CSS。

這將導致在請求進行中時顯示加載微調(diào)器。

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

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

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

這利用了 htmx 的事件系統(tǒng)，我們可以利用它來修改和增強其行為。在這里，我們使用 htmx:afterOnLoad 事件，該事件在 Ajax onload 完成后觸發(fā)。我還使用了來自 SitePoint 文章中關于同一主題的 sleep 函數(shù)。

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

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

目標元素和內(nèi)容交換

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

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

<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>

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

擴展 CSS 選擇器

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

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

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

內(nèi)容交換

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

htmx 中的 CSS 過渡

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

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

考慮此 HTML 內(nèi)容：

<??>

在對 /new-content 進行 htmx Ajax 請求后，服務器返回以下內(nèi)容：

<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>

盡管內(nèi)容發(fā)生了變化，但 <div> 保持相同的 ID。但是，fadeIn 類已添加到新內(nèi)容中。我們現(xiàn)在可以創(chuàng)建一個 CSS 過渡，該過渡會平滑地從初始狀態(tài)過渡到新狀態(tài)：

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

當 htmx 加載新內(nèi)容時，它會觸發(fā) CSS 過渡，從而創(chuàng)建到更新狀態(tài)的平滑視覺進度。

使用視圖過渡 API

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

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

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

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

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

<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 類應用于我們要對其進行動畫處理的內(nèi)容：

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

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

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

表單驗證

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

例如，當用戶單擊提交時，只有當輸入字段包含有效的電子郵件地址時，才會向 /contact 發(fā)送 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> 將被服務器的響應替換，即使它不是實際觸發(fā)請求的元素。我們還在輸入字段中添加了 hx-post="/contact/email"，這意味著每當此字段模糊時，它都會向 /contact/email 端點發(fā)送 POST 請求。此請求將包含我們字段的值。

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

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

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

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

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

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

<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 事件，該事件在調(diào)用元素的 checkValidity() 方法之前調(diào)用。

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

htmx 還能做什么？

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

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

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

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

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

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