pjax是什么以及為什么要推薦給大家看完馬上就懂

JAX的實現(xiàn)與應(yīng)用

1.場景再現(xiàn)-ajax弊端

ajax是一個非常好玩的小東西，不過用起來也會存在一些問題。

我們可以利用ajax進行無刷新改變文檔內(nèi)容，但是沒辦法去修改URL，有童鞋要問，這里為什么一定要修改URL呢？一個URL代表一個特定的網(wǎng)絡(luò)資源，ajax修改了頁面的內(nèi)容，所以用不同的URL去標(biāo)識他們，這個還是挺有必要的。

比如我們設(shè)計了一個單詞查詢的頁面，比較合理的UR應(yīng)該是http://example.com/word，不同的word對應(yīng)不同的內(nèi)容，但是如果整個頁面都是ajax實現(xiàn)，我們就沒法去修改/word了，當(dāng)然我們可以使用hash如http://example.com#word，但這樣就不能很好的處理瀏覽器的前進和后退問題。如：在頁面中查詢了單詞A的翻譯，接著又查詢了單詞B，這個時候瀏覽器的瀏覽歷史會生成http://example.com#A和http://example.com#B兩個記錄，可是當(dāng)我們從B轉(zhuǎn)回A的時候，AJAX的效果還停留在B的狀態(tài)（頁面顯示的還是單詞B的翻譯）。部分瀏覽器對此問題引入了onhashchange的接口，只要URL的hash值發(fā)生變化，我們的程序就可以監(jiān)聽并做出相應(yīng)。不過對于那些木有這個接口的瀏覽器，就得定時去判斷hash的變化了。

而這樣的方式對搜索引擎是十分不友好的，twitter和google約定使用hash bang (#!xxx)，也就是hash后面的第一個字符為感嘆號，這樣的網(wǎng)址他們是會爬取的，但是其他搜索引擎不支持。PJAX可以在改變頁面內(nèi)容的同時也改變他的URL，下面來說說PJAX和他的應(yīng)用。

2.什么是PJAX

history API中有幾個新特性，分別是history.pushState和history.replaceState，我們把pushState+AJAX進行封裝，合起來簡單點叫，就是PJAX~ 雖說實現(xiàn)技術(shù)上沒什么新東西，但是概念上還是有所不同的。

PJAX的基本思路是，用戶點擊一個鏈接，通過ajax更新頁面變化的部分，然后使用HTML5的pushState修改瀏覽器的URL地址，這樣有效地避免了整個頁面的重新加載。如果瀏覽器不支持history的兩個新API或者JS被禁用了，那這個鏈接就只能跳轉(zhuǎn)并重新刷新整個頁面了。和傳統(tǒng)的ajax設(shè)計稍微不同，ajax通常是從后臺獲取JSON數(shù)據(jù)，然后由前端解析渲染，而PJAX請求的是一個在服務(wù)器上生成好的HTML碎片，如下圖所示：

客戶端向服務(wù)器發(fā)送一個普通的請求（1），其實也就是點擊了一個鏈接，服務(wù)器會相應(yīng)這個請求（2），返回一個html文檔。客戶端向服務(wù)器發(fā)送一個有PJAX標(biāo)志的請求（3），此時服務(wù)器只返回一個html碎片（4）。但是這兩次請求都讓客戶端的URL變化了，希望上面的說明可以讓你明白了PAJX和AJAX的區(qū)別了。

3.PJAX的實現(xiàn)

先看一個小DEMO吧，這個DEMO也寫了我半個多小時，看之前先說明一下，打開你的現(xiàn)代瀏覽器（chrome，F(xiàn)irefox，opera，IE9+等），進入gallery頁面，查看圖片的時候注意觀察瀏覽器的title和url變化，點擊前進后退按鈕也注意查看其變化。我已經(jīng)在瀏覽歷史管理中push了三條歷史記錄。

DEMO地址：http://qianduannotes.duapp.com/demo/PJAX/index.html

如果你還沒有理解上面說的PJAX和AJAX的區(qū)別，看完這個demo，你應(yīng)該有所領(lǐng)悟吧！在URL變化之后，頁面并沒有刷新，而是繼續(xù)完成自己的動畫（demo中為fadeOut）。

在HTML4，Histroy對象有下面屬性方法：

length：歷史堆棧中的記錄數(shù)。
back()：返回上一頁。
forward()：前進到下一頁。
go([delta])：delta是個數(shù)字，如果不寫或為0，則刷新本頁；如果為正數(shù)，則前進到相應(yīng)數(shù)目的頁面；若為負數(shù)，則后退到相應(yīng)數(shù)目的頁面。

在HTML5中，新增了兩個方法：

pushState(data, title [, url])：往歷史堆棧的頂部添加一條記錄。data為一個對象或null，它會在觸發(fā)window的popstate事件（window.onpopstate）時，作為參數(shù)的state屬性傳遞過去；title為頁面的標(biāo)題，但當(dāng)前所有瀏覽器都忽略這個參數(shù)；url為頁面的URL，不寫則為當(dāng)前頁。
replaceState(data, title [, url])：更改當(dāng)前頁面的歷史記錄。參數(shù)同上。這種更改并不會去訪問該URL。

當(dāng)點擊“上一張”、“下一張”這兩個鏈接的時候，首先通過pushState修改URL以及修改document.title，那這個時候你就可以當(dāng)做文檔已經(jīng)進入了另外一個鏈接了，然后該干什么干什么。demo中是讓圖片fadeOut，fadeOut完了之后讓瀏覽器去加載資源，這個步驟就是正常的AJAX操作啦，沒有什么特殊之處了~

因為只準(zhǔn)備了三張圖片，所有后臺寫的也比較簡單：

<?phperror_reporting(false);$num = $_GET['num'];if(array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true'){ if($num == 1) {?><div class="imgwrap"><img src="./images/1.jpg" /></div><span><a href="num=2" class="next">下一張&gt;&gt;</a></span><?php
} else if ($num == 2) {?><div class="imgwrap"><img src="./images/2.jpg" /></div><span><a href="num=1" class="previous">&lt;&lt;上一張</a><a href="num=3" class="next">下一張&gt;&gt;</a></span><?php
} else {?><div class="imgwrap"><img src="./images/3.jpg" /></div><span><a href="num=2" class="previous">&lt;&lt;上一張</a></span><?php
}
}?>

上面那張圖中，我們看到了，并不是每個連接都使用PJAX來加載，如果有X_PJAX標(biāo)識，我們才會添加相應(yīng)的處理。js中稍加注意可以看到：

$.ajax({ "url": "./interface.php", "data": { "num": num
}, "dataType": "html", "headers": { "X_PJAX": true
}
});

請求中：

Accept:text/html, */*; q=0.01Accept-Encoding:gzip,deflate,sdchConnection:keep-aliveHost:qianduannotes.duapp.com
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36X-Requested-With:XMLHttpRequestX_PJAX:true

我在請求的header中加了一個X_PJAX的頭，而后臺在處理的時候也做了判斷：

function is_pjax(){ return array_key_exists('HTTP_X_PJAX', $_SERVER)
&& $_SERVER['HTTP_X_PJAX'] === 'true';
}

并不是一定要求在header頭部中加入X_PJAX的信息，你也可以在url中加入相關(guān)的參數(shù)，比如:http://example.com?pjax=1，或者其他方式，只要前后端達到一個共識就行。

為什么要用pjax?

pjax有好幾個好處：

用戶體驗提升。
頁面跳轉(zhuǎn)的時候人眼需要對整個頁面作重新識別，刷新部分頁面的時候，只需要重新識別其中一塊區(qū)域。
極大地減少帶寬消耗和服務(wù)器消耗。
由于只是刷新部分頁面，大部分的請求（css/js）都不會重新獲取，網(wǎng)站帶有用戶登錄信息的外框部分都不需要重新生成了。雖然我沒有具體統(tǒng)計這部分的消耗，我估計至少有40%以上的請求， 30%以上的服務(wù)器消耗被節(jié)省了。

壞處我覺得也有：

IE6等歷史瀏覽器的支持
雖然我沒有實際測試，但是由于pjax利用到了新的標(biāo)準(zhǔn)，舊的瀏覽器兼容會有問題。不過pjax本身支持fallback，當(dāng)發(fā)現(xiàn)瀏覽器不支持該功能的時候，會回到原始的頁面跳轉(zhuǎn)上面去。
復(fù)雜的服務(wù)器端支持
服務(wù)器端需要根據(jù)過來的請求，判斷是作全頁面渲染還是部分頁面渲染，相對來說系統(tǒng)復(fù)雜度增大了。不過對于設(shè)計良好的服務(wù)器代碼，支持這樣的功能不會有太大的問題。

綜合起來，由于用戶體驗和資源利用率的提升，壞處是可以完全得到彌補的。我強烈推薦大家使用。

今，Web 用戶期望得到單頁應(yīng)用（SPA）提供的流暢、動態(tài)的體驗。然而，創(chuàng)建 SPA 往往需要使用復(fù)雜的框架，如 React 和 Vue，學(xué)習(xí)和使用起來可能比較困難。這就是htmx的用武之地：一種通過直接在HTML中利用Ajax和CSS過渡效果等功能，為構(gòu)建動態(tài) Web 體驗帶來新思路的工具。下面就來看看 htmx 是什么，它有什么強大之處！

htmx 概述

HTMX 允許在不使用 JavaScript 的情況下添加現(xiàn)代瀏覽器功能。可以直接在 HTML 中使用屬性來訪問 AJAX、CSS 過渡效果、WebSockets 和服務(wù)器推送等功能，以便以超文本的簡單性和強大性構(gòu)建現(xiàn)代用戶界面。

HTMX的設(shè)計理念是通過解除HTML在前端開發(fā)中的一些限制，使其成為一個更加完整和強大的超文本工具。通常情況下，在傳統(tǒng)的Web開發(fā)中，只有<a>和<form>標(biāo)簽可以發(fā)起HTTP請求，只有點擊和提交事件可以觸發(fā)這些請求，只有GET和POST方法可用，并且只能替換整個屏幕內(nèi)容。而HTMX打破了這些限制，允許使用額外的HTML屬性來實現(xiàn)更多的功能，而不需要編寫大量的JavaScript代碼。例如，在HTML中使用特定的屬性即可實現(xiàn)進度條、懶加載、無限滾動、內(nèi)聯(lián)驗證等特性。

與其他前端框架（如Vue.js和React）不同，HTMX的工作方式是：當(dāng)向服務(wù)器發(fā)送請求時，服務(wù)器返回完整的HTML響應(yīng)，并更新頁面中的相應(yīng)部分，而不是以JSON格式返回數(shù)據(jù)。這使得HTMX可以與任何服務(wù)器端技術(shù)進行集成，因為應(yīng)用的邏輯和處理都發(fā)生在后端。這種方式簡化了前端開發(fā)并減少了對JavaScript的依賴。

可以通過如下方式使用npm安裝HTMX：

npm install htmx.org

htmx 使用

HTMX提供了一組屬性，可以直接從 HTM L中進行AJAX請求：

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

這些屬性都接受一個 URL 作為參數(shù)，用于發(fā)送AJAX請求。因此，每當(dāng)觸發(fā)元素時，它會向指定的URL發(fā)送指定類型的請求。來看下面的例子：

<button hx-get="/api/resource">加載數(shù)據(jù)</button>

在上面的例子中，按鈕元素被賦予了hx-get屬性。一旦點擊該按鈕，就會向/api/resource URL發(fā)送一個GET請求。

那當(dāng)從服務(wù)器返回數(shù)據(jù)時會發(fā)生什么呢？默認情況下，htmx 會將這個響應(yīng)直接注入到發(fā)起請求的元素中，也就是示例中的按鈕元素。然而，htmx 并不局限于這種行為，它提供了將響應(yīng)數(shù)據(jù)指定為不同元素的目標(biāo)的能力，接下來將深入探討這個功能。

使用htmx觸發(fā)請求

htmx根據(jù)特定元素上發(fā)生的特定事件來觸發(fā)Ajax請求：

對于input、textarea和select元素，觸發(fā)事件是change事件。
對于表單元素，觸發(fā)事件是submit事件。
對于其他所有元素，觸發(fā)事件是click事件。

下面來看一個例子：

<label>關(guān)鍵詞：
  <input
    type="text"
    placeholder="輸入關(guān)鍵詞"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
    hx-target="#joke-container"
    name="contains"
  />
</label>

<p id="joke-container">笑話內(nèi)容</p>

為了觸發(fā)搜索，需要激活change事件。對于<input>元素而言，當(dāng)元素失去焦點且其值已被改變時就會觸發(fā)change事件。因此，當(dāng)在文本框中輸入一些內(nèi)容，然后點擊頁面上其他地方，一個笑話就會出現(xiàn)在<p>元素中。簡而言之，在輸入關(guān)鍵詞后，光標(biāo)離開輸入框，笑話就會自動顯示出來。

這很不錯，但通常用戶希望在輸入時就看到搜索結(jié)果更新，也就是說，當(dāng)用戶在輸入框中輸入內(nèi)容時，將自動觸發(fā)Ajax請求，并在后臺獲取最新的搜索結(jié)果，并將其更新到頁面上相應(yīng)的位置。因此，用戶不需要手動點擊其他地方以觸發(fā)搜索，而是實時地在輸入的同時獲得更新的搜索結(jié)果。為了實現(xiàn)這一點，可以給<input>元素添加一個htmx trigger屬性：

<input
  ...
  hx-trigger="keyup"
/>

現(xiàn)在結(jié)果會立即更新。但同時引入了一個新的問題：現(xiàn)在會在每次輸入時都進行一次API調(diào)用。為了避免這個問題，可以使用修飾符來改變觸發(fā)器的行為。htmx 提供了以下修飾符選項：

once：如果希望請求只執(zhí)行一次，可以使用此修飾符。
changed：此修飾符確保只有在元素的值發(fā)生變化時才發(fā)出請求。
delay:<時間間隔>：此修飾符設(shè)置一個等待期（如1秒），在此等待期間再次觸發(fā)事件將重新計時。
throttle:<時間間隔>：使用此修飾符，可以在發(fā)出請求之前設(shè)置一個等待期（例如1秒）。然而，與delay不同的是，如果在設(shè)定的時間內(nèi)觸發(fā)了新的事件，則該事件將被忽略，確保請求僅在定義的時間后觸發(fā)。
from:<CSS選擇器>：此修飾符使得可以在特定的元素上監(jiān)聽事件，而不是原始元素。

在這種情況下，delay是我們想要的修飾符：

<input
  ...
  hx-trigger="keyup delay:500ms"
/>

現(xiàn)在，當(dāng)在輸入框中輸入內(nèi)容時（嘗試輸入一個較長的詞，比如"developer"），只有在暫停或完成輸入時才會觸發(fā)請求。

<label>關(guān)鍵字:
  <input
    type="text"
    placeholder="E輸入關(guān)鍵字d"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
    hx-target="#joke-container"
    name="contains"   
    hx-trigger="keyup delay:500ms"
  />
</label>

<p id="joke-container">笑話內(nèi)容</p>

正如你所見，這種做法只需要幾行客戶端代碼就可以實現(xiàn)一個搜索框模式。

請求指示器

在Web開發(fā)中，當(dāng)用戶執(zhí)行某個操作并且該操作可能需要一段時間才能完成（如進行網(wǎng)絡(luò)請求），我們通常需要給用戶提供反饋。其中一種常見的反饋方式是使用請求指示器，以可視化的方式提示用戶該操作正在進行中。

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

當(dāng)htmx發(fā)起一個Ajax請求時，它會在觸發(fā)元素上應(yīng)用htmx-request類。htmx-request類會導(dǎo)致該元素或任何具有htmx-indicator類的子元素的不透明度變?yōu)?1。

例如，下面是一個具有加載旋轉(zhuǎn)圖標(biāo)作為其請求指示器的元素：

<button hx-get="/api/data">
  加載數(shù)據(jù)
  <img class="htmx-indicator" src="/spinner.gif" alt="Loading">
</button>

當(dāng)具有hx-get屬性的按鈕被點擊并且請求開始時，按鈕會自動添加一個htmx-request類。這個類可以讓請求指示器（例如加載旋轉(zhuǎn)圖標(biāo)）在按鈕上顯示，當(dāng)請求完成后，這個類會被移除，請求指示器也會停止顯示。還可以使用htmx-indicator屬性來指示接收htmx-request類的元素（顯示請求指示器的元素）。

<label>關(guān)鍵字:
  <input
    type="text"
    placeholder="輸入關(guān)鍵字"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
    hx-target="#joke-container"
    name="contains"   
    hx-trigger="keyup delay:500ms"
    hx-indicator=".loader"
  />
</label>

<span class="loader htmx-indicator"></span>

<p id="joke-container">笑話內(nèi)容</p>

定位元素和更新內(nèi)容

在某些情況下，我們可能需要在發(fā)送請求的元素之外更新其他元素。htmx 允許我們hx-target屬性來指定Ajax響應(yīng)應(yīng)該更新的特定元素。可以通過在hx-target屬性中設(shè)置一個CSS選擇器來指定要更新的元素。例如有一個用于發(fā)布新評論的表單，希望將新評論添加到評論列表中，而不是更新表單本身。

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

當(dāng)用戶點擊按鈕并發(fā)起請求時，獲取到的響應(yīng)數(shù)據(jù)將會更新顯示在頁面上具有"joke-container"這個ID的元素內(nèi)部，而不是替換按鈕本身的內(nèi)容。這樣可以實現(xiàn)在特定位置更新內(nèi)容，而不影響其他部分的效果。

擴展CSS選擇器

htmx提供了一些擴展的CSS選擇器，用于更高級的元素選擇和內(nèi)容加載：

this ：指定帶有 hx-target 屬性的元素作為實際更新目標(biāo)。
closest ：找到與給定CSS選擇器匹配的最近的祖先元素。
next 和 previous ：在DOM中查找與給定CSS選擇器匹配的后續(xù)或前置元素。
find ：查找與給定CSS選擇器匹配的第一個子元素。

通過使用這些關(guān)鍵字，我們可以更靈活地選擇要更新的元素。例如，在之前的例子中，我們可以使用 hx-target="next p" 來指定更新目標(biāo)元素，而不是使用具體的 ID。這樣可以簡化代碼，并且使得更新更加動態(tài)和通用。

更新內(nèi)容

默認情況下，htmx會用Ajax響應(yīng)替換目標(biāo)元素的內(nèi)容。但是，如果希望追加新內(nèi)容而不是替換它，那就可以使用hx-swap屬性。該屬性允許指定新內(nèi)容應(yīng)該如何插入目標(biāo)元素中。可能的取值包括outerHTML、innerHTML、beforebegin、afterbegin、beforeend和afterend。例如，使用hx-swap="beforeend"會將新內(nèi)容追加到目標(biāo)元素的末尾，這對于新評論的場景非常合適。

CSS 過渡

可以使用CSS過渡效果來使元素在不使用JavaScript的情況下平滑地改變樣式。要實現(xiàn)這一點，需要在多個HTTP請求之間保持相同的元素 ID。這樣，當(dāng) htmx 接收到新的內(nèi)容并更新元素時，它將能夠應(yīng)用CSS過渡效果，使樣式的改變過渡得更加平滑。

<button hx-get="/new-content" hx-target="#content">
  請求數(shù)據(jù)
</button>

<div id="content">
  初始內(nèi)容
</div>

在htmx發(fā)起到/new-content的Ajax請求后，服務(wù)器返回以下內(nèi)容：

<div id="content" class="fadeIn">
  新內(nèi)容
</div>

盡管內(nèi)容發(fā)生了變化，但是<div>元素保持了相同的ID。然而，新增的內(nèi)容中添加了一個fadeIn類。通過為新內(nèi)容添加fadeIn類，我們可以定義相應(yīng)的CSS規(guī)則，例如opacity和transition屬性，來實現(xiàn)淡入效果。這樣，當(dāng)htmx接收到新的內(nèi)容并更新元素時，CSS過渡效果將被觸發(fā)，使元素的變化過渡得更加平滑。

下面來創(chuàng)建一個 CSS 過渡效果，使元素從初始狀態(tài)平滑過渡到新狀態(tài)：

.fadeIn {
  animation: fadeIn 2.5s;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

當(dāng)htmx加載新內(nèi)容時，它會觸發(fā)CSS過渡效果，從而創(chuàng)建一個流暢的視覺過渡到更新后的狀態(tài)。

使用 View Transitions API

全新的View Transitions API提供了一種在DOM元素的不同狀態(tài)之間進行動畫轉(zhuǎn)換的方式。與涉及元素CSS屬性變化的CSS過渡不同，視圖過渡是用于動畫元素內(nèi)容的變化。

View Transitions API 是一個正在積極開發(fā)中的全新實驗性功能。該API已經(jīng)在Chrome 111+中實現(xiàn)，并預(yù)計將來會有更多的瀏覽器支持它。htmx提供了與View Transitions API一起使用的接口，并在不支持該API的瀏覽器中回退到非過渡機制。

在 htmx 中，View Transitions API 的使用方法如下：

將htmx.config.globalViewTransitions配置變量設(shè)置為true。這將對所有交換使用過渡效果。
在hx-swap屬性中使用transition:true選項。可以使用CSS定義和配置視圖過渡效果。

下面是一個“彈跳”過渡效果的示例，其中舊內(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時，可以在hx-swap屬性中添加transition:true選項來啟用過渡效果。然后，可以將bounce-it類添加到想要進行動畫處理的內(nèi)容上。

<button
  hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode" 
  hx-swap="innerHTML transition:true" 
  hx-target="#joke-container"
>
  加載新動畫
</button>

<div id="joke-container" class="bounce-it">
  <p>初始動畫內(nèi)容</p>
</div>

在這個例子中，當(dāng)<div>的內(nèi)容被更新時，舊內(nèi)容會以彈跳的方式退出視圖，而新內(nèi)容會以彈跳的方式進入視圖，從而產(chǎn)生一種生動的視覺效果。

表單校驗

htmx 與 HTML5 Validation API 可以良好的集成，在表單提交時，htmx會利用瀏覽器原生的驗證功能進行表單驗證。

例如，當(dāng)用戶點擊提交按鈕時，只有當(dāng)輸入字段包含有效的電子郵件地址時，才會向/contact發(fā)送POST請求。

<form hx-post="/contact">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>提交</button>
</form>

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

form hx-post="/contact">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>提交</button>
</form>

<script>
  const emailInput = document.querySelector('input[type="email"]');

  emailInput.addEventListener('htmx:validation:validate', function() {
    const  pattern = /@gmail\.com$/i;

    if (!pattern.test(this.value)) {
      this.setCustomValidity('只接受谷歌郵箱!');
      this.reportValidity();
    }
  });
</script>

這里使用了htmx的htmx:validation:validate事件，該事件在調(diào)用元素的checkValidity()方法之前被觸發(fā)。

現(xiàn)在，當(dāng)嘗試提交帶有非gmail.com地址的表單時，將會看到一樣的錯誤提示。

其他功能

除了上述提到的功能外，htmx 還具有很多其他功能，旨在增強HTML的能力，并為處理Web應(yīng)用中的動態(tài)內(nèi)容更新提供簡單而強大的方式。它的功能不僅限于已經(jīng)介紹的內(nèi)容，還包括一些設(shè)計用于創(chuàng)建更具交互性和響應(yīng)性的網(wǎng)站的功能，而無需使用復(fù)雜的JavaScript框架。

擴展

擴展是htmx工具中功能強大的工具。這些可定制的JavaScript組件使我們能夠根據(jù)我們的特定需求進一步增強和定制庫的行為。擴展包括在請求中啟用JSON編碼、操作HTML元素上類的添加和刪除、調(diào)試元素、支持客戶端模板處理等。有了這些，我們就可以將htmx自定義為更精細的粒度。

Boosting

htmx的“Boosting”功能允許我們將標(biāo)準(zhǔn)的HTML錨點（即鏈接）和表單轉(zhuǎn)換為Ajax請求。在傳統(tǒng)的Web開發(fā)中，點擊鏈接或提交表單通常會導(dǎo)致整個頁面刷新。而通過使用htmx的"boosting"功能，這些鏈接和表單將通過Ajax請求來處理，只更新需要更新的部分內(nèi)容，而不需要刷新整個頁面。這使得網(wǎng)站的加載速度更快，并提供了更流暢的用戶體驗。類似的技術(shù)在過去被稱為pjax，現(xiàn)在在htmx中也可以實現(xiàn)類似的效果。

<div hx-boost="true">
  <a href="/blog">Blog</a>
</div>

這個 div 中的錨點標(biāo)簽會發(fā)出一個 Ajax GET 請求到 /blog，并將 HTML 響應(yīng)替換到 <body> 標(biāo)簽中。

通過利用這個功能，可以為用戶創(chuàng)建更流暢的導(dǎo)航和表單提交體驗，使我們的 Web 應(yīng)用更像單頁面應(yīng)用（SPA）。

歷史記錄管理

htmx 內(nèi)置了對瀏覽器歷史記錄的支持，可以與標(biāo)準(zhǔn)的瀏覽器歷史API對接。這樣，可以將URL添加到瀏覽器導(dǎo)航欄，并將頁面當(dāng)前狀態(tài)存儲在瀏覽器的歷史記錄中，確保"返回"按鈕按照用戶的期望進行操作。這樣一來，我們就可以創(chuàng)建出類似于SPA的網(wǎng)頁，能夠在不重新加載整個頁面的情況下維護狀態(tài)和處理導(dǎo)航。

與第三方庫一起使用

htmx 可以很容易的與其他庫進行集成。它可以無縫地與許多第三方庫進行整合，利用它們的事件來觸發(fā)請求。

總結(jié)

htmx是一個多功能、輕量級且易于使用的工具。它成功地將HTML的簡潔性與通常與復(fù)雜JavaScript庫相關(guān)的動態(tài)功能相結(jié)合，為創(chuàng)建交互式網(wǎng)絡(luò)應(yīng)用程序提供了一個全新的選擇。

然而，它并不是適用于所有情況的解決方案。對于更復(fù)雜的應(yīng)用，我們可能仍然需要使用JavaScript框架。但是，如果目標(biāo)是創(chuàng)建一個快速、交互性強且用戶友好的Web應(yīng)用，而又不增加太多復(fù)雜性，那么 htmx 絕對是值得考慮的。

.web worker注意點：

HTML5則提出了web Worker標(biāo)準(zhǔn)，表示JavaScript允許有多個線程，但是子線程完全受主線程的控制，且子線程不能操作DOM，只有主線程可以操作DOM，所以可以理解JS核心為：主線程為主的單線程執(zhí)行原理。

2.CommonJS模塊和ES6的模塊之間的區(qū)別

（1）CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

（2）CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

3.SPA核心，pushState

其實pushState是window.history對象的一個屬性而已，可以用來保存瀏覽器的url記錄，配合ajax局部刷新，實現(xiàn)頁面前進后退的SPA單頁應(yīng)用哦。

Pjax就是ajax和pushState的封裝哦。

在線咨詢

上一篇：氮化硼粉末加熱顏色變化-深圳宏元化工
下一篇：HTML網(wǎng)頁中的圖形是如何對齊的？有什么方法可以使它們對齊？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

pjax是什么以及為什么要推薦給大家 看完馬上就懂