昆明网站建设公司：旅游网站设计的意义是什么？

旅游网站设计的意义,网站建设公司昆明,wordpress 腾讯视频插件,可信网站必须做吗‍本文作者是360奇舞团开发工程师 htmx 让我们先来看一段俳句: javascript fatigue: longing for a hypertext already in hand 这个俳句很有意思#xff0c;是开源项目htmx文档中写的#xff0c;意思是说#xff0c;我们已经有了超文本#xff0c;为什么还要去使用javascr… ‍本文作者是360奇舞团开发工程师 htmx 让我们先来看一段俳句: javascript fatigue: longing for a hypertext already in hand 这个俳句很有意思是开源项目htmx文档中写的意思是说我们已经有了超文本为什么还要去使用javascriptjavascript的繁琐让人感到疲惫。 目前前端框架很多但是很多时候我们只是想要一个简单的功能比如点击一个按钮然后发送一个请求然后更新页面的某个部分这个时候我们就不需要一个复杂的前端框架只需要一个简单的工具就可以了这个时候htmx就是一个很好的选择。 htmx是什么 先来看HTMLHTML的优势在于它是一个声明式的语言我们可以直接在html中声明我们想要的效果而不需要去写js代码这样就可以减少很多的代码量同时也可以减少很多的bug。而且html是一个很简单的语言很多人都可以很快的上手这样也可以减少很多的学习成本。 我们先看看HTML的一些限制 仅 a 和 form 发送HTTP请求仅 click和submit 事件触发HTTP请求仅 GET 和 POST 方法可以用传统的前端开发中页面的更新通常是通过重新加载整个页面来实现的 htmx让我们可以在html中使用属性直接访问AJAX, CSS Transitions, WebSockets和Server Sent Events用超文本语言来构建现代用户界面。还有一个消息2023年6月,htmx进入了github加速器扶持的项目的第一序列。 htmx就是利用了这些HTML优势解决了HTML的这些限制让我们可以在HTML中直接声明我们想要的效果而不需要去写js代码。 htmx 如何实现的 htmx 的实现原理是通过 AJAX、HTML5 和 WebSocket 等技术将前端和后端的交互方式从传统的请求-响应模式转变为增量更新模式从而实现了无刷新、无跳转的动态页面更新。具体来说htmx 通过在 HTML标签中添加自定义属性如 hx-get、hx-post、hx-trigger 等来指定需要执行的 AJAX 请求、响应后的操作以及触发 AJAX 请求的事件等。在响应返回后htmx 会根据响应的内容和指定的操作更新页面中的部分内容从而实现了动态更新页面的效果。此外htmx 还支持一些高级特性如服务器推送、表单验证、动画效果等可以帮助开发者更加方便地实现复杂的交互效果。 对了htmx的AJAX请求实现是继承自intercooler.js。 htmx 如何使用 htmx的安装 htmx的安装非常简单只需要在HTML中引入htmx的cdn地址就可以了如下所示: script srchttps://unpkg.com/htmx.org1.9.5 integritysha384-xcuj3WpfgjlKFFXhSQFQ0ZNr39lnhwjN3npfM9VBnUskLolQAcN80McRIVOPuO crossoriginanonymous/script 使用npm安装的话只需要执行下面的命令就可以了: npm install htmx.org --save htmx.org是最新版本, htmx是旧版本不推荐使用。 htmx的使用 AJAX 请求 htmx可以通过在html标签中添加hx-get、hx-post、hx-put、hx-patch、hx-delete属性来实现AJAX请求如下所示: div hx-get/time hx-triggerevery 5sThe time is now: span hx-swapouterHTML/span/div 上面的代码中hx-get属性指定了请求的URLhx-trigger属性指定了触发请求的事件这里是每5秒触发一次hx-swap属性指定了响应返回后需要更新的内容这里是更新span标签的内容。 htmx的AJAX请求触发事件有很多如click、input、load、mouseover、submit等。