建站
咨詢
售后
建站咨詢
新聞中心
如今，Web 用戶期望得到單頁應(yīng)用（SPA）提供的流暢、動態(tài)的體驗(yàn)。然而，創(chuàng)建 SPA 往往需要使用復(fù)雜的框架，如 React 和 Vue，學(xué)習(xí)和使用起來可能比較困難。這就是htmx的用武之地：一種通過直接在HTML中利用Ajax和CSS過渡效果等功能，為構(gòu)建動態(tài) Web 體驗(yàn)帶來新思路的工具。下面就來看看 htmx 是什么，它有什么強(qiáng)大之處！
htmx 概述
HTMX 允許在不使用 JavaScript 的情況下添加現(xiàn)代瀏覽器功能?？梢灾苯釉?HTML 中使用屬性來訪問 AJAX、CSS 過渡效果、WebSockets 和服務(wù)器推送等功能，以便以超文本的簡單性和強(qiáng)大性構(gòu)建現(xiàn)代用戶界面。
HTMX的設(shè)計(jì)理念是通過解除HTML在前端開發(fā)中的一些限制，使其成為一個(gè)更加完整和強(qiáng)大的超文本工具。通常情況下，在傳統(tǒng)的Web開發(fā)中，只有和
與其他前端框架（如Vue.js和React）不同，HTMX的工作方式是：當(dāng)向服務(wù)器發(fā)送請求時(shí)，服務(wù)器返回完整的HTML響應(yīng)，并更新頁面中的相應(yīng)部分，而不是以JSON格式返回?cái)?shù)據(jù)。這使得HTMX可以與任何服務(wù)器端技術(shù)進(jìn)行集成，因?yàn)閼?yīng)用的邏輯和處理都發(fā)生在后端。這種方式簡化了前端開發(fā)并減少了對JavaScript的依賴。
可以通過如下方式使用npm安裝HTMX：
npm install htmx.orghtmx 使用
HTMX提供了一組屬性，可以直接從 HTM L中進(jìn)行AJAX請求：
- hx-post：發(fā)送一個(gè)POST請求到指定的URL。
- hx-get：發(fā)送一個(gè)GET請求到指定的URL。
- hx-put：發(fā)送一個(gè)PUT請求到指定的URL。
- hx-patch：發(fā)送一個(gè)PATCH請求到指定的URL。
- hx-delete：發(fā)送一個(gè)DELETE請求到指定的URL。
這些屬性都接受一個(gè) URL 作為參數(shù)，用于發(fā)送AJAX請求。因此，每當(dāng)觸發(fā)元素時(shí)，它會向指定的URL發(fā)送指定類型的請求。來看下面的例子：
在上面的例子中，按鈕元素被賦予了hx-get屬性。一旦點(diǎn)擊該按鈕，就會向/api/resource URL發(fā)送一個(gè)GET請求。
那當(dāng)從服務(wù)器返回?cái)?shù)據(jù)時(shí)會發(fā)生什么呢？默認(rèn)情況下，htmx 會將這個(gè)響應(yīng)直接注入到發(fā)起請求的元素中，也就是示例中的按鈕元素。然而，htmx 并不局限于這種行為，它提供了將響應(yīng)數(shù)據(jù)指定為不同元素的目標(biāo)的能力，接下來將深入探討這個(gè)功能。
使用htmx觸發(fā)請求
htmx根據(jù)特定元素上發(fā)生的特定事件來觸發(fā)Ajax請求：
- 對于input、textarea和select元素，觸發(fā)事件是change事件。
- 對于表單元素，觸發(fā)事件是submit事件。
- 對于其他所有元素，觸發(fā)事件是click事件。
下面來看一個(gè)例子：
笑話內(nèi)容
為了觸發(fā)搜索，需要激活change事件。對于元素而言，當(dāng)元素失去焦點(diǎn)且其值已被改變時(shí)就會觸發(fā)change事件。因此，當(dāng)在文本框中輸入一些內(nèi)容，然后點(diǎn)擊頁面上其他地方，一個(gè)笑話就會出現(xiàn)在
元素中。簡而言之，在輸入關(guān)鍵詞后，光標(biāo)離開輸入框，笑話就會自動顯示出來。
這很不錯，但通常用戶希望在輸入時(shí)就看到搜索結(jié)果更新，也就是說，當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，將自動觸發(fā)Ajax請求，并在后臺獲取最新的搜索結(jié)果，并將其更新到頁面上相應(yīng)的位置。因此，用戶不需要手動點(diǎn)擊其他地方以觸發(fā)搜索，而是實(shí)時(shí)地在輸入的同時(shí)獲得更新的搜索結(jié)果。為了實(shí)現(xiàn)這一點(diǎn)，可以給元素添加一個(gè)htmx trigger屬性：
現(xiàn)在結(jié)果會立即更新。但同時(shí)引入了一個(gè)新的問題：現(xiàn)在會在每次輸入時(shí)都進(jìn)行一次API調(diào)用。為了避免這個(gè)問題，可以使用修飾符來改變觸發(fā)器的行為。htmx 提供了以下修飾符選項(xiàng)：
- once：如果希望請求只執(zhí)行一次，可以使用此修飾符。
- changed：此修飾符確保只有在元素的值發(fā)生變化時(shí)才發(fā)出請求。
- delay:<時(shí)間間隔>：此修飾符設(shè)置一個(gè)等待期（如1秒），在此等待期間再次觸發(fā)事件將重新計(jì)時(shí)。
- throttle:<時(shí)間間隔>：使用此修飾符，可以在發(fā)出請求之前設(shè)置一個(gè)等待期（例如1秒）。然而，與delay不同的是，如果在設(shè)定的時(shí)間內(nèi)觸發(fā)了新的事件，則該事件將被忽略，確保請求僅在定義的時(shí)間后觸發(fā)。
- from:
：此修飾符使得可以在特定的元素上監(jiān)聽事件，而不是原始元素。
在這種情況下，delay是我們想要的修飾符：
現(xiàn)在，當(dāng)在輸入框中輸入內(nèi)容時(shí)（嘗試輸入一個(gè)較長的詞，比如"developer"），只有在暫?；蛲瓿奢斎霑r(shí)才會觸發(fā)請求。
笑話內(nèi)容
圖片
正如你所見，這種做法只需要幾行客戶端代碼就可以實(shí)現(xiàn)一個(gè)搜索框模式。
請求指示器
在Web開發(fā)中，當(dāng)用戶執(zhí)行某個(gè)操作并且該操作可能需要一段時(shí)間才能完成（如進(jìn)行網(wǎng)絡(luò)請求），我們通常需要給用戶提供反饋。其中一種常見的反饋方式是使用請求指示器，以可視化的方式提示用戶該操作正在進(jìn)行中。
htmx集成了對請求指示器的支持，讓我們能夠向用戶提供這種反饋。它使用hx-indicator類來指定一個(gè)元素作為請求指示器。具有此類的任何元素的默認(rèn)不透明度為 0，使其在DOM中不可見但存在。
當(dāng)htmx發(fā)起一個(gè)Ajax請求時(shí)，它會在觸發(fā)元素上應(yīng)用htmx-request類。htmx-request類會導(dǎo)致該元素或任何具有htmx-indicator類的子元素的不透明度變?yōu)?1。
例如，下面是一個(gè)具有加載旋轉(zhuǎn)圖標(biāo)作為其請求指示器的元素：
當(dāng)具有hx-get屬性的按鈕被點(diǎn)擊并且請求開始時(shí)，按鈕會自動添加一個(gè)htmx-request類。這個(gè)類可以讓請求指示器（例如加載旋轉(zhuǎn)圖標(biāo)）在按鈕上顯示，當(dāng)請求完成后，這個(gè)類會被移除，請求指示器也會停止顯示。還可以使用htmx-indicator屬性來指示接收htmx-request類的元素（顯示請求指示器的元素）。
笑話內(nèi)容
圖片
定位元素和更新內(nèi)容
在某些情況下，我們可能需要在發(fā)送請求的元素之外更新其他元素。htmx 允許我們hx-target屬性來指定Ajax響應(yīng)應(yīng)該更新的特定元素?？梢酝ㄟ^在hx-target屬性中設(shè)置一個(gè)CSS選擇器來指定要更新的元素。例如有一個(gè)用于發(fā)布新評論的表單，希望將新評論添加到評論列表中，而不是更新表單本身。
當(dāng)用戶點(diǎn)擊按鈕并發(fā)起請求時(shí)，獲取到的響應(yīng)數(shù)據(jù)將會更新顯示在頁面上具有"joke-container"這個(gè)ID的元素內(nèi)部，而不是替換按鈕本身的內(nèi)容。這樣可以實(shí)現(xiàn)在特定位置更新內(nèi)容，而不影響其他部分的效果。
擴(kuò)展CSS選擇器
htmx提供了一些擴(kuò)展的CSS選擇器，用于更高級的元素選擇和內(nèi)容加載：
- this ：指定帶有 hx-target 屬性的元素作為實(shí)際更新目標(biāo)。
- closest ：找到與給定CSS選擇器匹配的最近的祖先元素。
- next 和 previous ：在DOM中查找與給定CSS選擇器匹配的后續(xù)或前置元素。
- find ：查找與給定CSS選擇器匹配的第一個(gè)子元素。
通過使用這些關(guān)鍵字，我們可以更靈活地選擇要更新的元素。例如，在之前的例子中，我們可以使用 hx-target="next p" 來指定更新目標(biāo)元素，而不是使用具體的 ID。這樣可以簡化代碼，并且使得更新更加動態(tài)和通用。
更新內(nèi)容
默認(rèn)情況下，htmx會用Ajax響應(yīng)替換目標(biāo)元素的內(nèi)容。但是，如果希望追加新內(nèi)容而不是替換它，那就可以使用hx-swap屬性。該屬性允許指定新內(nèi)容應(yīng)該如何插入目標(biāo)元素中?？赡艿娜≈蛋╫uterHTML、innerHTML、beforebegin、afterbegin、beforeend和afterend。例如，使用hx-swap="beforeend"會將新內(nèi)容追加到目標(biāo)元素的末尾，這對于新評論的場景非常合適。
CSS 過渡
可以使用CSS過渡效果來使元素在不使用JavaScript的情況下平滑地改變樣式。要實(shí)現(xiàn)這一點(diǎn)，需要在多個(gè)HTTP請求之間保持相同的元素 ID。這樣，當(dāng) htmx 接收到新的內(nèi)容并更新元素時(shí)，它將能夠應(yīng)用CSS過渡效果，使樣式的改變過渡得更加平滑。
初始內(nèi)容
在htmx發(fā)起到/new-content的Ajax請求后，服務(wù)器返回以下內(nèi)容：
新內(nèi)容
盡管內(nèi)容發(fā)生了變化，但是
下面來創(chuàng)建一個(gè) CSS 過渡效果，使元素從初始狀態(tài)平滑過渡到新狀態(tài)：
.fadeIn {
animation: fadeIn 2.5s;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}當(dāng)htmx加載新內(nèi)容時(shí)，它會觸發(fā)CSS過渡效果，從而創(chuàng)建一個(gè)流暢的視覺過渡到更新后的狀態(tài)。
使用 View Transitions API
全新的View Transitions API提供了一種在DOM元素的不同狀態(tài)之間進(jìn)行動畫轉(zhuǎn)換的方式。與涉及元素CSS屬性變化的CSS過渡不同，視圖過渡是用于動畫元素內(nèi)容的變化。
View Transitions API 是一個(gè)正在積極開發(fā)中的全新實(shí)驗(yàn)性功能。該API已經(jīng)在Chrome 111+中實(shí)現(xiàn)，并預(yù)計(jì)將來會有更多的瀏覽器支持它。htmx提供了與View Transitions API一起使用的接口，并在不支持該API的瀏覽器中回退到非過渡機(jī)制。
在 htmx 中，View Transitions API 的使用方法如下：
- 將htmx.config.globalViewTransitions配置變量設(shè)置為true。這將對所有交換使用過渡效果。
- 在hx-swap屬性中使用transition:true選項(xiàng)?？梢允褂肅SS定義和配置視圖過渡效果。
下面是一個(gè)“彈跳”過渡效果的示例，其中舊內(nèi)容彈出，新內(nèi)容彈入：
@keyframes bounce-in {
0% { transform: scale(0.1); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes bounce-out {
0% { transform: scale(1); }
45% { transform: scale(1.3); opacity: 1; }
100% { transform: scale(0); opacity: 0; }
}
.bounce-it {
view-transition-name: bounce-it;
}
::view-transition-old(bounce-it) {
animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) both bounce-out;
}
::view-transition-new(bounce-it) {
animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) both bounce-in;
}在使用htmx時(shí)，可以在hx-swap屬性中添加transition:true選項(xiàng)來啟用過渡效果。然后，可以將bounce-it類添加到想要進(jìn)行動畫處理的內(nèi)容上。
初始動畫內(nèi)容
在這個(gè)例子中，當(dāng)
表單校驗(yàn)
htmx 與 HTML5 Validation API 可以良好的集成，在表單提交時(shí)，htmx會利用瀏覽器原生的驗(yàn)證功能進(jìn)行表單驗(yàn)證。
例如，當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，只有當(dāng)輸入字段包含有效的電子郵件地址時(shí)，才會向/contact發(fā)送POST請求。
值得注意的是，htmx在驗(yàn)證過程中會觸發(fā)一系列事件，可以利用這些事件來添加自己的驗(yàn)證邏輯和錯誤處理方法。例如，如果想要在JavaScript代碼中實(shí)現(xiàn)郵箱檢查，可以這樣做：
form hx-post="/contact">
這里使用了htmx的htmx:validation:validate事件，該事件在調(diào)用元素的checkValidity()方法之前被觸發(fā)。
現(xiàn)在，當(dāng)嘗試提交帶有非gmail.com地址的表單時(shí)，將會看到一樣的錯誤提示。
其他功能
除了上述提到的功能外，htmx 還具有很多其他功能，旨在增強(qiáng)HTML的能力，并為處理Web應(yīng)用中的動態(tài)內(nèi)容更新提供簡單而強(qiáng)大的方式。它的功能不僅限于已經(jīng)介紹的內(nèi)容，還包括一些設(shè)計(jì)用于創(chuàng)建更具交互性和響應(yīng)性的網(wǎng)站的功能，而無需使用復(fù)雜的JavaScript框架。
擴(kuò)展
擴(kuò)展是htmx工具中功能強(qiáng)大的工具。這些可定制的JavaScript組件使我們能夠根據(jù)我們的特定需求進(jìn)一步增強(qiáng)和定制庫的行為。擴(kuò)展包括在請求中啟用JSON編碼、操作HTML元素上類的添加和刪除、調(diào)試元素、支持客戶端模板處理等。有了這些，我們就可以將htmx自定義為更精細(xì)的粒度。
Boosting
htmx的“Boosting”功能允許我們將標(biāo)準(zhǔn)的HTML錨點(diǎn)（即鏈接）和表單轉(zhuǎn)換為Ajax請求。在傳統(tǒng)的Web開發(fā)中，點(diǎn)擊鏈接或提交表單通常會導(dǎo)致整個(gè)頁面刷新。而通過使用htmx的"boosting"功能，這些鏈接和表單將通過Ajax請求來處理，只更新需要更新的部分內(nèi)容，而不需要刷新整個(gè)頁面。這使得網(wǎng)站的加載速度更快，并提供了更流暢的用戶體驗(yàn)。類似的技術(shù)在過去被稱為pjax，現(xiàn)在在htmx中也可以實(shí)現(xiàn)類似的效果。
這個(gè) div 中的錨點(diǎn)標(biāo)簽會發(fā)出一個(gè) Ajax GET 請求到 /blog，并將 HTML 響應(yīng)替換到
標(biāo)簽中。通過利用這個(gè)功能，可以為用戶創(chuàng)建更流暢的導(dǎo)航和表單提交體驗(yàn)，使我們的 Web 應(yīng)用更像單頁面應(yīng)用（SPA）。
歷史記錄管理
htmx 內(nèi)置了對瀏覽器歷史記錄的支持，可以與標(biāo)準(zhǔn)的瀏覽器歷史API對接。這樣，可以將URL添加到瀏覽器導(dǎo)航欄，并將頁面當(dāng)前狀態(tài)存儲在瀏覽器的歷史記錄中，確保"返回"按鈕按照用戶的期望進(jìn)行操作。這樣一來，我們就可以創(chuàng)建出類似于SPA的網(wǎng)頁，能夠在不重新加載整個(gè)頁面的情況下維護(hù)狀態(tài)和處理導(dǎo)航。
與第三方庫一起使用
htmx 可以很容易的與其他庫進(jìn)行集成。它可以無縫地與許多第三方庫進(jìn)行整合，利用它們的事件來觸發(fā)請求。
總結(jié)
htmx是一個(gè)多功能、輕量級且易于使用的工具。它成功地將HTML的簡潔性與通常與復(fù)雜JavaScript庫相關(guān)的動態(tài)功能相結(jié)合，為創(chuàng)建交互式網(wǎng)絡(luò)應(yīng)用程序提供了一個(gè)全新的選擇。
然而，它并不是適用于所有情況的解決方案。對于更復(fù)雜的應(yīng)用，我們可能仍然需要使用JavaScript框架。但是，如果目標(biāo)是創(chuàng)建一個(gè)快速、交互性強(qiáng)且用戶友好的Web應(yīng)用，而又不增加太多復(fù)雜性，那么 htmx 絕對是值得考慮的。
網(wǎng)頁題目：htmx：增強(qiáng)版 HTML 來了！
鏈接地址：http://m.fisionsoft.com.cn/article/dhijjsg.html
