当前位置:首页 > 数码 > HTMX——赋能灵活HTML-解脱JavaScript解放-前端上班形式革命 (htm l)

HTMX——赋能灵活HTML-解脱JavaScript解放-前端上班形式革命 (htm l)

admin5个月前 (05-14)数码17

HTMX准许你经常使用裁减的语法替代Script来成功交互性。HTMX在标志中间接为你提供HTTP交互,并支持许多其余交互需求,无需求助于JavaScript。这是一个幽默的想法,或者最终会影响到web前端的上班方式。让咱们看看如何经常使用HTMX以及它的吸引力。

什么是HTMX?

HTMX曾经存在了一段期间,但它不时是一个不太为人知的名目。它最近被接遭到Accelerator中或者会扭转这一切。基本的想法是取代那些须要模板化的JavaScript和HTML交互的经常出现用例,仅经常使用HTML语法,而不是JavaScript。许多交互与HTMX一同变得申明式。

这听起来很有前景,不是吗?每个web开发者都知道有很多经常出现的模板化用例。HTMX的创立者CarsonGross示意,他宿愿完善HTML作为超文本,参与其表现力,使其成为更先进、现代web运行程序的有力竞争者。

为了极速了解,看看这个HTMX展示。基本上,咱们点击一个按钮来启用对用户对象的字段启动编辑。数据实践上是PUT到一个后端端点。你可以在图1中看到展示——在你点击显示后留意底部框架中的网络交互。

理论,无论你经常使用什么框架,这都须要某种方式的JavaScriptHTMX将交互转变为两块标志:一个用于显示UI,一个用于编辑UI,如Listing1所示。

Listing1.HTMX中的用户降级

<divhx-target="this"hx-swap="outerHTML"><div><label>FirstName</label>:Joe</div><div><label>LastName</label>:Blow</div><div><label>Eml</label>:joe@blow.com</div><buttonhx-get="/contact/1/edit">点击编辑</button></div><formhx-put="/contact/1"hx-target="this"hx-swap="outerHTML"><div><label>FirstName</label><input></div><div><label>LastName</label><input></div><div><label>EmailAddress</label><input></div><button>提交</button><buttonhx-get="/contact/1">敞开</button></form>

假设你看Listing1中的标志,很容易看出出现了什么:hx-swap属性为编辑前的div提供HTML,outerHTML通知框架它如何与外部的灵活内容关系。可编辑版本作为一个表单元素抵达,其中蕴含x-put属性,该属性标识PUTHTML方法和要经常使用的端点。

疑问变成,HTMX如何成功这种替换和后续的PUT,而不做任何JavaScript呢?答案很便捷:它经常使用主机端渲染的HTML作为编辑标志,并将表单封装形象到框架中。JavaScript依然在幕后上班。实践上,咱们失掉了一个更细粒度的HTML语法,它只能加载片段而不是整个页面,并且可以提交Ajax恳求。

解脱JavaScript解放

这是DRY准则在执行中的一个幽默的例子。即使经常使用像React这样的物品,从一个表单到另一个表单也有必定数量的模板代码。当然,HTMX并没有齐全消弭这一点,但它曾经将上班转移到了主机上。

HTMX的主机端

如今,让咱们思索等式的主机端。有许多经常使用HTMX的主机端技术的例子,由于,正如Gross所说,HTMX是后端无法知的。它不关心你经常使用什么后端,只需它发生HTML。为了了解它是如何上班的,让咱们看一个经常使用Express和PugHTML模板引擎的TODO示例。这个例子是经典TODO运行程序的成功。

首先,现有的待办事项从Express输入,命令如下:

res.render('index',{todos:filteredTodos,filter,itemsLeft:getItemsLeft()});

此命令经常使用内存中的待办事项汇合,并经常使用一个Pug模板渲染它们,该模板是典型的格局,但它包括驱动HTMX交互的不凡hx-属性。例如,用于POST新待办事项的表单显示在Listing2中。

Listing2.具备HTMX属性的表单POST

form(hx-post="/todos",hx-target="#todo-list",hx-swap="afterbegin",'")input#txtTodo.new-todo(name="todo",placeholder='须要做什么?',)

你可以在这里看到afterbegin属性如何上班,将新内容放在列表中的正确位置。onhtmx脚本是Hyperscript的一个例子,这是一种简化的脚本言语。它经常与HTMX一同经常使用,但并不严厉属于HTMX或须要经常使用它。实践上,onhtmx在这里用于解决在创立新的待办事项后设置输入表单的值。

作为另一个例子,Listing3显示了待办事项编辑的Pug模板。

Listing3.在PUG中编辑主机端模板

form(hx-post="/todos/update/"+todo.id)input.edit(type="text",,value=todo.name)

在Listing3中,标志经常使用hx-post属性来批示发送已编辑待办事项的JSON的位置。从这些例子中失掉的论断是我之前提到的:主机担任提供HTML(带有HTMX标签)的适当大小的块,以填充前端为其各种交互所需的屏幕的不同局部。HTMX客户端将依据属性将它们放在它们应该在的位置,并解决发送由服务生产的适当数据。

担任接纳数据的端点可以像典型的端点一样操作,区别在于照应应该是必要的HTMX。例如,在Listing4中,你可以看到Express主机如何解决POST以创立新的待办事项。

Listing4.解决待办事项创立

.post('/todos',(req,res)=>{const{todo}=req.body;constnewTodo={id:uuid(),name:todo,done:false};todos.push(newTodo);lettemplate=pug.compileFile('views/includes/todo-item.pug');letmarkup=template({todo:newTodo});template=pug.compileFile('views/includes/item-count.pug');markup+=template({itemsLeft:getItemsLeft()});res.send(markup);});

Listing4是一个典型的POSTbody解决器,它从表复数据中取出值并经常使用它创立一个新的业务对象(newTodo)。而后,它经常使用这些值填充Pug模板并将其发送回客户端,用作前端的Todo列表中的拔出。

其余主机端技术的例子包括经常使用HTMX与Java环球中的SpringBoot和Thymeleaf以及/target=_blankclass=infotextkey>Python环球中的SpringBoot和Django。

经常使用HTMX的客户端模板

HTMX支持的这种形式的一个变种是经常使用客户端模板。这是一个在客户端运转的层,接受来自主机的JSON,并在那里启动标志转换。当我问Gross关于经常使用带有JSON的RESTful服务时,他指出这是或者的,但前提是REST理论被曲解。

一个同样的疑问是,咱们如何向主机提交JSON,而不是自动的表单编码?再次,有一个裁减可以做到这一点;即,JSON-ENC。

论断

思索HTMX会造成一堆想法同时来到。论断是这个概念和这个名目自身一样有益。作为一个成熟的名目标HTMX或者最终不会像当天这样上班,但它曾经证实是一个有益的影响。最吸引人的是解决一切这些十分经常出现的Ajax格调的恳求的想法,这理论象征着经常使用fetch()或相似的物品,只用一个HTML属性。这只是更便捷、更洁净,并且将一切都坚持在一个中央。很显著标志做了什么。

我对主机端标志生成持愈加矛盾的态度。开发者习气于为此目标解决JSON;引入标志只是在客户端创立中参与了一个步骤。咱们曾经看到了许多主机端方法,它们总是仿佛含糊了HTML、JavaScript和的弱小组合,这三者最终总是胜出。兴许这次会不同。这是一个大的摆动。

当然,还有客户端模板选项,它使主机成为一个相熟的JSON发射器。我试图构想它在一个大型软件名目中是如何上班的。它会缩小大规模名目中的总体复杂性吗?

Gross对复杂性有自己的想法。你可以看到他的想法在HTMX的设计中失掉表现。这项技术宿愿经过将咱们带回到Hypertext作为web运行程序的形态机制来简化事件。这个例子显示了这个想法的运作。经常使用JSON作为协定象征着使客户端愈加自动、愈加复杂,并使架构变得不那么自形容。

兴许它都可以上班。假设咱们防止了固有的复杂性,裁减了底层言语HTML,实践上解决现代需求,比如Ajax,咱们可以回到一个更便捷的时代。标志将再次成为核心数据形容符,并足以形容UI以及线上的数据。


到底web前端工程师是个什么样的职业

web前端工程师就是利用代码(HTML+css+js)实现网页展现效果,不论是PC端还是移动端(webAPP现在是主流),现在都是需要会的。 并且现在是一个大前端的时代,不再是简单的写写代码切切图了,是需要会使用web技术开发native应用。

web前端开发是什么?

通俗易懂的来讲,web前端就是结合了交互设计、flash、html+css、photoshop各个方面。 一般在小公司里面一个web前端技术人员都是要会具备这些技能的,所以在小公司里面上班是非常锻炼人的,让自己成为主力的进度也会更快点。 而大公司就不一样了,他把一切都是细分开来的,因此你可以精通web前端开发之后,再考虑往更大更好的环境去发展。 在杭州有码互联能看到哒!

免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。

标签: HTMX