在瞬息萬變的網站開發領域，開發人員不斷尋找能夠提升使用者體驗、簡化網站互動的工具和技術。 HTMX 庫就是這樣一種現代而有效的工具，它提供了一種創新的方法，可以更快、更流暢地進行網站開發。
最近，Web 開發社群對 HTML5 的討論非常熱烈，但這項令人興奮的新技術究竟是什麼呢？其實它比你想像的要簡單得多，但 HTML5 的優勢或許足以證明它的熱度。
在此背景下，我們的新文章探討如何使用 HTMX 來簡化和提升網站效能。我們將探討這項技術的功能，以及它如何更好地促進用戶與網站的互動。我們將介紹 HTMX 的適用場景，以及開發者如何最大限度地利用其功能來提升網站的互動性。查看 使用創新有效的 HTML 元素來改善 Web 開發：提陞技能的技巧.
快速連結
什麼是 htmx？
htmx 是一個小型的、功能明確的 JavaScript 函式庫。它透過 HTML 屬性提供常用的 JavaScript 函數。以下是一個簡單的範例：
<A HREF=“/關於” hx-獲得=“/關於”>關於我們此程式碼顯示屬性 HTML 專用，hx - 獲得如果點擊此鏈接，htmx 庫將發送請求。 AJAX的 並且無需完全刷新瀏覽器即可載入目標頁面。
htmx 具有允許您傳送要求的附加功能：
- 來自其他元素 a و 形成.
- 在點擊和提交以外的事件中。
- 使用非 HTTP 方法 GET و 解決方案&帖子.
- 這會替換頁面的任何部分，而不僅僅是整個頁面。
雖然 htmx 支援 CSS 動畫和 WebSockets 等技術，但其主要目的是簡化 HTTP 請求的處理。
如何在簡單的 Web 應用程式中使用 htmx？
htmx 處理 Web 應用程式或網站內的特定功能，而不是整個應用程式的行為。
該庫的一大優勢在於它非常容易上手。您可以根據需要下載並安裝副本，但由於它沒有依賴項，因此您只需在 CDN 上新增腳本連結即可開始使用：
<腳本SRC=https://unpkg.com/[email protected]"氣節="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"跨域=“匿名的”></腳本>對於本地開發和測試，您將需要： 設定 Web 伺服器如果您尚未運行伺服器，則需要像 Apache 這樣的伺服器。即使您只是測試靜態文件，這也是必需的，因為 file: 協定不允許 AJAX 請求。
使用無限滾動的簡單範例
備註： 您可以從以下位置下載這個簡單範例： GitHub 儲存庫 他自己。
無限滾動是 Twitter 等網站在其資訊流中常用的技術。當你到達列表底部時，無限滾動會加載更多內容供你繼續閱讀。
此功能自然需要 JavaScript 檢查頁面滾動位置並在不刷新頁面的情況下載入新元素。但 htmx 可以為您完成所有這些工作。
使用以下標籤來表示貼文列表，每個貼文使用一張圖片：
<ol><li><IMGSRC=“http://placekitten.com/420/300” /></li><li><IMGSRC=“http://placekitten.com/400/320” /></li><li><IMGSRC=“http://placekitten.com/440/300” /></li><li><IMGSRC=“http://placekitten.com/420/340” /></li><li><IMGSRC=“http://placekitten.com/300/200” /></li></ol>假設您在 Feed1.html 檔案中擁有這些元素，在 Feed2.html 檔案中擁有更多元素，依此類推。那麼每個頁面都會顯示一小部分元素，您可以捲動瀏覽：
現在，您可以使用「下一頁」連結在各個頁面之間導航，但您也可以輕鬆實現無限滾動。只需將最後一個元素更改為：
<lihx-觸發器=“揭露”hx-get=“feed2.html”hx-選擇=“裡”hx-swap=之後><IMGSRC=“http://placekitten.com/300/200” /></li>將這四個屬性新增到最後一個清單項目可實現無限滾動。每個屬性的意義如下：
| 屬性 | 價值 | 意義 |
|---|---|---|
| hx-觸發器 | 發現 | 當該項目首次出現在螢幕上時… |
| hx-get | feed2.html | ...發送請求 GET 對於 Feed2.html，... |
| hx-選擇 | li | …選擇項目 li 從回應來看，… |
| hx-swap | 之後 | ...並將其添加到此項目之後。 |
向下捲動清單時，請注意頁面如何自動載入新內容。您可以透過監視捲軸並檢查瀏覽器的開發者工具來確認這一點：
請注意，在這個簡單的靜態頁面設定中，Feed2.html 頁麵包含一個 final 元素，該元素的 hx-get 屬性設定為 Feed3.html，依此類推。另外，請注意 htmx 庫如何新增了一個懸停事件監聽器。請查看 如何停止特定網站的無限滾動.
htmx 的其他可能用途
您可以使用 htmx 進行許多其他常見交互，包括：
- 分頁：當訪客點擊分頁連結時載入並替換元素。
- 表單驗證提交時，用確認訊息或表單的子集取代表單。
- 進度條：根據ping回應定期更新進度條值。
- 內嵌編輯:用包含該元素值的文字區域替換元素。
每個範例都可以使用以下方式創建 標準 JavaScript但 htmx 讓這個過程變得容易得多。
htmx的優點和缺點
可獲得的益處
HTML 可以大幅簡化常見的交互，讓許多 Web 應用程序，甚至許多網站受益。它允許設計師和其他前端網頁開發人員無需學習 JavaScript 即可添加功能。
透過總結常見行為，htmx 可確保專案之間以及專案之間的一致性。無論由誰實現，無限滾動在各個頁面上的行為都相同。
因為它強調聲明式方法（什麼）而不是命令式方法（如何），所以 htmx 功能通常更容易理解和推理。
可能遇到的缺點
雖然 HTML5 可以讓你在許多情況下忘記 JavaScript，但它並不能幫你解決所有問題！你仍然需要編寫程式碼來處理特定的業務邏輯和更多底層功能。
由於 HTMX 為您完成了大部分工作，因此行為客製化的可能性較小。這通常是一個積極的權衡，但您必須做好放棄控制權的準備。
HTML 或許可以讓你避免寫 JavaScript，但你還是應該意識到 JavaScript 程式碼在後台運行。你可能想要在每個連結上使用 hx-get 屬性，而不是 href 屬性。然而，這會引入對 JavaScript 的依賴；如果程式碼因任何原因運行失敗，你的連結將無法為使用者提供任何功能。你應該始終進行漸進式優化，以避免這種情況發生。現在你可以查看 JavaScript 是什麼？它是如何運作的？一些程式碼.
