建站
咨詢
售后
建站咨詢
新聞中心
譯者 | 布加迪
10余年建站經(jīng)驗(yàn)， 成都網(wǎng)站建設(shè)、成都網(wǎng)站制作客戶的見證與正確選擇。創(chuàng)新互聯(lián)公司提供完善的營銷型網(wǎng)頁建站明細(xì)報價表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
審校 | 重樓
HTML讓您可以使用擴(kuò)展的HTML語法而不是JavaScript來實(shí)現(xiàn)交互性。HTMX直接在標(biāo)記中為您提供了HTTP交互，它支持其他許多交互要求，無需借助JavaScript。這個有意思的想法最終可能會影響Web前端的工作方式。不妨看看如何使用HTMX以及什么讓它如此引人注目。
HTMX簡介
HTMX已經(jīng)存在了一段時間，但它一直是比較低調(diào)的項(xiàng)目。它最近被GitHub Accelerator接受可能會改變這一切。其基本想法是拿來需要模板JavaScript和HTML交互的常見用例，徑直使用HTML語法，無需借助JavaScript。許多交互使用HTMX變成了聲明式交互。
這聽起來大有希望，是不是?每個Web開發(fā)人員都知道有許多常見的樣板案例。HTMX的開發(fā)者Carson Gross表示，他希望“完成HTML作為一種超文本，增強(qiáng)它的表現(xiàn)力，使它成為更高級的現(xiàn)代Web應(yīng)用程序之外的一種頗有競爭力的選擇?！?/p>
要快速體驗(yàn)一下，請看這個HTMX演示。大致來說，我們點(diǎn)擊一個按鈕來編輯用戶對象上的字段。數(shù)據(jù)實(shí)際上被PUT(放入)到后端端點(diǎn)。您可以在圖1中看到演示，請注意點(diǎn)擊Show后底部框中的網(wǎng)絡(luò)交互。
圖1. 表單演示：HTMX
通常，這一切都需要某種JavaScript，無論您使用什么框架。HTMX將交互轉(zhuǎn)變?yōu)閮蓚€標(biāo)記塊：一個用于顯示UI，另一個用于編輯UI，如代碼片段1所示。
代碼片段1：HTMX中的用戶更新
: Joe
: Blow
: joe@blow.com
如果您查看代碼片段1中的標(biāo)記，就很容易看出具體發(fā)生了什么：hx-swap屬性在編輯之前為div提供了HTML，而outerHTML告訴框架它如何與其中的動態(tài)內(nèi)容相關(guān)聯(lián)?？删庉嫲姹咀鳛楹衳-put屬性的表單元素出現(xiàn)，該屬性標(biāo)識PUT HTML方法以及要使用的端點(diǎn)。
問題變成了如何在不借助任何JavaScript的情況下實(shí)現(xiàn)這種“交換”和隨后的PUT?答案很簡單：它為編輯標(biāo)記使用HTML的服務(wù)器端呈現(xiàn)，并將表單編組抽象到框架中。JavaScript仍然在幕后工作。實(shí)際上，我們得到了一種粒度更細(xì)的HTML語法，它可以只加載頁面部分而不是整個頁面，并可以提交Ajax請求。
這是實(shí)際DRY原理的一個有趣的例子。即使是像React這樣的技術(shù)，也有一定數(shù)量的樣板代碼將信息從一種形式轉(zhuǎn)換為另一種形式。當(dāng)然，HTMX沒有完全消除這種情況，但它已經(jīng)將工作轉(zhuǎn)移到服務(wù)器上。
服務(wù)器端HTMX
現(xiàn)在不妨考慮服務(wù)器端。許多服務(wù)器端技術(shù)都使用了HTMX，因?yàn)檎鏕ross所說，HTMX“與后端無關(guān)”。它不在乎您使用什么后端，只要它生成HTML就行。”為了大致了解它是如何工作的，不妨看一個使用Express的TODO示例以及Pug HTML模板引擎。這個示例是經(jīng)典TODO應(yīng)用程序的實(shí)現(xiàn)。
首先，使用以下命令從Express輸出現(xiàn)有的待辦事項(xiàng)：
res.render('index', { todos: filteredTodos, filter, itemsLeft: getItemsLeft()
});該命令使用內(nèi)存中的待辦事項(xiàng)集合，并使用典型格式的Pug模板來呈現(xiàn)它們，只不過它含有驅(qū)動HTMX交互的特殊hx-屬性。比如說，代碼片段2顯示了POST新待辦事項(xiàng)的表單。
代碼片段2. 擁有HTMX屬性的表單POST
form(hx-post="/todos", hx-target="#todo-list", hx-swap="afterbegin", _="on htmx:afterOnLoad set #txtTodo.value to ''")
input#txtTodo.new-todo(name="todo",placeholder='What needs to be done?', autofocus='')您可以在這里(https://htmx.org/docs/#swapping)看到afterbegin屬性如何將新內(nèi)容放在列表中它所屬的位置的。on htmx腳本是Hyperscript的一個例子，Hyperscript是一種簡化的腳本語言。它經(jīng)常與HTMX結(jié)合使用，但嚴(yán)格來說并不是HTMX的一部分，也不是需要它才能使用HTMX。實(shí)際上，這里使用on htmx來處理在創(chuàng)建新待辦事項(xiàng)之后設(shè)置輸入表單的值。
另一個示例是，代碼片段3顯示了用于待辦事項(xiàng)編輯的Pug模板。
代碼片段3. 在PUG中編輯服務(wù)器端模板
form(hx-post="/todos/update/" + todo.id)
input.edit(type="text", name="name",value=todo.name)在代碼片段3中，標(biāo)記使用hx-post屬性指示將編輯后的待辦事項(xiàng)的JSON發(fā)送到何處。從這些示例中得出的結(jié)論是我在前面提到的：服務(wù)器負(fù)責(zé)提供HTML(用HTML標(biāo)記裝飾)，采用適當(dāng)大小的塊，以填充前端用于各種交互所需的屏幕的不同部分。HTMX客戶端將根據(jù)屬性將它們放置在本該所屬的位置，還將處理這項(xiàng)任務(wù)：發(fā)送適當(dāng)?shù)臄?shù)據(jù)供服務(wù)使用。
負(fù)責(zé)接收數(shù)據(jù)的端點(diǎn)可以像典型端點(diǎn)一樣操作，不同之處在于響應(yīng)應(yīng)該是必需的HTMX。比如，在代碼片段4中，您可以看到Express服務(wù)器如何處理POST以創(chuàng)建新的待辦事項(xiàng)。
代碼片段4. 處理待辦事項(xiàng)創(chuàng)建
app.post('/todos', (req, res) => {
const { todo } = req.body;
const newTodo = {
id: uuid(),
name: todo,
done: false
};
todos.push(newTodo);
let template = pug.compileFile('views/includes/todo-item.pug');
let markup = template({ todo: newTodo});
template = pug.compileFile('views/includes/item-count.pug');
markup += template({ itemsLeft: getItemsLeft()});
res.send(markup);
});代碼片段4是一個典型的POST主體處理程序，它從表單數(shù)據(jù)中獲取值，并用它創(chuàng)建一個新的業(yè)務(wù)對象(newTodo)。然而，它隨后使用這些值來填充Pug模板，并將其發(fā)回給客戶端，以便用作插入到前端上的Todo列表。
服務(wù)器端技術(shù)的其他例子包括在Java界結(jié)合使用HTMX和Spring Boot與Thymeleaf，在Python界結(jié)合使用Spring Boot和Django。
使用HTMX的客戶端模板
這種模式的另一種變體得到HTMX的支持，它使用客戶端模板。這一層在客戶機(jī)中運(yùn)行，接收來自服務(wù)器的JSON，并在服務(wù)器上進(jìn)行標(biāo)記翻譯。當(dāng)我向Gross詢問如何使用帶有JSON的可充分利用REST的服務(wù)時，他指出可以使用客戶端模板來實(shí)現(xiàn)，但要注意的是REST通常被誤解了。
那么一個相反的問題是，我們?nèi)绾蜗蚍?wù)器提交JSON而不是默認(rèn)的表單編碼?再說一次，這有一個相應(yīng)的擴(kuò)展，即JSON-ENC。
結(jié)論
考慮HTMX會引發(fā)一大堆想法同時出現(xiàn)。結(jié)果是，這個概念與項(xiàng)目本身一樣有益。作為一個成熟的項(xiàng)目，HTMX可能不會像現(xiàn)在這樣精確地工作，但它已經(jīng)證明了具有重大影響力。最引人注目的是這個想法：處理所有這些非常常見的Ajax風(fēng)格的請求，這通常意味著使用fetch()或類似的東西，僅僅只有HTML屬性。這樣更簡單、更干凈，而且所有東西都放在一個地方。標(biāo)記具體做什么一目了然。
我對服務(wù)器端標(biāo)記生成比較矛盾。開發(fā)人員習(xí)慣于為此目的處理JSON，引入標(biāo)記只是為客戶端創(chuàng)建添加了一個步驟。我們已經(jīng)看到了許多服務(wù)器端方法，它們似乎總是混淆HTML、JavaScript和CSS這個強(qiáng)大的組合，而這個組合最終將繼續(xù)笑到最后。也許這一回會有所不同，這里存在明顯的鐘擺效應(yīng)。
當(dāng)然，還有客戶端模板選項(xiàng)，它使服務(wù)器成為一個熟悉的JSON發(fā)射器(emitter)。我試著想象它在一個大型軟件項(xiàng)目中會如何工作。它會降低大規(guī)模項(xiàng)目的總體復(fù)雜性嗎?
Gross對復(fù)雜性有其自己的看法，他的想法在HTMX的設(shè)計(jì)中得到了體現(xiàn)。這項(xiàng)技術(shù)希望通過將超文本重新作為Web應(yīng)用程序的狀態(tài)機(jī)制來達(dá)到簡化的目的。這個示例(表明了這個想法具體是如何實(shí)現(xiàn)的。使用JSON作為協(xié)議，意味著使客戶端更智能、更復(fù)雜，并且使架構(gòu)少一點(diǎn)自我描述。
也許它完全行得通。如果我們通過擴(kuò)展底層語言HTML以實(shí)際處理現(xiàn)代需求(就像Ajax那樣)、避免固有的復(fù)雜性，有望回到更簡單的時代。標(biāo)記將再次成為中心數(shù)據(jù)描述符，足以描述UI以及線上的數(shù)據(jù)。
原文標(biāo)題：Intro to HTMX: Dynamic HTML without JavaScript，作者：Matthew Tyson
當(dāng)前標(biāo)題：HTMX簡介：無需借助JavaScript的動態(tài)HTML
本文來源：http://www.dlmjj.cn/article/djdjsih.html
