你好！這不是標題黨。我琢磨了很久該怎麼稱呼這篇文章，但很難用語言表達我的感受。所以，我就直接照我的感受寫了。
多年來，我們一直在補充模板語言，但其應用範圍相當有限。我們是在模板範式的框架內進行開發的，本質上它是正確的，但在實際應用中，如果不採取一些嚴肅的措施，實現這一點仍然相當困難。
我所說的嚴肅是指一個框架或類似的東西，它默認支持該語法，但事實上，如果 jsx 有反應，那麼在其上建置結構就相當困難，因為它本身就是結構性的。
因此，我們採取了不同的道路，我將在本文中嘗試描述它🔎
⚙️ 結構模組和真實的 DOM
無論人們怎麼說，模板語言的時代已經有所不同。如今，許多人將人工智慧視為突破性進展。事實也的確如此，但事實上，它並非我們這個世界的全部。大約 10 年前，各種模板語言的開發都很活躍，但現在你更有可能找到 1000 個新的人工智慧專案，而不是一個使用模板的專案。
這並不奇怪，因為隨著 jsx、ejs 和 handlebars 的出現，我們可以認為這個主題已經枯竭，人類再也想不出更好的了。或許確實如此，但只是在某些方面。我們以同樣的方式與伺服器交互，而 php 和 js，無論你多麼想，通常都無法連線。
因此，作為一項實驗，我們建立了這個專案來推動這個主題的發展。
<div class="container">
{{#request src="/api/my-component.html"}}
{{#indicator trigger="pending"}}
<p>Loading...</p>
{{/indicator}}
{{/request}}
</div>無論 HTMX 使用何種 SEO 技術，也無論其在某種意義上如何被誇大，它都已在 10-12 年的實踐中證明了其在開發中的重要性。與 Alpine.js 一樣，我們發現並非所有人都想使用框架。這沒錯，但另一方面，它也既困難又繁瑣。
出於某種原因，這個主題在3-4年前的屬性中得到了積極的開發，但出於某種原因，卻沒有人關注模板語言。就好像對它們的炒作已經過去了10年，每個人都認為它們是過去的遺物，但事實並非如此。
我們相信這個主題不會被遺忘，但不可否認的是，如今大多數此類專案都基於真實的 DOM。這一點是無法迴避的。
🔥 屬性炒作
任何認為開發領域的炒作可以憑空而來的人都是錯的。如今，市場現狀表明，人們還沒有準備好轉向更宏大的東西，因為坐下來使用框架更容易。因此，在只連接幾個檔案的情況下使用真實的 DOM 至關重要。如果你還記得 Docsify，那麼建立文件時，你不需要像使用 Jekyll 那樣安裝一堆與 JS 完全無關的軟體包，這就是關鍵所在。
因此，無論我們如何開發模板語言的主題，在真空中它都是相當難以使用的，因此，事實上，我們做出了一個明顯的決定，用一個新模組來補充其功能，這個新模組叫做hmpl-dom 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
</head>
<body>
<main>
<template hmpl>
<div>
{{#request src="/api/my-component.html"}}
{{#indicator trigger="pending"}}
Loading...
{{/indicator}}
{{/request}}
</div>
</template>
</main>
<script src="https://unpkg.com/json5/dist/index.min.js"></script>
<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<script src="https://unpkg.com/hmpl-dom/dist/hmpl-dom.min.js"></script>
</body>
</html>感謝他，我們將模板語言的方法與真實的 DOM 結合。我堅信，無論屬性的定義看起來多麼易於擴展（例如在 Alpine.js 中，當你在其中使用函數編寫表達式時），它們都無法完全取代 DOM。
是的，它們有它們的優勢，但這不是關於它們，而是關於在沒有 js 的情況下使用真正的 DOM。
👀 如果我需要傳遞RequestInit怎麼辦？
即使在這樣的實現中，也沒有人會放棄 JS。它的意義在於是否使用 JS，以及目前市場上的簡潔性。
索引.html
<template data-hmpl data-config-id="clicker-config">
<div>
<button data-action="increment" id="btn">Click!</button>
<div>
Clicks: {{#request src="/api/clicks" after="click:#btn"}}{{/request}}
</div>
</div>
</template>腳本.js
import { init } from "hmpl-dom";
init([
{
id: "clicker-config",
value: {
compile: { memo: true },
templateFunction: ({ request: { event } }) => ({
body: JSON.stringify({
action: event.target.getAttribute("data-action")
})
})
}
}
]);我們仍然可以傳遞之前完成的所有操作。這只是又一層嵌套而已，之前我們只能在一個 compile 函數中實現，而現在則在一個完整的模板鏈中，每個模板都會建立一個單獨的 templateFunction （是的，我們不會從整個頁面中獲取 outerHTML，因為那樣太蠢了）。
🔗 連結
您可以在這裡找到有關該專案的更多資訊：
另外，如果您想支持我們，可以給我們的主要專案點個星標。謝謝！
{% cta https://github.com/hmpl-language/hmpl %} 💎 星標 HMPL ★{% endcta %}
💬 回饋
我們將非常感謝您對這個模組的評估以及使用真實 DOM 的整個想法。 ❤️
感謝您閱讀本文！
原文出處：https://dev.to/hmpljs/hmpl-dom-v001-release-the-most-important-module-4783
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式