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恳求。

这是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前端开发之后，再考虑往更大更好的环境去发展。 在杭州有码互联能看到哒！