dashborg/hibiki: 無需Javascript完全由後端程式碼控制指令碼的編寫

banq發表於2022-02-05
JavaScript後端指令碼

Hibiki HTML 是一個強大的新 Web 框架，用於建立現代、動態的前端應用程式，無需JavaScript，可以完全由後端程式碼編寫指令碼和控制。
Hibiki HTML 相容任何後端語言或框架、任何 CSS 框架以及任何現有的後端模板語言。
有關互動式演練，請檢視 Hibiki HTML 互動式教程。
入門很容易。無需設定 JavaScript 堆疊，無需樣板/腳手架，也無需下載和執行構建工具。只需在頁面或模板頂部新增一個指令碼標籤：

<script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js"></script>
用 <template hibiki> 標籤包裹你內容的任何部分，你就有了你的第一個 Hibiki HTML 應用程式。所有純 HTML 內容都按原樣呈現，並且因為 Hibiki HTML 使用瀏覽器的 HTML 解析器，它遵循與標準瀏覽器 HTML 相同的規則。

請注意，所有這些程式碼示例都可以在 Hibiki HTML Playground中檢視和編輯。

<template hibiki>
  <h1 class="title">&x1f338; Hibiki HTML</h1>
  <p>Hibiki HTML <i>is</i> HTML</p>
</template>


Hibiki HTML 應用程式具有內建的前端資料模型。您可以使用<hibiki-data>標籤使用任何 JSON 物件對其進行初始化。

<template hibiki>
  <hibiki-data>
    {"color": "blue", "name": "Mike"}
  </hibiki-data>
  <p>
    {{ $.name }}'s favorite color is 
    <span style="font-weight: bold; color: *$.color">{{ $.color }}</span>
  </p>
</template>


Hibiki HTML 支援完整的表示式語言，包括所有標準的條件和算術運算子。可以使用速記屬性語法開啟/關閉其他類class.[class-name]="true/false expression"。
 
為了更新資料（並動態更改內容），Hibiki HTML 支援handlers。基本處理程式響應click、mount、submit、change等事件。

<template hibiki>
  <hibiki-data>{"color": "blue"}</hibiki-data>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
</template>

 
Hibiki HTML 的神奇之處在於每個處理程式實際上只是一系列動作。 Hibiki 動作 是原語，如setdata、if、callhandler、fireevent、invalidate、html等。您可以在處理程式中編寫的每個動作也都有 JSON 表示。
這意味著我們可以編寫一個後端處理程式，它返回一個 JSON 響應來編寫和更新前端！
 

Hibiki HTML 是最初為Dashborg內部工具框架構建和設計的前端語言的開源版本
 

相關文章