🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付

今天我們來聊聊新版模板語言。我們在這個專案上已經投入了一年半的時間,說真的,這絕對是我們想要的那種認真程度。

你可能會覺得,過了這麼久,事情一定可以做得更好。沒錯,但事實上,我們現在擁有的已經非常非常棒了。

讓我們一起來看看新版本,看看我們準備了些什麼 :)

手錶


🔗 綁定

文章裡通常充斥著不必要的贅述,無論是否與主題相關。當然,我也喜歡這麼做,但我們還是直奔主題吧。

<div class="{{requestStatus}} class1">Text</div>
{{#request
  src="/api/getHTML"
  bind="{{requestStatus}}"
}}{{/request}}

結果:

<div class="hmpl-status-requestStatus-200 class1">Text</div>

是的,現在除了指示器之外,您還可以編寫自訂類別和其他屬性。

值得一提的是,這項功能本身就非常獨特,因為我使用了 Cample 的程式碼,Cample 是我之前的一個專案,也是網路上速度最快的專案之一。參與 Cample 的開發最終幫助了我,因為這種速度優勢現在也能應用在模板語言的實作中 :)

基準

基準


👀 HATEOAS怎麼樣?

模板語言的關鍵目標之一是方便地在 HATEOAS 架構上建立應用程式。也就是說,當我們從 API 接收可用於與頁面互動的路由。

{
  "id": 10,
  "name": "Lenovo Laptop",
  "price": 899.99,
  "inStock": true,
  "_links": {
    "self":        { "href": "/products/10" },
    "add_to_cart": { "href": "/cart", "method": "POST" },
    "category":    { "href": "/categories/laptops" },
    "related":     { "href": "/products?relatedTo=10" },
    "reviews":     { "href": "/products/10/reviews" }
  }
}

在這種應用範式中,我們理解模板語言的未來版本將致力於以這種格式便捷地與伺服器進行互動。因為在常規應用中,我們需要了解所有路由,而在這裡,我們只需描述元件,然後系統就會傳回所需的 API 路由。


倉庫位址: https://github.com/hmpl-language/hmpl

完整變更清單: https://hmpl-lang.dev/changelog


原文出處:https://dev.to/hmpljs/new-major-version-320-79e


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝13   💬4   ❤️5
424
🥈
我愛JS
📝2   💬3   ❤️3
66
🥉
酷豪
1
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付