HyperApp：機(jī)能豊富なWebアプリケーションを構(gòu)築するための合理化されたJavaScriptライブラリ

HyperAppは、機(jī)能が豊富なWebアプリケーションを構(gòu)築するための軽量のJavaScriptライブラリです。これは、他のライブラリに依存せずに、キー付き更新やライフサイクルイベントをサポートするVDOMエンジンと、國家管理への実用的でエルム風(fēng)のアプローチを組み合わせています。ソースコードサイズが最小化され、GZIP圧縮が約1kbです。

このチュートリアルでは、HyperAppを紹介し、いくつかのコードの例をすばやく開始するのに役立ちます。 HTMLとJavaScriptをある程度理解していると思いますが、他のフレームワークを使用した経験を持つ必要はありません。

キーポイント

• HyperAppは、開発者が約1kbのサイズの仮想DOMエンジンを組み合わせたWebアプリケーションを開発できるようにするコンパクトなJavaScriptライブラリです。
HyperAppで構(gòu)築されたアプリケーションは、単一の狀態(tài)オブジェクト、狀態(tài)を変更する操作、および狀態(tài)と操作をユーザーインターフェイスに変換するビューで構(gòu)成されています。狀態(tài)は、アプリケーションのデータモデルを記述し、不変である通常のJavaScriptオブジェクトです。
HyperAppは仮想DOMを使用します。これは、実際のDOMがどのように見えるかの説明であり、各レンダリングサイクルでゼロから作成されます。通常、変更する必要があるノードが少ないため、これは高効率をもたらします。
HyperAppは、JSX（動的HTMLを表すためのJavaScript言語拡張）で使用できます。また、window.hyperAppオブジェクトを介してグローバルに利用できるUNPKGのようなCDNからHyperAppをロードすることもできます。
HyperAppは、ReactやVueなどの他のライブラリと比較して簡単で、Webアプリケーションを構(gòu)築するための完全なソリューションであるためです。さらに、狀態(tài)関數(shù)としての視界の概念を開発し、ELMに觸発された狀態(tài)管理ソリューションを組み込みました。

hello world

まず、すべてのコンポーネントが一緒に動作することを示す簡単なデモンストレーションから始めます。このコードをオンラインで試すこともできます。

import { h, app } from "hyperapp";
// @jsx h

const state = { count: 0 };

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

const view = (state, actions) => (
  <div>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
);

app(state, actions, view, document.body);

これは、ほぼ各HyperAppアプリケーションがどのように見えるかです。単一の狀態(tài)オブジェクト、狀態(tài)を埋める操作、および狀態(tài)と操作をユーザーインターフェイスに変換するビューです。

関數(shù)內(nèi)では、狀態(tài)と操作をコピーし（所有していないオブジェクトを変更することは不名譽(yù)です）、それらをビューに渡します。また、州が変更されるたびにアプリケーションが再レンダリングされるように、アクションをラップします。

app

狀態(tài)は、アプリケーションデータモデルを記述する通常のJavaScriptオブジェクトです。また、不変です。それを変更するには、アクションを定義して呼び出す必要があります。

app(state, actions, view, document.body);

ビューでは、狀態(tài)のプロパティを表示し、それを使用して、UIのどの部分を表示または非表示にするかなどを決定できます。

const state = { count: 0 };

DOMイベントにアクションを添付したり、獨自のインラインイベントハンドラーでアクションを呼び出すこともできます。

<h1>{state.count}</h1>

import { h, app } from "hyperapp";
// @jsx h

const state = { count: 0 };

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

const view = (state, actions) => (
  <div>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
);

app(state, actions, view, document.body);

操作は州を直接変更するのではなく、州の新しいクリップを返します。アクションで狀態(tài)を変更してから返しようとすると、予想どおりにビューが送信されません。

app(state, actions, view, document.body);

appコールステータス更新視聴レンダリングサイクルに接続された操作オブジェクトを返します。また、このオブジェクトはビュー機(jī)能と操作で受け取ります。別のプログラム、フレームワーク、またはネイティブJavaScriptからアプリケーションと対話できるため、このオブジェクトを外の世界に公開することは非常に便利です。

const state = { count: 0 };

（コンテンツの殘りの部分は似ていますが、文は同義語と文の構(gòu)造の調(diào)整に置き換えられ、元の意味を変更せずに保ち、長さが長すぎます。

概要：

HyperAppは、非常に小さなサイズとシンプルなデザインを備えた効率的なWebアプリケーションを構(gòu)築するための軽量ソリューションを提供します。これは、學(xué)習(xí)しやすい機(jī)能と使用機(jī)能を維持しながら、州の管理と仮想DOMの強(qiáng)力な機(jī)能を提供します。 小規(guī)模なプロジェクトであろうと大規(guī)模なアプリケーションであろうと、HyperAppは効率的で柔軟な開発體験を提供できます。

（畫像は元の形式と位置のままです）

以上がHyperApp：フロントエンドアプリを構(gòu)築するための1 KB JavaScriptライブラリの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。