一切都朝著這一天邁進，模板語言的第三個主要版本終於發布了，徹底改變了整個概念！
語法已經達到了最大值，不僅需要擴展查詢的能力，還需要擴展整個語言的能力。
在本文中，您將了解新功能以及它如何幫助您為 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 開發人員都習慣的樹標籤，而加入物件這種不尋常的語法會造成一些混亂。
{% cta https://github.com/hmpl-language/hmpl %} 🌱 查看 HMPL ★{% endcta %}
⏱ 版本 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 中給出類別元件，它透過諸如componentDidMount等 20 個屬性，可以完全控制元件的生命週期。但是沒有人使用它們，因為它們看起來很糟糕，而且根本不是 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 頻道用於提問和建議，我或其他人會嘗試回答！
✅ 該專案是開源的
所以你也可以參加！這也意味著您可以將其用於商業目的：
倉庫：https: //github.com/hmpl-language/hmpl
完整變更清單： https://hmpl-lang.dev/changelog.html
非常感謝您閱讀這篇文章！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式