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

旅游网站设计的意义,网站建设公司昆明,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等。 button hx-get/click hx-triggerclickClick Me!/button 在进行 AJAX 请求时如何给用户反馈呢 htmx提供了hx-indicator属性可以指定一个元素当 AJAX 请求发出时会在这个元素上添加一个hx-indicator类当请求返回时会移除这个类这样我们就可以通过 CSS 来实现一些动画效果来给用户反馈。 divbutton hx-get/click hx-indicator#indicatorClick Me!/buttonimg idindicator classhtmx-indicator src/spinner.gif/ /div 另外如果你希望响应返回后的内容被加载到一个不同于发出请求的元素中可以使用 hx-target 属性该属性接受一个 CSS 选择器。通过指定 hx-target 属性可以将响应返回的内容加载到指定的元素中而不是默认的发出请求的元素中。 input typetext nameqhx-get/trigger_delayhx-triggerkeyup delay:500ms changedhx-target#search-resultsplaceholderSearch...div idsearch-results/div 有了返回的数据我们可以通过hx-swap属性来指定如何更新页面htmx提供了很多更新页面的方式如outerHTML、innerHTML、afterbegin、beforebegin、afterend、beforeend等。 !-- this fixed-height div will scroll to the bottom of the div after content is appended --div styleheight:200px; overflow: scroll hx-get/example hx-swapbeforeend scroll:bottomGet Some HTML  Append It  Scroll To Bottom/div 更复杂情况需要协调两个元素之间的请求如何处理呢例如一个元素的请求能够取代另一个元素的请求或者等待另一个元素的请求完成后再发出请求。 htmx 提供了 hx-sync 属性, 通过指定 hx-sync 属性可以将多个元素的请求进行同步从而实现协调和控制请求的顺序和优先级。 form hx-post/storeinput idtitle nametitle typetexthx-post/validatehx-triggerchangehx-syncclosest form:abortbutton typesubmitSubmit/button /form CSS Animations 示例 style.smooth {transition: all 1s ease-in;} /style div idcolor-demo classsmooth stylecolor:redhx-get/colors hx-swapouterHTML hx-triggerevery 1sColor Swap Demo /div 在 htmx 中当从服务器接收到新的内容时会先检查页面中是否存在与新内容中相同 id 属性的元素。如果找到了匹配的元素则会将旧内容的属性复制到新元素上然后再进行内容的替换。在替换完成后会有一个“settle”延迟默认为20毫秒然后再将新属性值进行替换。这种方式可以让 CSS 过渡效果在不需要开发者编写任何 JavaScript 的情况下实现。 htmx还有很多其他的功能如表单验证、服务器推送、WebSocket等具体可以参考htmx文档这里不再一一介绍了。 总结 htmx是一个很好的工具可以让我们在不需要写js代码的情况下实现很多复杂的功能。但是通过上述例子也可以发现为了实现一些复杂的功能我们需要在html中添加很多属性这样会导致HTML代码变得很臃肿不利于维护所以htmx的使用场景还是有一定的局限性的我们需要根据实际情况来选择使用。 总之善于使用工具才能更好的提高我们的开发效率。 参考资料 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions https://htmx.org/docs - END - 关于奇舞团 奇舞团是 360 集团最大的大前端团队代表集团参与 W3C 和 ECMA 会员TC39工作。奇舞团非常重视人才培养有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。