hyperapp 共享_Hyperapp快速入门

最新推荐文章于 2024-08-15 09:39:54 发布

cukw6666

最新推荐文章于 2024-08-15 09:39:54 发布

阅读量1.1k

点赞数

文章标签： java python vue react web ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/js-hyperapp

版权

hyperapp 共享

Hyperapp is a very small micro-framework used to build declarative web applications. It’s only 1kB in size and the API is similar to React’s, perfect, right?! We’ll build a small counter app to demonstrate how Hyperapp works.

Hyperapp是用于构建声明性Web应用程序的非常小的微框架。它只有1kB的大小，而且API与React的API相似，完美吗？我们将构建一个小型计数器应用程序，以演示Hyperapp的工作方式。

新的超级项目 (New Hyper project)

To get started, we can create a new Node application and install hyperapp. We’ll then serve this application using parcel:

首先，我们可以创建一个新的Node应用程序并安装hyperapp 。然后，我们将使用包裹服务此应用程序：

# New directory, here we call it `hyper`
$ mkdir hyper && cd hyper

# Initialise Node project
$ npm init -y

# Install Hyperapp
$ npm i hyperapp

# Create index.html and app.js
$ touch index.html
$ touch app.js

# Install `parcel` globally
$ npm i parcel -g

# Serve our application in the browser
$ parcel index.html

We can then draft out a standard index.html page that includes app.js which will contain our hyperapp code.

然后，我们可以草拟一个包含app.js的标准index.html页面，该页面将包含我们的hyperapp代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>🎉 Hyperapp</title>
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

建立柜台 (Building a Counter)

State-driven applications always start with a Counter example. This allows us to get used to how the data flows within our application. Let’s start off by defining some state:

状态驱动的应用程序始终以Counter示例开头。这使我们能够习惯数据在应用程序中的流动方式。让我们从定义一些state ：

app.js

const state = {
  count: 0
}

We can then define a view based on that state. This can be displayed by using standard template syntax:

然后，我们可以基于该state定义view 。可以使用标准模板语法来显示：

app.js

// ...
const view = state => (
  <div>
    <h1>{state.count}</h1>
  </div>
);

Finally, we can attach this to a particular element inside of the DOM. I’ve elected to add this to a div with the id of app:

最后，我们可以将其附加到DOM内部的特定元素。我选择将其添加到id为app的div中：

app.js

// ...
const el = document.getElementById('app');

const main = app(state, {}, view, el);

Here’s what our simple app looks like:

这是我们简单的应用程序的外观：

As state is immutable and should not be directly updated, we can now add actions to manipulate our state like so:

由于state是不可变的，不应直接更新，因此我们现在可以添加actions来操纵state如下所示：

app.js

// ...
const actions = {
  increment: () => state => ({ count: (state.count += 1) }),
  decrement: () => state => ({ count: (state.count -= 1) })
};

This can be wired-up inside of our main and view to give it access to our actions:

可以将它连接到我们的main内部，并view它以访问我们的actions ：

app.js

// ...
const view = (state, actions) => (
  <div>
    <h1>{state.count}</h1>
    <button onclick={() => actions.increment()}>Increment</button>
    <button onclick={() => actions.decrement()}>Decrement</button>
  </div>
);

const main = app(state, actions, view, el);

Now if we select Increment or Decrement, we’ll see the total count go up or down.

现在，如果选择“增量”或“减量”，我们将看到总数增加或减少。

What if we wanted to make this go up or down by a particular number? Let’s add this functionality.

如果我们想使它上升或下降一个特定的数字怎么办？让我们添加此功能。

Firstly, we can add a new item to our state object. I’ve elected to call this diff, as this represents the difference between to added or subtracted:

首先，我们可以向state对象添加一个新项。我选择将其称为diff ，因为这表示要添加或减去之间的差异：

const state = {
  count: 1,
  diff: 1
};

Then, we can update our actions to increment or decrement based on this:

然后，我们可以根据以下内容更新actions以增加或减少：

const actions = {
  updateCount: diff => state => ({ diff: diff }),
  increment: diff => state => ({ count: (state.count += Number(diff)) }),
  decrement: diff => state => ({ count: (state.count -= Number(diff)) })
};

And finally, we can update our view:

最后，我们可以更新view ：

const view = (state, actions) => (
  <div>
    <input value={state.diff} oninput={e => actions.updateCount(e.target.value)} />

    <h1>{state.count}</h1>
    <button onclick={() => actions.increment(state.diff)}>Increment</button>
    <button onclick={() => actions.decrement(state.diff)}>Decrement</button>
  </div>
);

Now we have the ability to take advantage of input data to update our state.

现在，我们可以利用输入数据来更新状态。

组件 (Components)

Let’s now look at how we can make components out of our Hyperapp project. We’ll make a Counter component and look at how we can embed this inside of a Page and route.

现在让我们看一下如何从Hyperapp项目中制作组件。我们将创建一个Counter组件，并研究如何将其嵌入到Page和route中。

Create a new file at components/Count.js and add a counter that takes in a count from props:

在components/Count.js处创建一个新文件，并添加一个接受props count的计数器：

Count.js

import { h } from 'hyperapp';

const Count = ({ count }) => <h1>{count}</h1>;

export default Count;

We can then import this inside of app.js:

然后，我们可以将其import app.js ：

app.js

import Count from './components/Count';

// ...

Then we can pass the count in as props to our Count within the view:

然后我们可以将count作为道具传递给view的Count ：

app.js

// ...
const view = () => (state, actions) => (
  <div>
    <Count count={state.count} />
    <button onclick={actions.increment}>Increment</button>
    <button onclick={actions.decrement}>Decrement</button>
  </div>
);

I’ve also updated our state and actions to be a simple increment and decrement of count:

我还更新了state和actions ，使其成为对count的简单increment和decrement ：

const state = {
  count: 0
};

const actions = {
  increment: () => ({ count: (state.count += 1) }),
  decrement: () => ({ count: (state.count -= 1) })
};

路由 (Routing)

We can also take advantage of routing within Hyperapp. Let’s install the router package (@hyperapp/router) like so:

我们还可以利用Hyperapp中的路由功能。让我们像这样安装路由器软件包( @hyperapp/router )：

$ npm i @hyperapp/router

We can then import the routing components inside of app.js:

然后，我们可以将路由组件import app.js ：

app.js

import { Link, Route, location } from '@hyperapp/router';

Now we can create two different pages, Home and Blog:

现在我们可以创建两个不同的页面， Home和Blog ：

app.js

// ...
const Home = () => (state, actions) => (
  <div>
    <Count count={state.count} />
    <button onclick={actions.increment}>Increment</button>
    <button onclick={actions.decrement}>Decrement</button>
  </div>
);

const Blog = () => <h1>Blog!</h1>;

The Home page contains our counter example from before, and the Blog page is simply just some text. Let’s assign these as a Route and Link and inside of the view:

Home包含我们之前的反例，而Blog页面仅是一些文本。让我们将它们分配为Route and Link并在view内部：

app.js

// ...
const view = state => (
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/blog">Blog</Link>
      </li>
    </ul>

    <Route path="/" render={Home} />
    <Route path="/blog" render={Blog} />
  </div>
);

Next, we need to give the router access to the location, as it’s based off the History API. Add the following to your state and actions:

接下来，我们需要授予路由器访问location权限，因为它基于History API。将以下内容添加到您的state和actions ：

app.js

const state = {
  location: location.state,
  count: 0
};

const actions = {
  location: location.actions,
  increment: () => state => ({ count: (state.count += 1) }),
  decrement: diff => state => ({ count: (state.count -= 1) })
};

Finally, we need to subscribe to the location itself:

最后，我们需要订阅location本身：

app.js

// ...
const unsubscribe = location.subscribe(main.location);

Now we’re able to select between different pages inside of our application!

现在，我们可以在应用程序内的不同页面之间进行选择！

Here’s the full code for the routing example:

这是路由示例的完整代码：

app.js

import { h, app } from 'hyperapp';
import { Link, location } from '@hyperapp/router';

import Count from './components/Count';

const state = {
  location: location.state,
  count: 0
};

const actions = {
  location: location.actions,
  increment: () => state => ({ count: (state.count += 1) }),
  decrement: diff => state => ({ count: (state.count -= 1) })
};

const Home = () => (state, actions) => (
  <div>
    <Count count={state.count} />
    <button onclick={actions.increment}>Increment</button>
    <button onclick={actions.decrement}>Decrement</button>
  </div>
);

const Blog = () => <h1>Blog!</h1>;

const view = state => (
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/blog">Blog</Link>
      </li>
    </ul>

    <Route path="/" render={Home} />
    <Route path="/blog" render={Blog} />
  </div>
);

const main = app(state, actions, view, document.body);

const unsubscribe = location.subscribe(main.location);