江苏龙网

  1. 主页 > 生活百科 > >

HTMX简介：无需借助JavaScript的动态HTML( 二 )

html


另一个示例是，代码片段3显示了用于待办事项编辑的Pug模板 。
代码片段3. 在PUG中编辑服务器端模板form(hx-post="/todos/update/" + todo.id)input.edit(type="text", name="name",value=https://www.isolves.com/it/cxkf/yy/html5/2023-10-07/todo.name) 在代码片段3中，标记使用hx-post属性指示将编辑后的待办事项的JSON发送到何处 。从这些示例中得出的结论是我在前面提到的：服务器负责提供HTML(用HTML标记装饰)，采用适当大小的块，以填充前端用于各种交互所需的屏幕的不同部分 。HTMX客户端将根据属性将它们放置在本该所属的位置 ， 还将处理这项任务：发送适当的数据供服务使用 。
负责接收数据的端点可以像典型端点一样操作，不同之处在于响应应该是必需的HTMX 。比如 ， 在代码片段4中，您可以看到Express服务器如何处理POST以创建新的待办事项 。
代码片段4. 处理待办事项创建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主体处理程序 ， 它从表单数据中获取值，并用它创建一个新的业务对象(newTodo) 。然而，它随后使用这些值来填充Pug模板，并将其发回给客户端，以便用作插入到前端上的Todo列表 。
服务器端技术的其他例子包括在Java界结合使用HTMX和Spring Boot与Thymeleaf ， 在Python/ target=_blank class=infotextkey>Python界结合使用Spring Boot和Django 。
使用HTMX的客户端模板这种模式的另一种变体得到HTMX的支持，它使用客户端模板 。这一层在客户机中运行，接收来自服务器的JSON ， 并在服务器上进行标记翻译 。当我向Gross询问如何使用带有JSON的可充分利用REST的服务时 ， 他指出可以使用客户端模板来实现，但要注意的是REST通常被误解了 。
那么一个相反的问题是，我们如何向服务器提交JSON而不是默认的表单编码?再说一次，这有一个相应的扩展，即JSON-ENC 。
结论考虑HTMX会引发一大堆想法同时出现 。结果是，这个概念与项目本身一样有益 。作为一个成熟的项目，HTMX可能不会像现在这样精确地工作，但它已经证明了具有重大影响力 。最引人注目的是这个想法：处理所有这些非常常见的Ajax风格的请求，这通常意味着使用fetch()或类似的东西，仅仅只有HTML属性 。这样更简单、更干净 ， 而且所有东西都放在一个地方 。标记具体做什么一目了然 。
我对服务器端标记生成比较矛盾 。开发人员习惯于为此目的处理JSON，引入标记只是为客户端创建添加了一个步骤 。我们已经看到了许多服务器端方法，它们似乎总是混淆HTML、JavaScript和css这个强大的组合 ， 而这个组合最终将继续笑到最后 。也许这一回会有所不同，这里存在明显的钟摆效应 。
当然，还有客户端模板选项，它使服务器成为一个熟悉的JSON发射器(emitter) 。我试着想象它在一个大型软件项目中会如何工作 。它会降低大规模项目的总体复杂性吗?
Gross对复杂性有其自己的看法，他的想法在HTMX的设计中得到了体现 。这项技术希望通过将超文本重新作为Web应用程序的状态机制来达到简化的目的 。这个示例(表明了这个想法具体是如何实现的 。使用JSON作为协议 ， 意味着使客户端更智能、更复杂，并且使架构少一点自我描述 。
也许它完全行得通 。如果我们通过扩展底层语言HTML以实际处理现代需求(就像Ajax那样)、避免固有的复杂性，有望回到更简单的时代 。标记将再次成为中心数据描述符 ， 足以描述UI以及线上的数据 。
原文标题：Intro to HTMX: Dynamic HTML without JavaScript，作者：Matthew Tyson

【HTMX简介：无需借助JavaScript的动态HTML】


推荐阅读


上一篇：流行人脸检测与模糊算法，王者究竟是谁？实战揭秘

下一篇：基于牛顿求根法，新算法实现并行训练和评估RNN，带来超10倍增速