什麼是 htmx 以及它如何簡化我的網站?

Maya Patel included in Programming Web Development Javascript Html

2024-01-22 221 words 2 minutes

Contents

##＃快速鏈接

⭐什麼是 htmx?

⭐如何在簡單的 Web 應用程式中使用 htmx

⭐htmx的優點和缺點

要點

Htmx 是一個創新的 JavaScript 函式庫，旨在透過利用方便的 HTML 屬性來簡化管理 HTTP 請求的過程，從而為使用者提供對這方面常用功能的簡化存取。

透過合併指向內容交付網路 (CDN) 上的腳本託管版本的超鏈接，可以輕鬆地將 htmx 腳本合併到您的 Web 應用程式中。

利用 htmx 可以在應用程式中實現無縫導航功能，例如分頁、表單驗證和即時編輯，而無需編寫任何 JavaScript 程式碼。

最近 Web 開發社群中有關 htmx 的討論引起了人們的興趣，但其真正本質仍然相對簡單。然而，儘管 htmx 很簡單，但它的潛在實用性和影響力已經引起了相當大的關注。

什麼是 htmx?

Htmx 是一個複雜的 JavaScript 框架，專注於一組特定的功能，允許透過 HTML 屬性方便地存取這些功能。下面是一個基本的說明:

 <a href="/about" hx-get="/about">About</a>

提供的程式碼示範了客製化 HTML 屬性的使用，即「hx-get」。點擊時，htmx 庫會促進 AJAX 請求的執行，從而無縫載入目標網頁，而無需完全刷新瀏覽器內容。

除了其主要功能外，HTMX 還包括一項可選功能，使用戶能夠透過指定的介面提交查詢。

我們的創作超越了平凡，達到了非凡的高度。

在所有不涉及點擊或提交的情況下，記下它們很重要。

在傳統的 GET 和 POST 方法之外結合 HTTP 協定方法是增強 Web 應用程式功能和安全性的建議做法。

有些工具能夠更新其中的特定部分或元素，而不是取代整個網頁。

雖然 HTML5 媒體擴充 (HTMX) 支援 CSS 動畫和 WebSocket 等先進技術，但它主要專注於簡化管理 HTTP 請求的過程。

如何在簡單的 Web 應用程式中使用 htmx

HTMX 專注於 Web 應用程式和網站中的特定功能，而不是包含完整應用程式的整體行為。

該庫的一個顯著特徵是其啟動使用的簡單性。用戶可自行選擇下載並安裝副本；但是，由於它缺乏任何外部依賴項，因此透過內容交付網路 (CDN) 添加對腳本的引用就足以啟動:

 <script
  src="https://unpkg.com/[email protected]"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t\+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>

協定無法適應 AJAX 請求。

使用無限滾動的簡單範例

此範例可在我們的 GitHub 儲存庫中下載，該儲存庫提供了一個方便且可存取的位置來取得實施所需的檔案。

無限滾動是 Twitter 等平台普遍採用的策略，旨在促進持續的瀏覽體驗。當人們遍歷列表時，在到達其頂點時，無限滾動會自動檢索其他項目以供無縫閱讀。

為了確定網頁的當前滾動位置並動態更新其內容而無需重新加載整個頁面，必須使用 JavaScript，這正是 htmx 旨在為您完成的任務。

考慮一系列條目的表示，其中每個條目都附有圖像形式的視覺元素:

 <ol>
    <li><img src="http://placekitten.com/420/300" /></li>
    <li><img src="http://placekitten.com/400/320" /></li>
    <li><img src="http://placekitten.com/440/300" /></li>
    <li><img src="http://placekitten.com/420/340" /></li>
    <li><img src="http://placekitten.com/300/200" /></li>
</ol>

考慮這樣一個場景，您擁有多個包含各種主題資訊的文件，例如「feed1.html」、「feed2.html」等。這些文件旨在呈現其各自內容的有限視圖，允許用戶滾動瀏覽它們以獲取更多詳細資訊。

一種替代方法是利用「下一頁」連結在頁面之間導航；然而，實現無限滾動機制也是一個可行的選擇。要實現此目的，只需修改程式碼區塊中的最後一個元素，如下所示:

 <li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li>

結合這四個特徵可以實現列表項目的無限滾動功能。請容許我闡明它們各自的意義:

屬性

價值

意義

—|—|—

hx-觸發

透露

當這個元素第一次出現在螢幕上時…

hx-獲取

feed2.html

事實上，將會傳送一個 HTTP GET 請求來檢索「feed2.html」的內容。

hx-選擇

李

透過採用針對這些特定 HTML 元件的選擇策略來檢索回應中的「」元素。

hx交換

尾聲

…並將它們添加到該元素之後。

值得注意的是，當您瀏覽庫存時，網頁將無縫地重新載入其他資料。這可以透過檢查捲軸並檢查瀏覽器的開發工具進行進一步檢查來驗證。

事實上，值得注意的是，在這個基本網頁配置中，「feed2.html」檔案包含一個包含指向「feed3.html」的「hx-get」屬性的結束元素，類似地，後續迭代會導致指向相應的連結到連續的頁面。另外，值得一提的是，HTMX也貼心地實現了滾動事件的監聽器，以增強使用者體驗。

htmx 的其他潛在用途

對於各種標準交互，例如日常生活中常見的交互，HTMX 是適用且通用的。

透過使用分頁更新內容的過程涉及在使用者與分頁連結互動時載入和替換頁面元素，確保不同頁面之間的無縫導航，同時在網站的所有實例中保持一致的視覺呈現和功能。

提交表單後，建議顯示確認訊息或顯示原始表單的精簡版本。此過程稱為“表單驗證”。

透過利用 ping 回應作為確定其進度狀態的基礎，可以實現進度條值的定期更新。

內嵌編輯的過程涉及使用文字區域輸入欄位取代網頁上的特定 HTML 元素，其中包含被替換元素的內容或值。這允許用戶直接在網頁上下文中編輯和修改內容，而無需離開網頁。

使用標準 JavaScript，可以建立所有這些實例。然而，htmx 大大簡化了這個過程。

htmx 的優點和缺點

##＃好處

HTMX 透過提供一種無需廣泛的 JavaScript 知識即可添加功能的簡化方法，有可能顯著簡化各種 Web 應用程式和網站中的重複任務。此功能對於那些參與前端網頁創建或管理的人員特別有利，因為它減輕了他們精通這種程式語言的需求。

透過通用化過程，HTMX 促進了不同企業之間以及企業之間的統一性。無限滾動的操作在所有頁面中保持一致，無論哪個開發人員引入它。

HTMX 功能的主要重點在於推廣聲明性方法，而不是命令性方法，從而更容易理解和邏輯推理。

##＃缺點

雖然 HTMX 提供了一種在各種場景中繞過 JavaScript 的便利方法，但它並不是解決所有問題的靈丹妙藥。至關重要的是要認識到，在某些情況下需要自訂程式設計來處理特定的業務規則和較低層級的功能。

將 HTMX 用於各種任務意味著它可以處理大部分功能，這反過來又限制了使用者根據其特定要求自訂其行為的程度。雖然在許多情況下這可能被視為有利的妥協，但必須認識到放棄對某些元素的控制是採用此類簡化解決方案所固有的。

HTML 提供了在不明確編寫 JavaScript 的情況下使用 JavaScript 的能力，但是，重要的是要認識到 JavaScript 程式碼在後台秘密運行。人們可能會傾向於在每個超連結上使用「hx-get」屬性，而不是使用傳統的「href」屬性。然而，這種方法建立了對 JavaScript 的依賴；執行腳本的任何失敗都會給使用者留下一個功能失調的連結。為了避免這種困境，強烈建議練習漸進式增強。