📢 HMPL v3.0：全新重大更新！

一切都朝着这一天迈进，模板语言的第三个主要版本终于发布了，彻底改变了整个概念！

语法已经达到了最大值，不仅需要扩展查询的能力，还需要扩展整个语言的能力。

在本文中，您将了解新功能以及它如何帮助您为 Web 应用程序节省大量磁盘空间。

让我们开始吧！

👀 旧版本有什么问题？

如此大规模更新的主要原因当然是代码本身的外观和编写方式。你可能会好奇这个例子出了什么问题：

<div>
  <button data-action="increment" id="btn">Click!</button>
  <div>Clicks: { { src:"/api/clicks", after:"click:#btn" } }</div>
</div>

是的，您可能会说这种语法很正常，因为我们是在用单括号传递对象{...}，但事实上，六个月后，我意识到情况并非如此。

这种语法的主要问题是不可扩展，而且乍一看也很难理解。没错，它非常轻量，但实际上它确实很笨拙。

{{ src:"/api/clicks" }}

按照惯例，如果你这样看，我们的属性并没有被赋值给任何东西。也就是说，在使用 Vue、Handlebars 和其他项目时，我们习惯于将一些变量名或来自 js 的内容放在双引号中{{...}}，但在这里它根本没有被读取！

✅ 版本 3 中如何解决这个问题？

我们对此进行了大量的思考。也许，我们花了几个月的时间测试了不同的方案，但最终只在制定计划时，在过去的两周里，我们通过反复试验找到了编写代码的最佳方案：

<div>
     <button data-action="increment" id="btn">Click!</button>
     <div>Clicks: 
       {{#request
         src="/api/clicks"
         after="click:#btn"
       }}{{/request}}
     </div>
 </div>

现在，语法从特定对象转移到组件{{#request}}{{/request}}及其简短版本{{#r}}{{/r}}，它们将值作为我们写入常规 js 对象的属性。

这实际上是一件非常重要的事情，因为各种各样的循环、装饰器和其他功能与原始对象看起来会很糟糕。

此外，尽管如此，我们仍然在使用 DOM 结构，即所有 Web 开发人员都习惯的树标签，而添加对象这种不寻常的语法会造成一些混乱。

🌱 查看 HMPL ★

⏱ 版本 3 中还添加了什么？

另外，在第三个版本中，终于实现了向服务器间隔发送请求的功能。

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment" id="btn">Click!</button>
      <div>Clicks: {{#request
        src="/api/clicks"
        after="click:#btn"
        repeat=false
        interval=1000
      }}{{/request}}</div>
  </div>`
);

let i = 0;
const clicker = templateFn(({ request: { event, clearInterval } }) => {
   if(++i > 10) clearInterval();
   return { body: JSON.stringify({ action: event.target.getAttribute("data-action") })
 }
}).response;

document.querySelector("#app").append(clicker);

现在，该模块允许您创建定期更新的组件，例如汇率、在线广播的文本等等。

📦这一切能给你带来什么帮助？

程序开发中，最重要的莫过于易用性和易理解性。无论你的模块多么酷炫，如果它过于粗糙、千篇一律，并且代码晦涩难懂，那么它就无法扩展。

举个例子，我可以在 React 中给出类组件，它通过等 20 个属性componentDidMount，可以完全控制组件的生命周期。但是没有人使用它们，因为它们看起来很糟糕，而且根本不是 js，而是 C++ 类或类似的东西。

（w3cschools）

同样，在这里，使用模板语言，我不能再简单地将这些括号视为请求，而是将其视为一个以这种方式调用的组件，这样就很容易了。这里也是如此。

另外，不要忘记模块的要点：

默认标记：

<main>
    <header>
        <div class="header-container">
            <a href="/" class="logo">My<span>Site</span></a>

            <button class="mobile-menu-btn" aria-label="Toggle menu">☰</button>

            <nav id="main-nav">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/services">Services</a></li>
                    <li><a href="/portfolio">Portfolio</a></li>
                    <li><a href="/contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
</main>

HMPL 标记：

<main>{{#request src="/api/header"}}{{/request}}</main>

🖋️ 规格

此外，还出现了一种方便的规范，它就像一份严肃的文件，以非业余的方式描述了工作的本质。

您可以在这里看到它。

💬 反馈

您可以在评论区写下您对新功能的想法，阅读起来一定很有趣！或者，您也可以在Discord 主题频道提问和提出建议，我或其他人会尽力解答！

✅ 该项目是开源的

所以你也可以参与！这也意味着你可以将其用于商业用途：

Repo：https://github.com/hmpl-language/hmpl
网站：https://hmpl-lang.dev
完整更改列表：https://hmpl-lang.dev/changelog.html

非常感谢您阅读本文！

文章来源：https://dev.to/hmpljs/hmpl-v30-new-big-update-5g92