阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 06月07日

我把專案中的 HTMX 替換成了這個模組🔥

TL;DR

我已經寫了一篇關於如何使用這個模組來取代 Next.js 的文章，但在某些情況下它更像是一個輕量級版本。

現在，我們終於可以開始討論具體細節了，替換完全合理，而且並非牽強附會。這兩個模組都使用來自伺服器的 HTML，概念相似，所以這絕對是一個不錯的選擇。

今天，我們將用HMPL取代專案中的HTMX 。

好了，我們開始吧！ 🏎️

⚙️ 從簡單的例子

讓我們從能想到的最簡單的例子開始——一個點擊器。你可以這樣做：

<body>
  <div class="clicker-container">
    <h1>HTMX Clicker</h1>
    <div class="click-count" id="counter" hx-swap-oob="true">0</div>
    <button
      class="click-button"
      hx-post="/click"
      hx-target="#counter"
      hx-swap="innerHTML"
    >
      Click!
    </button>
  </div>
</body>

乍看之下還不錯，最重要的是功能齊全。現在，我們來在 HMPL.js 上舉個例子：

<body></body>
<script>
  const templateFn = hmpl.compile(`
  <div class="clicker-container">
    <h1>HMPL Clicker</h1>
    <div class="click-count" id="counter">
      {{#request src="/click" after="click:#btn"}}
      {{/request}}
    </div>
    <button id="btn">Click!</button>
  </div>
`);
  const clicker = templateFn().response;
  document.querySelector("body").append(clicker);
</script>

我們可以看到，我們有兩種不同的方法，其中一個模組完全依賴當前 DOM，而另一個模組則不依賴當前 DOM，而是透過 JS 產生的。但是，我們看到，總體而言，它們是使用通用方法的相同介面。只是在這裡，第一個也是最主要的問題是，在第一種情況下，我們對請求的設定盡可能少。

🔍 問題（故意的）

在 HTMX 中，它是專門為使開發人員對 js 的依賴最小化而製作的，所以這個模組最嚴重的問題就來自於此——幾乎沒有對請求進行任何自訂。

所以，是的，當然，您可以像這樣發送body ：

<button
  class="click-button"
  hx-post="/click"
  hx-target="#counter"
  hx-swap="innerHTML"
  hx-vars='{"action": "increment"}'
>
  Click!
</button>

但即便如此，如果我們想要更多，我們也會發現它不可能實現，或難以實現。而且，這又是故意為之，因為該模組的重點在於易用性。

另外，第二個問題是，我們確實有請求，但它們是透過XMLHTTPRequest發送的，而這個標準已經有 25 年的歷史了。沒錯，最後一次加入是在 10 年代初期，但事實就是如此。

在 HMPL 中，使用了幾乎完全可自訂的fetch ，也就是說，認為 ECMAScript 中的所有新功能都已預設為支援。

🔗 複雜範例

讓我們使用一個更複雜的例子來展示如何在專案中取代 HTMX。

<div id="wrapper">
  <form 
    id="form"
    hx-post="/api/register"
    hx-target="#response"
    hx-indicator="#loading-indicator"
    hx-swap="innerHTML"
    hx-include="this"
  >
    <div class="form-example">
      <label for="login">Login: </label>
      <input type="text" name="login" id="login" required /><br/>
      <label for="password">Password: </label>
      <input type="password" name="password" id="password" required />
    </div>
    <div class="form-example">
      <input type="submit" value="Register!" />
    </div>
  </form>

  <div id="response"></div>

  <div id="loading-indicator" class="htmx-indicator">
    <p>Loading...</p>
  </div>
</div>

現在，我們有一個要傳送到伺服器的表單。 hx-include屬性將資料包含為FormData 。此外，還有一個請求指示。現在，讓我們嘗試在 HMPL 中執行相同的操作：

<body></body>
<script>
  const templateFn = compile(
    `<div id="wrapper">
  <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
    <div class="form-example">
      <label for="login">Login: </label>
      <input type="text" name="login" id="login" required /><br/>
      <label for="password">Password: </label>
      <input type="password" name="password" id="password" required />
    </div>
    <div class="form-example">
      <input type="submit" value="Register!" />
    </div>
  </form>
  <p>
    {{#request
      src="/api/register"
      after="submit:#form"
      repeat=true
    }}
     {{#indicator trigger="pending"}}
        <div class="indicator">
          <p>Loading...</p>
        </div>
     {{/indicator}}
    {{/request}}
  </p>
</div>`
  );
  const initFn = (ctx) => {
    const event = ctx.request.event;

    return {
      body: new FormData(event.target, event.submitter),
      credentials: "same-origin",
    };
  };
  const obj = templateFn(initFn);
  document.querySelector("body").append(obj.response);
</script>

這裡可以清楚地看到，我們可以做與 HTMX 中相同的操作，但是還有一個小問題，我們可以使用form ，從中獲取任何資料並修改我們的請求。