HyperApp: Perpustakaan 1 kb JavaScript untuk membina aplikasi front-end

mata utama

HyperApp adalah perpustakaan JavaScript padat yang membolehkan pemaju membina aplikasi web yang menggabungkan pengurusan negeri dengan enjin DOM maya, dengan saiz kira -kira 1kb.
Aplikasi yang dibina dengan HyperApp terdiri daripada objek negara tunggal, operasi yang mengubah keadaan, dan pandangan yang menukar keadaan dan operasi ke antara muka pengguna. Negeri adalah objek JavaScript biasa yang menggambarkan model data aplikasi dan tidak berubah.
HyperApp menggunakan DOM maya, yang merupakan penerangan tentang apa yang kelihatan seperti DOM, dicipta dari awal dalam setiap kitaran rendering. Ini membawa kecekapan yang tinggi, kerana biasanya terdapat hanya beberapa nod yang perlu diubah.
HyperApp boleh digunakan dengan JSX (lanjutan bahasa JavaScript untuk mewakili HTML dinamik) atau bersendirian. Anda juga boleh memuatkan HyperApp dari CDN seperti UNPKG, yang akan tersedia secara global melalui objek Window.HyperApp.
HyperApp lebih mudah berbanding dengan perpustakaan lain seperti React atau Vue kerana ia kecil dan merupakan penyelesaian lengkap untuk membina aplikasi web. Ia selanjutnya membangunkan konsep pandangan sebagai fungsi negara dan mempunyai penyelesaian pengurusan negeri terbina dalam yang diilhamkan oleh ELM.

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);

, kami menyalin negeri dan operasi anda (tidak sopan untuk mengubahsuai objek yang tidak kita miliki) dan lulus mereka ke pandangan. Kami juga membungkus tindakan anda supaya permohonan itu diberikan semula setiap kali keadaan berubah. app

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

const state = { count: 0 };

<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);

Operasi tidak akan secara langsung mengubah keadaan, tetapi akan mengembalikan klip baru Negeri. Jika anda cuba mengubah suai keadaan dalam tindakan dan kemudian mengembalikannya, pandangan itu tidak akan menyerahkan semula seperti yang anda harapkan.

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

app Panggilan Pulangan Objek Operasi yang disambungkan ke kitaran rendering kemas kini status. Anda juga menerima objek ini dalam fungsi dan operasi. Ia sangat berguna untuk mendedahkan objek ini ke dunia luar kerana ia membolehkan anda berinteraksi dengan aplikasi anda dari program lain, rangka kerja, atau JavaScript asli.

const state = { count: 0 };

(seluruh kandungannya sama, tetapi ayat diganti sinonim dan pelarasan struktur kalimat, menjaga makna asal tidak berubah, dan panjangnya terlalu panjang, ditinggalkan di sini)

Atas ialah kandungan terperinci HyperApp: Perpustakaan 1 kb JavaScript untuk membina aplikasi front-end. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!