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

HyperApp: Perpustakaan JavaScript yang diselaraskan untuk membina aplikasi web yang kaya dengan ciri

HyperApp adalah perpustakaan JavaScript yang ringan untuk membina aplikasi web yang kaya dengan ciri. Ia menggabungkan pendekatan pragmatik, yang diilhamkan oleh ELM kepada pengurusan negeri dengan enjin VDOM yang menyokong kemas kini dan acara kitaran hayat-semuanya tanpa bergantung pada perpustakaan lain. Saiz kod sumber selepas ia diminimumkan dan GZIP dimampatkan adalah kira -kira 1kb.

Tutorial ini akan memperkenalkan anda kepada HyperApp dan membantu anda memulakan dengan cepat dengan beberapa contoh kod. Saya menganggap anda mempunyai pemahaman tentang HTML dan JavaScript, tetapi tidak perlu mempunyai pengalaman menggunakan rangka kerja lain.

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

kita akan bermula dengan demonstrasi mudah yang menunjukkan semua komponen yang berfungsi bersama -sama. Anda juga boleh mencuba kod ini dalam talian.

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 id="state-count">{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
);

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

Ini adalah kira -kira apa yang setiap aplikasi HyperApp kelihatan seperti: objek negara tunggal, operasi yang mengisi negeri, dan pandangan yang menukarkan keadaan dan operasi ke antara muka pengguna.

Di dalam fungsi

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

Negeri adalah objek JavaScript biasa yang menerangkan model data aplikasi anda. Ia juga tidak berubah. Untuk mengubahnya, anda perlu menentukan tindakan dan memanggilnya.

const state = { count: 0 };

Dalam pandangan, anda boleh memaparkan sifat Negeri, menggunakannya untuk menentukan bahagian -bahagian UI yang harus dipaparkan atau tersembunyi, dan lain -lain.

<h1 id="state-count">{state.count}</h1>

anda juga boleh melampirkan tindakan ke acara DOM, atau memanggil tindakan dalam pengendali acara inline anda sendiri.

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 id="state-count">{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)

Ringkasan: HyperApp menyediakan penyelesaian ringan untuk membina aplikasi web yang cekap dengan saiz yang sangat kecil dan reka bentuk mudah. Ia menyediakan ciri-ciri yang kuat dalam pengurusan negeri dan DOM maya sambil mengekalkan ciri-ciri mudah dan menggunakan. Sama ada projek kecil atau aplikasi yang besar, HyperApp dapat memberikan pengalaman pembangunan yang cekap dan fleksibel.

(gambar tetap menjadi format asal dan kedudukan tidak berubah)

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!