如何结合HTML和Htmx，减少JavaScript代码量_0

译者|李锐审稿人|孙书娟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==='ViewLarger'然后将#view-caption.textContent设置为'ViewSmaller'否则将#view-caption.textContent设置为'ViewLarger'")img(src=rental.attributes.image,alt='Animageof'+rental.attributes.title)small#view-captionViewLarger.detailsh3a(href='/rentals/'+rental.id)#{rental.attributes.title}.detail.owner跨度所有者：|#{rental.attributes.owner}.detail.typespan类型：|#{rental.attributes.category}.detail.locationspan位置：|#{rental.attributes.city}.detail.bedrooms跨度卧室：|#{rental.attributes.bedrooms}.mapimg(alt='Amapof'+rental.attributes.title,src=rental.mapbox,width="150",height="150")在首页的列表中，Pug库中的include用于显示一些内容：HTMLextendslayoutblockcontent.jumbo.righth2欢迎来到超租！p我们希望您能在住宿的地方找到您想要的东西。a.button(href="/about")关于我们.rentalslabelspan你想住在哪里？input.light(type="text",name="search",hx-post="/search",hx-trigger="keyupchangeddelay:500ms",hx-target=".results",hx-indicator=".htmx-indicator")includeincludes/rental-list.pug可以在用户每次在网站上搜索出租物业时使用相同的部分填充搜索结果结果看起来像这样：.toLowerCase();const_title=r.attributes.title.toLowerCase();return_title.includes(_search);});consttemplate=pug.compileFile('views/includes/rental-list.pug');constmarkup=template({rentals:results});res.send(markup);});服务器端路由客户端路由有其自身的一系列问题。例如，基于散列的路由和基于URL的路由之间总是存在两难选择。由于InternetExplorer11等较旧的浏览器不支持HistoryAPI，因此几乎总是首选在URL中使用片段ID的基于哈希的路由。大多数JS框架都实现了自己的客户端路由逻辑。同时，所有框架都使用自己的浏览器API，比如window.history。这会导致应用程序中出现大量样板代码。更少的JS代码Htmx的主要优点是编写并发送到浏览器的JS代码量。与超脚本一起，该库允许用户创建丰富的交互式应用程序，而无需使用JS中的客户端代码：HTMLClickMe当单页应用程序刚开始流行时，社区采用JSON作为数据交换的标准。今天，为了从JSON数据逆向工程HTML，用户经常需要通过API处理来自服务器的大量客户端数据。API响应通常包含不完整或冗余的数据。为了解决这个问题，已经开发了像GraphQL这样的复杂替代方案，因此用户只能从服务器获取他们需要的数据。Htmx提供了一个更好的解决方案：只需将HTML替换为从服务器接收到的HTML响应，不再需要客户端数据。不再构建/编译Htmx的另一个优点是删除了Web应用程序构建工具。您可以改用CDN工具：不再构建HTML作为Web应用程序开发的全球趋势。一方面，ES模块规范已经被所有浏览器开发者所接受。另一方面，现在有Skypack、Snowpack和Vite工具可以结合CDN和ESM方式。所有这些最终将导致客户端JavaScript的构建减少。此外，无需安装数以千计的npm包和维护复杂的构建配置。统一代码库一个应用程序的两个代码库代表了额外的开发挑战。特别是，需要同步更新部署、两次配置构建管道、更新两个存储库中的框架、维护代码并从两个源运行测试包。Htmx允许用户将所有代码组合在一个地方：由于渲染发生在服务器端，因此不需要单独的界面基础。从长远来看，这可以为用户节省大量时间和金钱。此外，开发人员可以更一致地行动，他们不必检查两个或更多存储库。行为局部性原则（LoB）LoB原则是由编程理论家Richard　Gabriel提出的。他指出，所有开发人员都应努力确保每段代码的行为在验证时是显而易见的。根据Gabriel的说法，局部性对于保持代码的可维护性至关重要。局部性是一种属性，可以让程序员在看到一小部分代码后，就明白架构代码属于哪一部分。看起来是这样的：HTML一个代码单元的行为应该尽可能明显，只看那个代码单元ClickMe