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

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

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 02月18日

Stop Using Service + Repository in Laravel. A Better Architecture for Small & Medium Businesses

大家好！在本文中，我們將考慮HMPL這樣的 javascript 模組以及它如何在專案中取代HTMX 。也要考慮它們的差異、優點和缺點。

進一步比較這兩個模組時，值得考慮的是，一個是模板語言，而另一個是一組用於處理 HTML 的工具，透過屬性等實作。

著名的

讓我們從這兩個模組的一般概念開始。

🌐 關於服務端渲染和客戶端渲染

HMPL 模組在概念上與 HTMX 類似。我們也可以透過 API 從伺服器取得 HTML，從而取代用於建立 UI 的現代框架和函式庫。讓我們透過一個小例子來說明 HMPL 和 HTMX 以及 Vue.js 等框架的工作原理：

Vue.js 範例：

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `<div>
        <button @click="count++">Click!</button>
        <div>Clicks: {{ count }}</div>
    </div>`,
}).mount("#app");

大小：226 位元組（磁碟上 4KB）

HMPL範例：

document.querySelector("#app").append(
  hmpl.compile(
    `<div>
        <button>Click!</button>
        <div>Clicks: {{ src: "/api/clicks", after: "click:button" }}</div>
    </div>`
  )().response
);

大小：209 位元組（磁碟上 4KB）

HTMX 範例：

<div>
  <button hx-post="/api/increment" hx-target="#counter" hx-swap="outerHTML">Click!</button>
  <div id="counter">Clicks: 0</div>
</div>

140 位元組（磁碟上 4 KB）

使用一個簡單的點擊器作為範例，我們可以看到（關於伺服器端和客戶端資料以及 html 和 js 標記有一些警告，但這不是主要思想）我們得到了相同的介面，儘管客戶端上的檔案大小將完全不同。這正是在伺服器端建立現成的或模板 UI 元件的方法的主要優勢，以便網站用戶可以更快地加載它同時保留結果。

現在，讓我們回想一下今天，或至少在早期（當伺服器端渲染還不那麼流行時），可以使用框架和函式庫來獲得大型應用程式。相同的 SPA（單頁應用程式）透過 javascript 產生所有內容，而在 html 中我們實際上只有一行，但有趣的是，10 千位元組的 html 會給我們一個幾十兆位元組的 javascript 檔案。這樣的網站，當使用者第一次造訪時，可能需要很長時間才能載入。

載入中...

例如，如果潛在客戶想要快速訂購鮮花，他不會等待 10-15 秒來加載送貨店網站，而是會存取另一個加載速度更快的網站。

還有更多網站如何運作並能影響銷售管道的實際例子。但問題是，主要的還是介面的速度和便利性，而這裡已經有方法上的差異。但最好在單獨的文章中這樣做。這裡我們也考慮了 HMPL 和 HTMX 的比較。

👀 為什麼要使用 HMPL 以及它與 HTMX 相比有哪些優點？

在本節中，我將嘗試告訴您在某些情況下選擇 HMPL 而不是 HTMX 的幾個主要原因。此外，如果您想支持這些專案，您可以為所有兩個模組都打上星號！謝謝❤️！

{% cta https://github.com/hmpl-language/hmpl %} 💎 星級 HMPL ★{% endcta %}

{% cta https://github.com/bigskysoftware/htmx %} 💎 星級 HTMX ★{% endcta %}

1.有著類似的減少程式碼的思想，但是兩個模組在概念上有所不同。對於 HTMX 來說，一方面，我們獲得了一個方便的工具來處理現有的 DOM，但另一方面，所有這些都是透過 HTML 進行的，並且實際上是即時更新的。儘管非常困難，但透過非標準解決方案，我們或多或少可以透過 javascript 進行工作，事實上，使用 javascript 工作幾乎完全不存在。在HMPL的情況下，一方面，我們可以輕鬆地使用javascript；產生自訂的 RequestInit，建立數千個單獨的 DOM 節點，並使用與 HTMX 相同的伺服器 UI 支持，但另一方面 - 所有工作都是透過程式碼完成的，當您想要更快地建立專案時，這並不總是方便的。我們來看一個程式碼範例：

HMPL範例：

import { compile ) from "hmpl-js";

const templateFn = compile(
  `<div>
  <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
    <div class="form-example">
      <label for="name">Enter your email: </label>
      <input type="text" name="email" id="email" required />
    </div>
    <div class="form-example">
      <input type="submit" value="Register!" />
    </div>
  </form>
  <p>Email {
    {
      src:"/api/register",
      after:"submit:#form",
    }
  } successfully registered!</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);
wrapper.appendChild(obj.response);

HTMX 範例：

<script src="/path/to/htmx.min.js"></script>
<div>
  <form hx-post="/api/register" hx-target="#notification" hx-swap="outerHTML">
    <div class="form-row">
      <label for="name">Enter your email: </label>
      <input type="text" name="email" id="email" required />
    </div>
    <div class="form-row">
      <input type="submit" value="Register!" />
    </div>
  </form>
  <p id="notification"></p>
</div>

這個例子清楚地表明，HTMX 更注重最大化速度和縮短程式碼，而 HMPL 是 HTMX 與用於建立 UI 的現代框架或程式庫的結合。我們可以說我們得到了有點類似的結果，但考慮到我們可以自訂對伺服器的請求。這非常重要，因為結合 fetch 和 javascript 中的工作來自訂請求將允許您使用微前端，或與其他框架結合使用，甚至與測試結合使用。

2. HMPL 語法本身也具有優勢，因為請求物件不會與任何標籤綁定。在渲染時，它們會被替換為不會因不必要的標籤而弄亂 DOM 的註釋。範例語法：

HMPL語法：

<div>some text {{ src: "/api/getSomeText" }} some text</div>

HTMX 語法：

<div>some text <span hx-put="/api/getSomeText" hx-swap="outerHTML"></span> some text</div>

在某些情況下，無法僅使用 p 或 s 等短標籤來指派屬性以實現最小檔案大小。有時，您必須在同一個表中使用範本標籤，而這會佔用文件中的大量字元。在 hmpl 語法中，總是有一個花括號，然後有一個物件。

3. HMPL 完全基於獲取請求建置，該XMLHTTPRequest fetch 2015 年作為標準推出。 fetch函數可讓您在瀏覽器中使用現代 javascript 功能，例如AbortController 、訊號等。

XMLHTTP請求

而且，還有相當多的優點，例如在使用 webpack 和其他工具時可以使用單獨的 .hmpl 檔案副檔名，但在我看來，我強調的那些是最重要的。 Webpack 設定範例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.hmpl$/i,
        use: ["hmpl-loader"],
      },
    ],
  },
};

HMPL 的缺點

另外，hmpl 還有一些缺點，我想談談：

1. HMPL 尚不支援 WebSockets，這可能會使程式碼在專案中的實作變得複雜。在 HTMX 中，存在這種支援。

2.由於使用了fetch，一些舊版的瀏覽器將不支援該佈局。

3. HMPL 是一個新模組，有時可能會有錯誤。相反，HTMX 卻因其廣泛的使用而受到考驗。

結論

HMPL模板語言可以在需要靈活自訂請求，以及透過JavaScript直接與節點工作的情況下取代HTMX；例如，如果您想建立一個由 1000 個相同節點組成的循環，同時又具有面向伺服器的 UI 的優勢，那麼它也適合這項任務。如果目標是完全減少使用 JavaScript 的工作量，或者使用已建立的測試模組以及使用最少 HTML 程式碼與伺服器的簡單連接，那麼 HTMX 是不錯的選擇。

感謝大家閱讀這篇文章！