如何结合使用HTML与Htmx并减少Ja [复制链接]

译者：李睿

HTML作为宇宙的中心

众所周知，全球互联网得以蓬勃发展在很大程度上归功于HTML和CSS。Javascript(JS)可以充当HTML和CSS之间的粘合剂，使页面更具动态性和交互性，但Web编程的历史发展不同。在客户端渲染和其他类似技术出现之后，使用JS创建Web应用程序变得更加困难。

什么是Htmx？

Htmx是一个库，允许用户使用简单的标记创建现代且强大的用户界面。多亏有了它，可以直接从HTML元素执行AJAX请求、触发CSS转换、调用WebSocket和服务器发送的事件。

SSR应用

Htmx的使用促使人们逐渐放弃客户端渲染（CSR），转而支持服务器端渲染（SSR）。服务端渲染（SSR）被认为是最后的手段，只有在需要快速提高性能时才使用。但是，服务端渲染（SSR）可以构建应用程序的整个用户界面。

Htmx不需要任何其他JS包即可运行，并且与框架和语言无关。因此，它可以与任何服务器平台一起使用，例如NodeExpress、RAILS、Django、Phoenix、Laravel等。

重用服务器上的组件

Htmx允许用户使用更熟悉的库重用服务器端用户界面（UI）元素；例如，用于Node的Pug或用于RAILS和Django的模板库。它有助于使HTML变得复杂和动态。

这里是RentalsListing，一个使用Express.js和HTML构建的演示应用程序。它对统计和动态场景使用相同的部分：

复制

HTMLul.resultseachrentalinrentalsliarticle.rentalbutton.image(type="button",_="onclicktoggle.largethenif#view-caption.textContent===ViewLargerthenset#view-caption.textContenttoViewSmallerelseset#view-caption.textContenttoViewLarger")img(src=rental.attributes.image,alt=Animageof+rental.attributes.title)small#view-captionViewLarger.detailsh3a(href=/rentals/+rental.id)#{rental.attributes.title}.detail.ownerspanOwnerp>#{rental.attributes.owner}.detail.typespanTypep>#{rental.attributes.category}.detail.locationspanLocationp>#{rental.attributes.city}.detail.bedroomsspanBedroomsp>#{rental.attributes.bedrooms}.mapimg(alt=Amapof+rental.attributes.title,src=rental.mapbox,width="",height="")1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.

在主页的列表中，使用了Pug库中的include来显示部分内容：

复制

HTMLextendslayoutblockcontent.jumbo.righth2Wel