htmx - htmx - HTML用の高出力ツール

( htmx - high power tools for HTML)

Created at: 2020-04-14 00:17:51
Language: JavaScript
License: BSD-2-Clause

</> htmx

HTML用の高出力ツール

不和 ネトリファイ バンドル恐怖症 バンドル恐怖症

紹介

htmx では、属性を使用して AJAX、CSS トランジションWebSocket、およびサーバー送信イベントに HTML で直接アクセスできるため、ハイパーテキストのシンプルさとパワーを備えた最新のユーザー インターフェイスを構築できます

htmxは小さく(〜10k分.gz'd)、依存関係なし拡張可能、IE11互換

モチベーション

  • なぜHTTPリクエストだけを行う必要があり、HTTPリクエストを作成できるのですか?
    <a>
    <form>
  • なぜ&イベントだけがそれらをトリガーする必要があるのですか?
    click
    submit
  • なぜGETとPOSTのみが利用可能であるべきですか?
  • なぜあなたは画面全体を置き換えることしかできないべきですか?

これらの任意の制約を取り除くことで、htmx は HTML をハイパーテキストとして完成させます。

クイックスタート

  <script src="https://unpkg.com/htmx.org@1.8.2"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

hx-post 属性と hx-swap 属性は htmx に次のように指示します。

"ユーザーがこのボタンをクリックしたら、/clickedにAJAXリクエストを発行し、ボタン全体を応答に置き換えます"

htmxはインタークーラーの後継機.js

ノード・パッケージとしてのインストール

npmを使用してインストールするには:

npm install htmx.org --save

という古い壊れたパッケージがあることに注意してください。これは。

htmx
htmx.org

ウェブサイトとドキュメント

貢献

  • IE 11の互換性のためにES5でテストを含むコードを書いてください
  • テスト ケースを /test に、ドキュメントを /www に含めてください
  • 機能を追加する場合は、代わりに拡張機能として実行して、コアhtmxコードを整頓することを検討してください
  • 開発プルリクエストはブランチに対して行う必要があり、ドキュメントの修正はブランチに対して直接行うことができます
    dev
    master
  • 時間がありません。その後、スポンサーになる

ハッキングガイド

htmx をローカルに開発するには、開発の依存関係をインストールする必要があります。ノード 15 を使用して、次のコマンドを実行します。

npm install

次に、ルートで Web サーバーを実行します。これはPythonで最も簡単です:

python3 -m http.server

その後、次の場所に移動してテスト スイートを実行できます。

http://0.0.0.0:8000/test/

この時点で、機能を追加するように変更し、 の下の適切な領域にテストを追加できます。

/src/htmx.js
/test

  • /test/index.html
    - 他のすべてのテストが含まれているルートテストページ
  • /test/attributes
    - 属性固有のテスト
  • /test/core
    - コア機能テスト
  • /test/core/regressions.js
    - 回帰テスト
  • /test/ext
    - 拡張テスト
  • /test/manual
    - 自動化できない手動テスト

htmxは、モカテストフレームワーク、チャイアサーションフレームワーク、シノンを使用してAJAXリクエストをモックアウトします。彼らはすべてOKです。

俳句

javascriptの疲労:
すでに手元にあるハイパーテキスト
への憧れ