建站
咨詢
售后
建站咨詢
新聞中心
審校 | 孫淑娟
成都創(chuàng)新互聯(lián)專注于大埔企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),電子商務(wù)商城網(wǎng)站建設(shè)。大埔網(wǎng)站建設(shè)公司,為大埔等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
HTML作為宇宙的中心
眾所周知，全球互聯(lián)網(wǎng)得以蓬勃發(fā)展在很大程度上歸功于HTML和CSS。Javascript(JS)可以充當(dāng)HTML和CSS之間的粘合劑，使頁面更具動(dòng)態(tài)性和交互性，但Web編程的歷史發(fā)展不同。在客戶端渲染和其他類似技術(shù)出現(xiàn)之后，使用JS創(chuàng)建Web應(yīng)用程序變得更加困難。
什么是Htmx？
Htmx是一個(gè)庫，允許用戶使用簡(jiǎn)單的標(biāo)記創(chuàng)建現(xiàn)代且強(qiáng)大的用戶界面。多虧有了它，可以直接從HTML元素執(zhí)行AJAX請(qǐng)求、觸發(fā)CSS轉(zhuǎn)換、調(diào)用WebSocket和服務(wù)器發(fā)送的事件。
SSR應(yīng)用
Htmx的使用促使人們逐漸放棄客戶端渲染（CSR），轉(zhuǎn)而支持服務(wù)器端渲染（SSR）。服務(wù)端渲染（SSR）被認(rèn)為是最后的手段，只有在需要快速提高性能時(shí)才使用。但是，服務(wù)端渲染（SSR）可以構(gòu)建應(yīng)用程序的整個(gè)用戶界面。
Htmx不需要任何其他JS包即可運(yùn)行，并且與框架和語言無關(guān)。因此，它可以與任何服務(wù)器平臺(tái)一起使用，例如NodeExpress、RAILS、Django、Phoenix、Laravel等。
重用服務(wù)器上的組件
Htmx允許用戶使用更熟悉的庫重用服務(wù)器端用戶界面（UI）元素；例如，用于Node的Pug或用于RAILS和Django的模板庫。它有助于使HTML變得復(fù)雜和動(dòng)態(tài)。
這里是RentalsListing，一個(gè)使用Express.js和HTML構(gòu)建的演示應(yīng)用程序。它對(duì)統(tǒng)計(jì)和動(dòng)態(tài)場(chǎng)景使用相同的部分：
HTML
ul.results
each rental in rentals
li
article.rental
button.image(type="button", _="on click toggle .large then if #view-caption.textContent === 'View Larger' then set #view-caption.textContent to 'View Smaller' else set #view-caption.textContent to 'View Larger'")
img(src=rental.attributes.image, alt='An image of ' + rental.attributes.title)
small#view-caption View Larger
.details
h3
a(href='/rentals/' + rental.id) #{rental.attributes.title}
.detail.owner
span Owner:
| #{rental.attributes.owner}
.detail.type
span Type:
| #{rental.attributes.category}
.detail.location
span Location:
| #{rental.attributes.city}
.detail.bedrooms
span Bedrooms:
| #{rental.attributes.bedrooms}
.map
img(alt='A map of ' + rental.attributes.title, src=rental.mapbox, width="150",height="150")
在主頁的列表中，使用了Pug庫中的include來顯示部分內(nèi)容：
HTML
extends layout
block content
.jumbo
.right
h2 Welcome to Super Rentals!
p We hope you find exactly what you're looking for in a place to stay.
a.button(href="/about") About Us
.rentals
label
span Where would you like to stay?
input.light(type="text", name="search",
hx-post="/search" ,
hx-trigger="keyup changed delay:500ms" ,
hx-target=".results" ,
hx-indicator=".htmx-indicator")
include includes/rental-list.pug
每次用戶在網(wǎng)站上搜索租賃房產(chǎn)時(shí)，都可以使用相同的部分填充搜索結(jié)果。結(jié)果如下所示：
JavaScript
app.post('/search', (req, res) => {
const { search } = req.body;
const results = _rentals.data.filter(r => {
const _search = search.toLowerCase();
const _title = r.attributes.title.toLowerCase();
return _title.includes(_search);
});
const template = pug.compileFile('views/includes/rental-list.pug');
const markup = template({ rentals: results });
res.send(markup);
});
服務(wù)器端路由
客戶端路由帶來了一系列問題。例如，在基于散列的路由和基于URL的路由之間總是存在一個(gè)兩難選擇。由于舊版瀏覽器（如Internet Explorer 11）不支持歷史API，因此在URL中使用片段ID的基于哈希的路由幾乎總是選擇。
大多數(shù)JS框架都實(shí)現(xiàn)了自己的客戶端路由邏輯。同時(shí)，所有框架都使用自己的瀏覽器API，例如window.history。這導(dǎo)致應(yīng)用程序中出現(xiàn)大量樣板代碼。
更少的JS代碼
Htmx的主要優(yōu)勢(shì)在于編寫并發(fā)送到瀏覽器的JS代碼量。與hyperscript一起，該庫允許用戶創(chuàng)建豐富的交互式應(yīng)用程序，而無需使用JS中的客戶端代碼：
HTML
當(dāng)單頁應(yīng)用剛開始流行時(shí)，社區(qū)采用JSON作為數(shù)據(jù)交換的標(biāo)準(zhǔn)?，F(xiàn)在，為了從JSON數(shù)據(jù)中對(duì)HTML進(jìn)行逆向工程，用戶通常需要處理通過API來自服務(wù)器的大量客戶端數(shù)據(jù)。API響應(yīng)通常包含不完整或冗余的數(shù)據(jù)。
為了解決這個(gè)問題，已經(jīng)開發(fā)了像GraphQL這樣的復(fù)雜替代方案，因此用戶只能從服務(wù)器獲取所需的數(shù)據(jù)。Htmx提供了更好的解決方案：只需將HTML替換為從服務(wù)器接收到的HTML響應(yīng)，而不再需要客戶端數(shù)據(jù)。
不再構(gòu)建/編譯
Htmx的另一個(gè)優(yōu)點(diǎn)是不再采用Web應(yīng)用程序構(gòu)建工具。可以改用CDN工具：
HTML
不再構(gòu)建是Web應(yīng)用程序開發(fā)的全球趨勢(shì)。一方面，ES模塊規(guī)范已經(jīng)被所有瀏覽器開發(fā)者所接受。另一方面，現(xiàn)在有了Skypack、Snowpack和Vite工具，可以與CDN和ESM方法結(jié)合使用。所有這些最終將導(dǎo)致客戶端JavaScript的構(gòu)建減少。此外，無需安裝數(shù)千個(gè)npm包并維護(hù)復(fù)雜的構(gòu)建配置。
統(tǒng)一代碼庫
一個(gè)應(yīng)用程序的兩個(gè)代碼庫意味著額外的開發(fā)挑戰(zhàn)。特別是，需要同步更新部署、兩次配置構(gòu)建管道、更新兩個(gè)庫中的框架、維護(hù)代碼，并從兩個(gè)源運(yùn)行測(cè)試包。
Htmx允許用戶將所有代碼組合在一個(gè)地方：由于渲染在服務(wù)器端進(jìn)行，因此不需要單獨(dú)的接口基礎(chǔ)。從長(zhǎng)遠(yuǎn)來看，這可以為用戶節(jié)省大量時(shí)間和費(fèi)用。此外，開發(fā)人員可以更加一致地采取行動(dòng)，他們不必檢查兩個(gè)或更多存儲(chǔ)庫。
行為原則的局部性（LoB）
LoB原理是由編程理論家Richard Gabriel提出的。他指出，所有開發(fā)人員都應(yīng)該努力確保每段代碼的行為在驗(yàn)證時(shí)是顯而易見的。
Gabriel認(rèn)為，局部性對(duì)于保持代碼易于維護(hù)至關(guān)重要。局部性是一種特性，它允許程序員在看到代碼的一小部分后就可以了解代碼屬于架構(gòu)的哪一部分。
它看起來像這樣：
HTML
The behaviour of a code unit should be as obvious as possible by looking only at that unit of codeClick Me
缺乏狀態(tài)同步的問題
客戶端狀態(tài)管理產(chǎn)生的問題比解決的問題多。這一原則的實(shí)現(xiàn)導(dǎo)致客戶端和服務(wù)器端都需要狀態(tài)管理。另一種解決方案是將狀態(tài)存儲(chǔ)在服務(wù)器上。在這種情況下，客戶端充當(dāng)虛擬執(zhí)行器，用于呈現(xiàn)狀態(tài)更改。
這與瘦客戶機(jī)模式類似，瘦客戶機(jī)模式是一種帶有連接到終端服務(wù)器的輕量級(jí)操作系統(tǒng)。這些設(shè)備被用來創(chuàng)建第一個(gè)用于節(jié)省資源的Web應(yīng)用程序。
Htmx將幫助用戶避免混淆狀態(tài)管理網(wǎng)絡(luò)中的用戶界面（UI）代碼；例如，雙向數(shù)據(jù)綁定、單向數(shù)據(jù)流和反應(yīng)式數(shù)據(jù)。
原文標(biāo)題：??Removing JavaScript: How To Use HTML With Htmx and Reduce the Amount of Code??，作者：Alexey Shepelev
分享標(biāo)題：如何結(jié)合使用HTML與Htmx并減少JavaScript代碼量
標(biāo)題路徑：http://www.5511xx.com/article/dpiiopg.html
