我们知道 正常为html添加事件监听,需要用 compiler包装一下才能真正运行到html上
比如 vue 需要用 new Vue() 将app.vue包装一下。
而htmx 没有包装却能监听到 hx开头的各种事件。
这是为什么
如果能写个示例就太棒了
我们知道 正常为html添加事件监听,需要用 compiler包装一下才能真正运行到html上
比如 vue 需要用 new Vue() 将app.vue包装一下。
而htmx 没有包装却能监听到 hx开头的各种事件。
这是为什么
如果能写个示例就太棒了
htmx
(也称为hX-Request
)是一个轻量级的JavaScript库,用于在HTML中增加AJAX交互能力,而无需全面的前端框架如Vue、React或Angular。htmx
的工作方式允许它无需编译或复杂的“包装”过程即可直接在HTML上工作。
以下是为什么 htmx
不需要编译和包装就能运行的原因:
htmx
使用纯JavaScript编写,这意味着它可以在浏览器环境中直接执行,无需额外的编译步骤。它利用了现代浏览器对JavaScript的原生支持。htmx
使用了HTML5中引入的自定义属性(data-attributes)的概念。这些属性以hx-
为前缀,并包含用于控制AJAX行为的指令。例如,hx-get
、hx-post
等。浏览器能够直接解析这些属性,而htmx
库则监听这些属性的变化并采取相应的行动。htmx
使用了JavaScript的事件监听机制。当页面加载时,它会查找带有hx-
属性的元素,并为这些元素添加事件监听器。当用户与这些元素交互(如点击按钮或提交表单)时,htmx
会拦截这些事件并执行相应的AJAX请求。htmx
并不试图管理组件的状态或维护一个复杂的虚拟DOM。它专注于提供简单的AJAX功能,而不需要额外的“包装”或状态管理。htmx
的设计目标是提供简单的AJAX交互,因此它的库文件非常小且易于集成到现有的HTML页面中。这使得它非常适合于小型项目或需要快速添加AJAX功能的场景。综上所述,htmx
之所以能够直接在HTML上运行而无需编译和包装,是因为它利用了浏览器对JavaScript的原生支持、自定义属性和事件监听机制,并采用了轻量级和无状态的设计。
8 回答4.8k 阅读✓ 已解决
6 回答3.5k 阅读✓ 已解决
5 回答2.9k 阅读✓ 已解决
6 回答2.4k 阅读
5 回答6.4k 阅读✓ 已解决
4 回答2.3k 阅读✓ 已解决
4 回答2.8k 阅读✓ 已解决
因为htmx 并没有写浏览器不认识的内容,全都是常规的DOM操作,给HTML加一些自定义属性,加一些事件等。
比如
<button hx-post="/clicked">
,用JS给button标签且带hx-post属性的节点绑定一个点击事件,点击时候调用接口/clicked
。这个逻辑你自己几行代码也能实现。htmx是实现了很多很多类似的自定义属性。而.vue文件,这个文件浏览器不认识,只要他自己的编译器认识,要编译成浏览器能认识的内容。