整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
eyond Compare for Mac是一款專業(yè)的文件對(duì)比同步工具，beyond compare mac可以專門針對(duì)文檔，源代碼和HTML調(diào)整的語法突出顯示和比較規(guī)則來查看和編輯文本文件，幫助您輕松的對(duì)比兩個(gè)文件，或者文件夾的不同之處，并生成報(bào)告，更加清晰明了，您只需要進(jìn)行簡(jiǎn)單的大小和時(shí)間以及字節(jié)的檢查修改即可。需要的朋友，歡迎來Macjb下載beyond compare mac中文版。
Beyond Compare for Mac允許您快速，輕松地比較您的文件和文件夾。通過使用簡(jiǎn)單，強(qiáng)大的命令，您可以專注于您文件的差異。然后，您可以合并更改，同步文件，并為記錄生成報(bào)告。Beyond Compare讓您可以高速比較整個(gè)驅(qū)動(dòng)器和文件夾，只需檢查大小和修改時(shí)間，或者逐個(gè)字節(jié)比較來徹底驗(yàn)證每個(gè)文件。一旦找到您感興趣的特定文件，“超越比較”可以智能地選擇最佳的比較和顯示方式。文本文件可以通過專門為文檔，源代碼和HTML進(jìn)行調(diào)整的語法突出顯示和比較規(guī)則進(jìn)行查看和編輯。 Microsoft word .doc和Adobe .pdf文件的文本內(nèi)容也可以進(jìn)行比較但不能編輯。
多平臺(tái)
Beyond Compare在Windows、Linux和OS X上都能使用。運(yùn)行速度快，并且擁有一個(gè)本地界面。同時(shí)為了滿足您完成任務(wù)的各種需求，還針對(duì)各種平臺(tái)進(jìn)行功能提升。
ZIP
壓縮文件和其他文檔類型都可以內(nèi)置擴(kuò)展用于對(duì)比和更新它們的內(nèi)容，和其他文件夾一樣簡(jiǎn)單。支持處理多種流行格式，包括 tar、gzip、 bzip2、Microsoft CAB、WinRAR、以及新版的Windows v4 、Zipx、7-zip、IMG/ISO磁盤圖像文件。
FTP，SFTP，F(xiàn)TPS
您無需一個(gè)單獨(dú)的FTP客戶端來更新您的網(wǎng)站或者進(jìn)行離線備份。Beyond Compare能連接到FTP、FTP 通過 SSL和 SFTP (SSH)服務(wù)器，比較、合并或者同步變更您使用過的相同的命令。它保存了配置文件以便快速訪問，支持多個(gè)并發(fā)連接以實(shí)現(xiàn)提速。
媒體設(shè)備
與其他驅(qū)動(dòng)器一樣，Beyond Compare可以插入您的相機(jī)、MP3播放器或者安卓手機(jī)并且立即訪問它。同步您的音樂、復(fù)制您的照片，保存您的高分。
版本控制
通過一個(gè)遠(yuǎn)程的存儲(chǔ)庫(kù)直接對(duì)比您的本地版本控制工作目錄，無需第二次校驗(yàn)。支持多個(gè)分支和之前的版本，也使合并分支易如反掌。
同步文件夾
Beyond Compare文件夾同步界面可以自動(dòng)協(xié)調(diào)數(shù)據(jù)差異；有效地更新您的電腦，備份您的計(jì)算機(jī)或管理你的網(wǎng)站；可以使用相同的接口從磁盤、FTP服務(wù)器和壓縮文件拷內(nèi)容。可以很容易地過濾掉您不需要的內(nèi)容，并且可以使用所有強(qiáng)大的比較技術(shù)，讓備份又快又準(zhǔn)。
可以使用一個(gè)靈活的腳本語言自動(dòng)執(zhí)行重復(fù)性任務(wù)，且可以從命令行調(diào)用任何腳本，以使您在最方便的時(shí)候安排同步
Beyond Compare非常靈活，可以本地或者遠(yuǎn)程連接虛擬文件系統(tǒng)，并以直觀的方式連接到您的數(shù)據(jù)。
比較文件，文件夾
可以高效對(duì)比整個(gè)驅(qū)動(dòng)器和文件夾，檢查大小和修改時(shí)間；或者逐字節(jié)完整驗(yàn)證每個(gè)文件；無縫集成了FTP站點(diǎn)、云存儲(chǔ)和壓縮文件，強(qiáng)大的過濾功能允許您只看到的自己感興趣的。
Beyond Compare選擇最好的方法來突出不同之處，文本文件可以用語法高亮和比較規(guī)則調(diào)整進(jìn)行查看和編輯，以用于文檔、源代碼和HTML。Word文檔、Adobe和pdf文件也可以進(jìn)行比較但是不能編輯。數(shù)據(jù)文件、可執(zhí)行和二進(jìn)制文件以及圖像文件都有專用的查看器。
三種方式合并
Beyond Compare的合并瀏覽器支持將一個(gè)文件或文件夾的兩個(gè)不同版本進(jìn)行變更合并，生成一個(gè)輸出。這種智能的方式允許在仔細(xì)檢查沖突的時(shí)候能快速接受大部分變更。顏色編碼和部分高亮顯示允許您簡(jiǎn)單、快速地接受、拒絕以及合并變更。文件合并時(shí)可以使用內(nèi)置的語法高亮顯示編輯器改變輸出文件的任意行。
大部分版本控制系統(tǒng)都可直接使用Beyond Compare，當(dāng)需要時(shí)它能提供給您強(qiáng)大的對(duì)比和合并支持。
1.文字比較
這是兩個(gè)源代碼文件的比較。具體差異用紅色文字標(biāo)記，整條線用淺紅色背景表示存在差異。裝訂線按鈕和熱鍵可讓您快速將代碼段從一側(cè)復(fù)制到另一側(cè)。
2.三向文本合并 僅限專業(yè)
這是頂部的三個(gè)文件和底部的合并可編輯輸出的比較。中心文件是兩個(gè)更高版本的共同祖先。左右更改自動(dòng)包含在輸出中。
3.表比較
可以在表比較會(huì)話中逐個(gè)單元地比較分隔數(shù)據(jù)文件。可以在關(guān)鍵字段上對(duì)數(shù)據(jù)進(jìn)行排序和對(duì)齊，并且可以忽略不重要的列。
4.圖片比較
“圖片比較”視圖并排顯示圖像，并突出顯示其差異。可以比較各種類型的圖像文件。
5.文件夾比較
以熟悉的Explorer樣式并排比較文件夾。差異以顏色突出顯示。
6.文件夾同步
專用的文件夾同步會(huì)話對(duì)于同步文件夾很有用。預(yù)覽窗格清楚地顯示了將要執(zhí)行的操作。
7.3向文件夾合并
三向合并現(xiàn)在擴(kuò)展到文件夾。將獨(dú)立更改與共同祖先進(jìn)行比較，以快速將更改與其他人的更改合并。它使您的自定義項(xiàng)合并到新版本中。
8.HEX比較
Hex Compare視圖在典型的十六進(jìn)制轉(zhuǎn)儲(chǔ)布局中逐字節(jié)顯示差異。
9.注冊(cè)表比較 僅限專業(yè) Windows徽標(biāo)
Registry Compare視圖比較本地和遠(yuǎn)程實(shí)時(shí)注冊(cè)表以及注冊(cè)表導(dǎo)出。
10.可執(zhí)行比較 Windows徽標(biāo)
Version Compare視圖比較可執(zhí)行文件（例如.exe和.dll）并顯示版本信息的差異。版本比較是一項(xiàng)Windows功能。
11.MP3比較
MP3比較視圖比較mp3文件，顯示標(biāo)簽的差異。
Beyond Compare for Mac讓您可以有效地更新筆記本電腦，備份計(jì)算機(jī)或管理您的網(wǎng)站，Beyond Compare將處理所有細(xì)節(jié)。Beyond Compare Mac版歡迎到Macjb下載。
今天，我們將學(xué)習(xí)如何使用單個(gè)存儲(chǔ)過程和用戶定義的表類型插入和更新多條記錄。我們將插入記錄如果Id列值不存在，如果Id列值重復(fù)，將更新記錄。我們將創(chuàng)建一個(gè)存儲(chǔ)過程和用戶定義的表類型來實(shí)現(xiàn)這個(gè)功能，我還將演示如何使用Sql調(diào)用存儲(chǔ)過程來測(cè)試我們的實(shí)現(xiàn)。
先決條件
掌握SQL Server數(shù)據(jù)庫(kù)、表和存儲(chǔ)過程的基本知識(shí)。
步驟1
首先，我們將創(chuàng)建一個(gè)名為“BulkImportDemo”的數(shù)據(jù)庫(kù)。稍后我們將使用相同的數(shù)據(jù)庫(kù)創(chuàng)建表和過程。
CREATE DATABASE BulkImportDemo步驟2
在創(chuàng)建數(shù)據(jù)庫(kù)之后，我們將在同一個(gè)數(shù)據(jù)庫(kù)中創(chuàng)建表，我們將使用該數(shù)據(jù)庫(kù)來演示大容量插入和更新功能。
USE BulkImportDemo
CREATE TABLE Employee
(
Id INT IDENTITY(1,1) PRIMARY KEY,
EmpName VARCHAR(35),
Position VARCHAR(50),
[Location] VARCHAR(50),
Age INT,
Salary DECIMAL
) 這里我們創(chuàng)建了一個(gè)名為Employee的表，這個(gè)表以Id列作為主鍵，它是自動(dòng)遞增的列。
步驟3
我們的employee表已經(jīng)準(zhǔn)備好插入和更新數(shù)據(jù)。現(xiàn)在我們將創(chuàng)建用戶定義的表數(shù)據(jù)類型。
什么是用戶定義的表類型?
用戶定義的表類型是用戶定義的數(shù)據(jù)類型，它將以表格格式包含數(shù)據(jù)。我們可以使用這些數(shù)據(jù)類型在存儲(chǔ)過程中作為參數(shù)傳遞，稱為表值參數(shù)。
我們將為Employee創(chuàng)建用戶定義的表類型，如下所示。
CREATE TYPE tblTypeEmployee AS TABLE
(
Id INT,
EmpName VARCHAR(35),
Position VARCHAR(50),
[Location] VARCHAR(50),
Age INT,
Salary DECIMAL
) 這里我們創(chuàng)建了用戶定義的表類型。執(zhí)行上述命令后，您可以在BulkImportDemo數(shù)據(jù)庫(kù)的對(duì)象資源管理器中看到此類型。
Programmability==> Types==> User-Defnied Table Types
步驟4
現(xiàn)在我們將創(chuàng)建存儲(chǔ)過程來執(zhí)行插入和更新操作。
CREATE PROCEDURE spBulkImportEmployee
(
@tblEmployeeTableType [dbo].tblTypeEmployee REadonly
)
AS
BEGIN
MERGE Employee AS dbEmployee
USING @tblEmployeeTableType AS tblTypeEmp
ON (dbEmployee.Id=tblTypeEmp.Id)
WHEN MATCHED THEN
UPDATE SET EmpName=tblTypeEmp.EmpName,
Position=tblTypeEmp.Position,
[Location]=tblTypeEmp.[Location],
Age=tblTypeEmp.Age,
Salary=tblTypeEmp.Salary
WHEN NOT MATCHED THEN
INSERT ([EmpName],[Position],[Location],Age,Salary)
VALUES (tblTypeEmp.EmpName,tblTypeEmp.Position,tblTypeEmp.[Location],tblTypeEmp.Age,tblTypeEmp.Salary);
END 這里我們創(chuàng)建了名為“spBulkImportEmployee”的過程，它接受前面步驟中創(chuàng)建的表類型作為參數(shù)，也稱為表值參數(shù)。
我們使用SQL server的“Merge”特性在同一個(gè)查詢中執(zhí)行更新和插入。如果Id列的值已經(jīng)存在于表中，那么它將更新字段的其余部分，否則將插入新記錄。
步驟5
現(xiàn)在，我們將了解如何測(cè)試在前面步驟中創(chuàng)建的存儲(chǔ)過程(spBulkImportEmployee)。
我們必須創(chuàng)建一個(gè)用戶定義表類型的變量來傳遞它作為過程的參數(shù)。
-- Declaring the variable of user defined table type
DECLARE @tblTypeEmployee tblTypeEmployee
--Inserting some records
INSERT INTO @tblTypeEmployee ([ID],[EmpName],[Position],[Location],Age,Salary)
VALUES (0,'Cedric Kelly','Senior Javascript Developer','Edinburgh',22,43360)
,(0,'Dai Riosy','Personnel Lead','London',22,43360)
,(3,'Cara Stevens','Sales Assistant','Edinburgh',22,43360)
,(0,'Thor Walton','Senior Developer','Sydney',27,217500)
,(10,'Paul Byrd','Team Leader','Sydney',42,92575)
,(6,'Finn Camacho','Software Engineer','California',34,372000)
,(0,'Rhona Davidson','Integration Specialist','Newyork',37,725000)
,(12,'Michelle House','Support Engineer','California',28,98540)
-- Executing procedure
EXEC spBulkImportEmployee @tblTypeEmployee 這里第一行用于聲明表類型變量，第二行用于在表類型變量中插入一些啞記錄，最后調(diào)用'EXEC'來執(zhí)行過程。
今，Web 用戶期望得到單頁(yè)應(yīng)用（SPA）提供的流暢、動(dòng)態(tài)的體驗(yàn)。然而，創(chuàng)建 SPA 往往需要使用復(fù)雜的框架，如 React 和 Vue，學(xué)習(xí)和使用起來可能比較困難。這就是htmx的用武之地：一種通過直接在HTML中利用Ajax和CSS過渡效果等功能，為構(gòu)建動(dòng)態(tài) Web 體驗(yàn)帶來新思路的工具。下面就來看看 htmx 是什么，它有什么強(qiáng)大之處！
HTMX 允許在不使用 JavaScript 的情況下添加現(xiàn)代瀏覽器功能。可以直接在 HTML 中使用屬性來訪問 AJAX、CSS 過渡效果、WebSockets 和服務(wù)器推送等功能，以便以超文本的簡(jiǎn)單性和強(qiáng)大性構(gòu)建現(xiàn)代用戶界面。
HTMX的設(shè)計(jì)理念是通過解除HTML在前端開發(fā)中的一些限制，使其成為一個(gè)更加完整和強(qiáng)大的超文本工具。通常情況下，在傳統(tǒng)的Web開發(fā)中，只有<a>和<form>標(biāo)簽可以發(fā)起HTTP請(qǐng)求，只有點(diǎn)擊和提交事件可以觸發(fā)這些請(qǐng)求，只有GET和POST方法可用，并且只能替換整個(gè)屏幕內(nèi)容。而HTMX打破了這些限制，允許使用額外的HTML屬性來實(shí)現(xiàn)更多的功能，而不需要編寫大量的JavaScript代碼。例如，在HTML中使用特定的屬性即可實(shí)現(xiàn)進(jìn)度條、懶加載、無限滾動(dòng)、內(nèi)聯(lián)驗(yàn)證等特性。
與其他前端框架（如Vue.js和React）不同，HTMX的工作方式是：當(dāng)向服務(wù)器發(fā)送請(qǐng)求時(shí)，服務(wù)器返回完整的HTML響應(yīng)，并更新頁(yè)面中的相應(yīng)部分，而不是以JSON格式返回?cái)?shù)據(jù)。這使得HTMX可以與任何服務(wù)器端技術(shù)進(jìn)行集成，因?yàn)閼?yīng)用的邏輯和處理都發(fā)生在后端。這種方式簡(jiǎn)化了前端開發(fā)并減少了對(duì)JavaScript的依賴。
可以通過如下方式使用npm安裝HTMX：
npm install htmx.org
HTMX提供了一組屬性，可以直接從 HTM L中進(jìn)行AJAX請(qǐng)求：
這些屬性都接受一個(gè) URL 作為參數(shù)，用于發(fā)送AJAX請(qǐng)求。因此，每當(dāng)觸發(fā)元素時(shí)，它會(huì)向指定的URL發(fā)送指定類型的請(qǐng)求。來看下面的例子：
<button hx-get="/api/resource">加載數(shù)據(jù)</button>
在上面的例子中，按鈕元素被賦予了hx-get屬性。一旦點(diǎn)擊該按鈕，就會(huì)向/api/resource URL發(fā)送一個(gè)GET請(qǐng)求。
那當(dāng)從服務(wù)器返回?cái)?shù)據(jù)時(shí)會(huì)發(fā)生什么呢？默認(rèn)情況下，htmx 會(huì)將這個(gè)響應(yīng)直接注入到發(fā)起請(qǐng)求的元素中，也就是示例中的按鈕元素。然而，htmx 并不局限于這種行為，它提供了將響應(yīng)數(shù)據(jù)指定為不同元素的目標(biāo)的能力，接下來將深入探討這個(gè)功能。
htmx根據(jù)特定元素上發(fā)生的特定事件來觸發(fā)Ajax請(qǐng)求：
下面來看一個(gè)例子：
<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事件。對(duì)于<input>元素而言，當(dāng)元素失去焦點(diǎn)且其值已被改變時(shí)就會(huì)觸發(fā)change事件。因此，當(dāng)在文本框中輸入一些內(nèi)容，然后點(diǎn)擊頁(yè)面上其他地方，一個(gè)笑話就會(huì)出現(xiàn)在<p>元素中。簡(jiǎn)而言之，在輸入關(guān)鍵詞后，光標(biāo)離開輸入框，笑話就會(huì)自動(dòng)顯示出來。
這很不錯(cuò)，但通常用戶希望在輸入時(shí)就看到搜索結(jié)果更新，也就是說，當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，將自動(dòng)觸發(fā)Ajax請(qǐng)求，并在后臺(tái)獲取最新的搜索結(jié)果，并將其更新到頁(yè)面上相應(yīng)的位置。因此，用戶不需要手動(dòng)點(diǎn)擊其他地方以觸發(fā)搜索，而是實(shí)時(shí)地在輸入的同時(shí)獲得更新的搜索結(jié)果。為了實(shí)現(xiàn)這一點(diǎn)，可以給<input>元素添加一個(gè)htmx trigger屬性：
<input
...
hx-trigger="keyup"
/>
現(xiàn)在結(jié)果會(huì)立即更新。但同時(shí)引入了一個(gè)新的問題：現(xiàn)在會(huì)在每次輸入時(shí)都進(jìn)行一次API調(diào)用。為了避免這個(gè)問題，可以使用修飾符來改變觸發(fā)器的行為。htmx 提供了以下修飾符選項(xiàng)：
在這種情況下，delay是我們想要的修飾符：
<input
...
hx-trigger="keyup delay:500ms"
/>
現(xiàn)在，當(dāng)在輸入框中輸入內(nèi)容時(shí)（嘗試輸入一個(gè)較長(zhǎng)的詞，比如"developer"），只有在暫停或完成輸入時(shí)才會(huì)觸發(fā)請(qǐng)求。
<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>
正如你所見，這種做法只需要幾行客戶端代碼就可以實(shí)現(xiàn)一個(gè)搜索框模式。
在Web開發(fā)中，當(dāng)用戶執(zhí)行某個(gè)操作并且該操作可能需要一段時(shí)間才能完成（如進(jìn)行網(wǎng)絡(luò)請(qǐng)求），我們通常需要給用戶提供反饋。其中一種常見的反饋方式是使用請(qǐng)求指示器，以可視化的方式提示用戶該操作正在進(jìn)行中。
htmx集成了對(duì)請(qǐng)求指示器的支持，讓我們能夠向用戶提供這種反饋。它使用hx-indicator類來指定一個(gè)元素作為請(qǐng)求指示器。具有此類的任何元素的默認(rèn)不透明度為 0，使其在DOM中不可見但存在。
當(dāng)htmx發(fā)起一個(gè)Ajax請(qǐng)求時(shí)，它會(huì)在觸發(fā)元素上應(yīng)用htmx-request類。htmx-request類會(huì)導(dǎo)致該元素或任何具有htmx-indicator類的子元素的不透明度變?yōu)?1。
例如，下面是一個(gè)具有加載旋轉(zhuǎn)圖標(biāo)作為其請(qǐng)求指示器的元素：
<button hx-get="/api/data">
加載數(shù)據(jù)
<img class="htmx-indicator" src="/spinner.gif" alt="Loading">
</button>
當(dāng)具有hx-get屬性的按鈕被點(diǎn)擊并且請(qǐng)求開始時(shí)，按鈕會(huì)自動(dòng)添加一個(gè)htmx-request類。這個(gè)類可以讓請(qǐng)求指示器（例如加載旋轉(zhuǎn)圖標(biāo)）在按鈕上顯示，當(dāng)請(qǐng)求完成后，這個(gè)類會(huì)被移除，請(qǐng)求指示器也會(huì)停止顯示。還可以使用htmx-indicator屬性來指示接收htmx-request類的元素（顯示請(qǐng)求指示器的元素）。
<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>
在某些情況下，我們可能需要在發(fā)送請(qǐng)求的元素之外更新其他元素。htmx 允許我們hx-target屬性來指定Ajax響應(yīng)應(yīng)該更新的特定元素。可以通過在hx-target屬性中設(shè)置一個(gè)CSS選擇器來指定要更新的元素。例如有一個(gè)用于發(fā)布新評(píng)論的表單，希望將新評(píng)論添加到評(píng)論列表中，而不是更新表單本身。
<button
hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
hx-target="#joke-container"
>
Hello htmx!
</button>
當(dāng)用戶點(diǎn)擊按鈕并發(fā)起請(qǐng)求時(shí)，獲取到的響應(yīng)數(shù)據(jù)將會(huì)更新顯示在頁(yè)面上具有"joke-container"這個(gè)ID的元素內(nèi)部，而不是替換按鈕本身的內(nèi)容。這樣可以實(shí)現(xiàn)在特定位置更新內(nèi)容，而不影響其他部分的效果。
htmx提供了一些擴(kuò)展的CSS選擇器，用于更高級(jí)的元素選擇和內(nèi)容加載：
通過使用這些關(guān)鍵字，我們可以更靈活地選擇要更新的元素。例如，在之前的例子中，我們可以使用 hx-target="next p" 來指定更新目標(biāo)元素，而不是使用具體的 ID。這樣可以簡(jiǎn)化代碼，并且使得更新更加動(dòng)態(tài)和通用。
默認(rèn)情況下，htmx會(huì)用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"會(huì)將新內(nèi)容追加到目標(biāo)元素的末尾，這對(duì)于新評(píng)論的場(chǎng)景非常合適。
可以使用CSS過渡效果來使元素在不使用JavaScript的情況下平滑地改變樣式。要實(shí)現(xiàn)這一點(diǎn)，需要在多個(gè)HTTP請(qǐng)求之間保持相同的元素 ID。這樣，當(dāng) htmx 接收到新的內(nèi)容并更新元素時(shí)，它將能夠應(yīng)用CSS過渡效果，使樣式的改變過渡得更加平滑。
<button hx-get="/new-content" hx-target="#content">
請(qǐng)求數(shù)據(jù)
</button>
<div id="content">
初始內(nèi)容
</div>
在htmx發(fā)起到/new-content的Ajax請(qǐng)求后，服務(wù)器返回以下內(nèi)容：
<div id="content" class="fadeIn">
新內(nèi)容
</div>
盡管內(nèi)容發(fā)生了變化，但是<div>元素保持了相同的ID。然而，新增的內(nèi)容中添加了一個(gè)fadeIn類。通過為新內(nèi)容添加fadeIn類，我們可以定義相應(yīng)的CSS規(guī)則，例如opacity和transition屬性，來實(shí)現(xiàn)淡入效果。這樣，當(dāng)htmx接收到新的內(nèi)容并更新元素時(shí)，CSS過渡效果將被觸發(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í)，它會(huì)觸發(fā)CSS過渡效果，從而創(chuàng)建一個(gè)流暢的視覺過渡到更新后的狀態(tài)。
全新的View Transitions API提供了一種在DOM元素的不同狀態(tài)之間進(jìn)行動(dòng)畫轉(zhuǎn)換的方式。與涉及元素CSS屬性變化的CSS過渡不同，視圖過渡是用于動(dòng)畫元素內(nèi)容的變化。
View Transitions API 是一個(gè)正在積極開發(fā)中的全新實(shí)驗(yàn)性功能。該API已經(jīng)在Chrome 111+中實(shí)現(xiàn)，并預(yù)計(jì)將來會(huì)有更多的瀏覽器支持它。htmx提供了與View Transitions API一起使用的接口，并在不支持該API的瀏覽器中回退到非過渡機(jī)制。
在 htmx 中，View Transitions API 的使用方法如下：
下面是一個(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)行動(dòng)畫處理的內(nèi)容上。
<button
hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
hx-swap="innerHTML transition:true"
hx-target="#joke-container"
>
加載新動(dòng)畫
</button>
<div id="joke-container" class="bounce-it">
<p>初始動(dòng)畫內(nèi)容</p>
</div>
在這個(gè)例子中，當(dāng)<div>的內(nèi)容被更新時(shí)，舊內(nèi)容會(huì)以彈跳的方式退出視圖，而新內(nèi)容會(huì)以彈跳的方式進(jìn)入視圖，從而產(chǎn)生一種生動(dòng)的視覺效果。
htmx 與 HTML5 Validation API 可以良好的集成，在表單提交時(shí)，htmx會(huì)利用瀏覽器原生的驗(yàn)證功能進(jìn)行表單驗(yàn)證。
例如，當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，只有當(dāng)輸入字段包含有效的電子郵件地址時(shí)，才會(huì)向/contact發(fā)送POST請(qǐng)求。
<form hx-post="/contact">
<label>Email:
<input type="email" name="email" required>
</label>
<button>提交</button>
</form>
值得注意的是，htmx在驗(yàn)證過程中會(huì)觸發(fā)一系列事件，可以利用這些事件來添加自己的驗(yàn)證邏輯和錯(cuò)誤處理方法。例如，如果想要在JavaScript代碼中實(shí)現(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地址的表單時(shí)，將會(huì)看到一樣的錯(cuò)誤提示。
除了上述提到的功能外，htmx 還具有很多其他功能，旨在增強(qiáng)HTML的能力，并為處理Web應(yīng)用中的動(dòng)態(tài)內(nèi)容更新提供簡(jiǎn)單而強(qiáng)大的方式。它的功能不僅限于已經(jīng)介紹的內(nèi)容，還包括一些設(shè)計(jì)用于創(chuàng)建更具交互性和響應(yīng)性的網(wǎng)站的功能，而無需使用復(fù)雜的JavaScript框架。
擴(kuò)展是htmx工具中功能強(qiáng)大的工具。這些可定制的JavaScript組件使我們能夠根據(jù)我們的特定需求進(jìn)一步增強(qiáng)和定制庫(kù)的行為。擴(kuò)展包括在請(qǐng)求中啟用JSON編碼、操作HTML元素上類的添加和刪除、調(diào)試元素、支持客戶端模板處理等。有了這些，我們就可以將htmx自定義為更精細(xì)的粒度。
htmx的“Boosting”功能允許我們將標(biāo)準(zhǔn)的HTML錨點(diǎn)（即鏈接）和表單轉(zhuǎn)換為Ajax請(qǐng)求。在傳統(tǒng)的Web開發(fā)中，點(diǎn)擊鏈接或提交表單通常會(huì)導(dǎo)致整個(gè)頁(yè)面刷新。而通過使用htmx的"boosting"功能，這些鏈接和表單將通過Ajax請(qǐng)求來處理，只更新需要更新的部分內(nèi)容，而不需要刷新整個(gè)頁(yè)面。這使得網(wǎng)站的加載速度更快，并提供了更流暢的用戶體驗(yàn)。類似的技術(shù)在過去被稱為pjax，現(xiàn)在在htmx中也可以實(shí)現(xiàn)類似的效果。
<div hx-boost="true">
<a href="/blog">Blog</a>
</div>
這個(gè) div 中的錨點(diǎn)標(biāo)簽會(huì)發(fā)出一個(gè) Ajax GET 請(qǐng)求到 /blog，并將 HTML 響應(yīng)替換到 <body> 標(biāo)簽中。
通過利用這個(gè)功能，可以為用戶創(chuàng)建更流暢的導(dǎo)航和表單提交體驗(yàn)，使我們的 Web 應(yīng)用更像單頁(yè)面應(yīng)用（SPA）。
htmx 內(nèi)置了對(duì)瀏覽器歷史記錄的支持，可以與標(biāo)準(zhǔn)的瀏覽器歷史API對(duì)接。這樣，可以將URL添加到瀏覽器導(dǎo)航欄，并將頁(yè)面當(dāng)前狀態(tài)存儲(chǔ)在瀏覽器的歷史記錄中，確保"返回"按鈕按照用戶的期望進(jìn)行操作。這樣一來，我們就可以創(chuàng)建出類似于SPA的網(wǎng)頁(yè)，能夠在不重新加載整個(gè)頁(yè)面的情況下維護(hù)狀態(tài)和處理導(dǎo)航。
htmx 可以很容易的與其他庫(kù)進(jìn)行集成。它可以無縫地與許多第三方庫(kù)進(jìn)行整合，利用它們的事件來觸發(fā)請(qǐng)求。
htmx是一個(gè)多功能、輕量級(jí)且易于使用的工具。它成功地將HTML的簡(jiǎn)潔性與通常與復(fù)雜JavaScript庫(kù)相關(guān)的動(dòng)態(tài)功能相結(jié)合，為創(chuàng)建交互式網(wǎng)絡(luò)應(yīng)用程序提供了一個(gè)全新的選擇。
然而，它并不是適用于所有情況的解決方案。對(duì)于更復(fù)雜的應(yīng)用，我們可能仍然需要使用JavaScript框架。但是，如果目標(biāo)是創(chuàng)建一個(gè)快速、交互性強(qiáng)且用戶友好的Web應(yīng)用，而又不增加太多復(fù)雜性，那么 htmx 絕對(duì)是值得考慮的。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
