授权协议: MIT
开发语言: JavaScript 查看源码 »
操作系统: 跨平台
收录时间: 2017-03-03
提 交 者: 达尔文

HyperApp 是一个用于构建前端应用的 JavaScript 库,体积十分轻量,仅 1KB。具有以下特性:

  1. 声明式:HyperApp 的设计基于 Elm Architecture。使用函数式范例创建可扩展的基于浏览器的应用程序。你不必学习一种新的语言。

  2. 自定义标签:使用自定义标签构建复杂的用户界面。自定义标签是无状态的,易于调试。

  3. Batteries-included:开箱即用,HyperApp 具有类 Elm 的状态管理和虚拟 DOM 引擎;但它仍然只有 1kb 的大小,没有依赖关系。

示例:Hello World

Hello World

Try it online

app({
  state: 0,
  view: (state, actions) => (
    <main>
      <h1>{state}</h1>
      <button onclick={actions.add}>+</button>
      <button onclick={actions.sub}>-</button>
    </main>
  ),
  actions: {
    add: state => state + 1,
    sub: state => state - 1
  }
})

简介

安装

npm i -S hyperapp

在 Node.js 中

import { h, app } from "hyperapp"

在浏览器中通过 CDN

const { h, app } = hyperapp

示例

Hello world

app({
    model: "Hi.",
    view: model => html`<h1>${model}</h1>`
})

Counter

app({
    model: 0,
    update: {
        add: model => model + 1,
        sub: model => model - 1
    },
    view: (model, msg) => html`
        <div>
            <button onclick=${msg.add}>+</button>
            <h1>${model}</h1>
            <button onclick=${msg.sub} disabled=${model <= 0}>-</button>
        </div>`
})

Input

app({
    model: "",
    update: {
        text: (_, value) => value
    },
    view: (model, msg) => html`
        <div>
            <h1>Hi${model ? " " + model : ""}.</h1>
            <input oninput=${e => msg.text(e.target.value)} />
        </div>`
})

Drag & Drop

const model = {
    dragging: false,
    position: {
        x: 0, y: 0, offsetX: 0, offsetY: 0
    }
}

const view = (model, msg) => html`
    <div
        onmousedown=${e => msg.drag({
            position: {
                x: e.pageX, y: e.pageY, offsetX: e.offsetX, offsetY: e.offsetY
            }
        })}
        style=${{
            userSelect: "none",
            cursor: "move",
            position: "absolute",
            padding: "10px",
            left: `${model.position.x - model.position.offsetX}px`,
            top: `${model.position.y - model.position.offsetY}px`,
            backgroundColor: model.dragging ? "gold" : "deepskyblue"
        }}
    >Drag Me!
    </div>`

const update = {
    drop: model => ({ dragging: false }),
    drag: (model, { position }) => ({ dragging: true, position }),
    move: (model, { x, y }) => model.dragging
        ? ({ position: { ...model.position, x, y } })
        : model
}

const subs = [
    (_, msg) => addEventListener("mouseup", msg.drop),
    (_, msg) => addEventListener("mousemove", e =>
        msg.move({ x: e.pageX, y: e.pageY }))
]

app({ model, view, update, subs })
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

HyperApp 的相关博客

【翻译】JavaScript框架的最终指南

翻译原文链接 我的翻译小站 <div class="markdown-body"> <p>紧跟JavaScript框架的脚步是一个挑战。现在有太多的框架,几乎一...

Hacker News 简讯 2020-06-30

最后更新时间: 2020-06-30 21:00 Hyperapp – The tiny framework for building web interfaces - (hyperapp.dev) hyperapp—...

Hacker News 简讯 2020-07-01

最后更新时间: 2020-07-01 23:02 Raspberry Pi 4 PCIe bridge “chip” - (zakkemble.net) Raspberry Pi 4 PCIe桥接“芯片” ...

【转帖】2019 前端框架对比及评测

2019 前端框架对比及评测 https://nextfe.com/frontend-frameworks-benchmark-2019/ 2019-04-16 Jacek Schae 原作,授权 Lean...

在同一基准下对前端框架进行比较[每日前端夜话0x58]

每日前端夜话0x58 每日前端夜话,陪你聊前端。 每天晚上18:00准时推送。 正文共:2543 字 预计阅读时间:6 分钟 翻译:疯狂的...

awesome-javascript

一系列令人敬畏的浏览器端JavaScript库,资源和闪亮的东西。 令人敬畏的JavaScript 包管理员 装载机 捆扎机 测试框架 QA工具 ...

https://github.com/sorrycc/awesome-javascript 清单

https://github.com/sorrycc/awesome-javascript 🐢 A collection of awesome browser-side JavaScript libraries, resourc...

HyperApp 的相关问答

还没有任何问答,马上提问

评论 (1)

加载中
打分: 力荐
仅 1KB
2017/07/31 22:13
回复
举报
更多评论
1 评论
50 收藏
分享
返回顶部
顶部