Hyperapp是一个用于开发Web应用程序前端(主要是View部分)的现代JavaScript库,它的大小仅有1.3kB,并且非常容易上手。
Hyperapp的架构借鉴了React、Redux以及Elm,支持JSX同时也提供了一些JSX的替代方案,比如h函数(Hyperapp的首字母)、hyperapp/html、hyperx、t7。
Hyperapp的初衷就是以尽量少的代码做尽量多的事。但Hyperapp虽小,仍然包含了状态管理、虚拟DOM引擎,所有这些都是独立实现,不依赖于任何第三方库的。
导入使用CDN不指定版本 <script src="https://unpkg.com/hyperapp"></script> 指定版本 <script src="https://unpkg.com/hyperapp@1.0.1"></script> HelloWordHyperapp可以使用JSX表示法,以及基于ES6字符串模板的Hyperx表示法。下面两种写法的代码都准备好了,您可以根据自己的喜好自由选用。
使用JSX<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://unpkg.com/babel-standalone"></script> <script type="text/babel"> const { h, app } = hyperapp /** @jsx h */ const state = { greeting: "Hello,world" } const actions = {} const view = state => <h1 id="title">{state.greeting}</h1> app(state, actions, view, document.body) </script> </body> 使用Hyperx<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://wzrd.in/standalone/hyperx"></script> <script> const { h, app } = hyperapp const html = hyperx(h) const state = { greeting: "Hello,world" } const actions = {} const view = state => html`<h1 id="title">${state.greeting}</h1>` app(state, actions, view, document.body) </script> </body>浏览器中会发生什么呢?
浏览器通过CDN下载了Hyperx和JSX,编译并渲染<script>部分,最终在页面上显示了“hello,world”。