当前位置: 首页 > 知识库问答 >
问题:

javascript - 为何 htmx 不需要编译和包裹就能运行?

汤博
2024-07-23

我们知道 正常为html添加时间监听,需要用 compiler包装一下才能真正运行到html上
比如 vue 需要用 new Vue() 将app.vue包装一下。

而htmx 没有包装却能监听到 hx开头的各种事件。
这是为什么

共有2个答案

毛勇
2024-07-23

因为htmx 并没有写浏览器不认识的内容,全都是常规的DOM操作,给HTML加一些自定义属性,加一些事件等。

比如 <button hx-post="/clicked">,用JS给button标签且带hx-post属性的节点绑定一个点击事件,点击时候调用接口/clicked。这个逻辑你自己几行代码也能实现。htmx是实现了很多很多类似的自定义属性。

而.vue文件,这个文件浏览器不认识,只要他自己的编译器认识,要编译成浏览器能认识的内容。

唐阳晖
2024-07-23

htmx(也称为hX-Request)是一个轻量级的JavaScript库,用于在HTML中增加AJAX交互能力,而无需全面的前端框架如Vue、React或Angular。htmx 的工作方式允许它无需编译或复杂的“包装”过程即可直接在HTML上工作。

以下是为什么 htmx 不需要编译和包装就能运行的原因:

  1. 原生JavaScripthtmx 使用纯JavaScript编写,这意味着它可以在浏览器环境中直接执行,无需额外的编译步骤。它利用了现代浏览器对JavaScript的原生支持。
  2. 自定义属性htmx 使用了HTML5中引入的自定义属性(data-attributes)的概念。这些属性以hx-为前缀,并包含用于控制AJAX行为的指令。例如,hx-gethx-post等。浏览器能够直接解析这些属性,而htmx库则监听这些属性的变化并采取相应的行动。
  3. 事件监听htmx 使用了JavaScript的事件监听机制。当页面加载时,它会查找带有hx-属性的元素,并为这些元素添加事件监听器。当用户与这些元素交互(如点击按钮或提交表单)时,htmx 会拦截这些事件并执行相应的AJAX请求。
  4. 无状态:与许多前端框架不同,htmx 并不试图管理组件的状态或维护一个复杂的虚拟DOM。它专注于提供简单的AJAX功能,而不需要额外的“包装”或状态管理。
  5. 轻量级:由于htmx 的设计目标是提供简单的AJAX交互,因此它的库文件非常小且易于集成到现有的HTML页面中。这使得它非常适合于小型项目或需要快速添加AJAX功能的场景。

综上所述,htmx 之所以能够直接在HTML上运行而无需编译和包装,是因为它利用了浏览器对JavaScript的原生支持、自定义属性和事件监听机制,并采用了轻量级和无状态的设计。

 类似资料:
  • 本文向大家介绍什么是预编译,何时需要预编译:相关面试题,主要包含被问及什么是预编译,何时需要预编译:时的应答技巧和注意事项,需要的朋友参考一下 1、总是使用不经常改动的大型代码体。 2、程序由多个模块组成,所有模块都使用一组标准的包含文件和相同的编译选项。在这种情况下,可以将所有包含文件预编译为一个预编译头。

  • 问题内容: 我在文件MyClass.java文件中有一个名为MyClass的类(下面提到的代码) 我在上课 但是我正在尝试使用 要么 我遇到错误 但是,如果我省略了软件包名称,则可以运行该程序。我要去哪里错了? 问题答案: 确保您位于包文件夹(已编译的类文件所在的文件夹)的父目录中,并执行以下命令: 下面是一个示例文件结构: 在上面的示例结构中,您将必须从“ bin”目录中执行命令。 另外,将类定

  • 我试图弄清楚使用运行时级别保留注释(例如:@javax.inject.named)注释的类在编译时和运行时类路径方面的确切影响。这是我到目前为止的理解: null 如果是这种情况,我是否需要创建一个包装对象(用@javax.inject.named注释)来委托内部的、未注释的对象?是否还有一个在编译时禁用注释处理的选项?参见http://docs.oracle.com/javase/7/docs/

  • 按照https://openjfx.io/openjfx-docs/#install-javafx的说明,我通过以下方式编译了示例HelloFX. java: 但是现在如果我试着运行它。。。 ... 我得到一个错误: 然而,报告为未找到的文件在那里: (我已经将权限更改为添加,以防出现问题,但显然这不是问题所在。 怎么了? (是的,指向)

  • 说明: 这实际上是一个诡计问题,因为这段代码不会编译!正如您在第1章中所记得的,浮点文字被假定为双倍,除非后缀有一个f,如2.1f。如果正确地将该值设置为2.1F,那么升级将与上一个示例类似,两个操作数都升级为double,结果将是一个double值。 但我不明白。如果浮动y=2.1;假设是双倍,则不需要将变量y提升到双倍。而我更困惑的是下一个问题,那就是:

  • 问题内容: 注意:这是从Comparable和Comparator合约衍生出来的,涉及null 该代码可以在Eclipse(20090920-1017)中编译并正常运行 但是它不能在上编译javac 1.6.0_17。这是错误消息: 有人可以解释为什么差异吗?这是一个错误吗?如果是这样,谁有错误? 问题答案: 这是一个已确认的错误:错误ID 6468354。这是相关的摘录: 此问题是由以下事实引起

  • 我有一个简单的测试设置,如 但当我尝试编译测试时,我会遇到53个错误,比如 实际上并没有传达任何关于问题所在的有用信息。我只能假设在我的构建中没有正确配置某些内容。sbt文件或其他地方。 这段代码确实曾经工作过,在我清理东西的过程中,事情发生了变化,现在它被破坏了,没有好的诊断。 有人能提出要找的东西吗?

  • 我使用android Studio制作了一个静态编程语言MultiPlatform Mobile项目,导入SQLDelight后遇到以下错误: 我回答了这个问题,但他们提到的一切我都做对了。在一个文件一个文件地查看之后,我没有找到我在哪里声明了那个版本,于是我决定将我的项目与其中一个示例项目进行比较。 再次查看这些文件后,我发现我在我的应用程序等级中使用了SQLDelightVersion1.5.