HyperApp是用于构建前端应用程序的JavaScript库。
- 声明式:HyperApp的设计基于Elm Architecture。 使用功能范例创建可扩展的基于浏览器的应用程序。 关键是你不必学习一种新的语言。
- 无状态组件:使用纯函数构建复杂的用户界面。 无状态组件是框架无关的、可预测的、容易调试的。
- 包含:开箱即用,HyperApp将状态管理与支持键控更新和生命周期事件的虚拟DOM引擎结合在一起,所有这些都不具有依赖关系。
1 KB用于构建前端应用程序的JavaScript库。(1 KB JavaScript library for building frontend applications. )
HyperApp是用于构建前端应用程序的JavaScript库。
名稱與所有者 | jorgebucaran/hyperapp |
---|---|
主編程語言 | JavaScript |
編程語言 | JavaScript (語言數: 1) |
平台 | |
許可證 | MIT License |
發布數 | 155 |
最新版本名稱 | 2.0.22 (發布於 2022-03-25 17:43:03) |
第一版名稱 | 0.0.6 (發布於 ) |
創建於 | 2017-01-20 05:20:21 |
推送於 | 2024-01-14 06:59:11 |
最后一次提交 | |
星數 | 19k |
關注者數 | 311 |
派生數 | 783 |
提交數 | 1.4k |
已啟用問題? | |
問題數 | 584 |
打開的問題數 | 7 |
拉請求數 | 286 |
打開的拉請求數 | 3 |
關閉的拉請求數 | 211 |
已啟用Wiki? | |
已存檔? | |
是復刻? | |
已鎖定? | |
是鏡像? | |
是私有? |
The tiny framework for building web interfaces.
To learn more, go to https://hyperapp.dev for documentation, guides, and examples.
Install Hyperapp with npm or Yarn:
npm i hyperapp
Then with a module bundler like Parcel or Webpack import it in your application and get right down to business.
import { h, app } from "hyperapp"
Don't want to set up a build step? Import Hyperapp in a <script>
tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.
<script type="module">
import { h, app } from "https://unpkg.com/hyperapp"
</script>
Here's the first example to get you started: a counter that can go up or down. You can try it online here.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { h, app } from "https://unpkg.com/hyperapp"
app({
init: 0,
view: state =>
h("main", {}, [
h("h1", {}, state),
h("button", { onClick: state => state - 1 }, "-"),
h("button", { onClick: state => state + 1 }, "+")
]),
node: document.getElementById("app")
})
</script>
</head>
<body>
<main id="app"></main>
</body>
</html>
The app starts off with init
as the initial state. Our code doesn't explicitly maintain any state. Instead, we define actions to transform it and a view to visualize it. The view returns a plain object representation of the DOM known as a virtual DOM, and Hyperapp updates the real DOM to match it whenever the state changes.
Now it's your turn! Experiment with the code a bit. Spend some time thinking about how the view reacts to changes in the state. Can you add a button that resets the counter back to zero? Or how about multiple counters?
We love to talk JavaScript and Hyperapp. If you've hit a stumbling block, hop on the Hyperapp Slack or drop by Spectrum to get support, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll try to help you out.
Is anything wrong, unclear, missing? Help us improve this page.