Bina senarai tugasan dengan HyperApp, rangka kerja mikro 1KB JS

Tutorial ini membimbing anda melalui membina aplikasi senarai tugasan menggunakan HyperApp, rangka kerja JavaScript yang ringan. Sesuai bagi mereka yang ingin meneroka prinsip -prinsip pengaturcaraan fungsional tanpa terjejas dalam kerumitan.

populariti HyperApp berpunca daripada pendekatan pragmatik dan saiz minuscule (1.4 kb), memberikan prestasi yang setanding dengan React dan Redux.

Konsep Utama:

HyperApp's Triad:

Pusat HyperApp sekitar tiga komponen teras: keadaan (sumber data tunggal yang tidak berubah), tindakan (fungsi tulen mengemas kini keadaan), dan pandangan (fungsi yang menjadikan UI berdasarkan negara) .
• maya dom:
HyperApp memanfaatkan DOM maya untuk kemas kini UI yang cekap, sama dengan React.
• Pengurusan Negeri:
Pengurusan negaranya menyerupai redux, memudahkan pengendalian data.
• Tutorial Tutorial: Tutorial ini merangkumi membuat, melengkapkan, dan memadam item tugasan, menggambarkan mekanik teras HyperApp.
• Tindakan Murni: Tindakan adalah fungsi murni, memastikan peralihan keadaan yang boleh diramal dan kebolehubahan.
• Aplikasi web interaktif: Tutorial menunjukkan keupayaan HyperApp untuk membina aplikasi web interaktif.
• Apa itu HyperApp?

HyperApp membina aplikasi web dinamik, satu halaman menggunakan DOM maya untuk kemas kini UI yang cepat (seperti React) dan objek negara tunggal (seperti Redux) untuk pengurusan negeri yang diperkemas. Yayasannya diilhamkan oleh seni bina Elm.

tiga bahagian utama Hyperapp:

Negeri:

pokok objek tunggal menyimpan semua data aplikasi.

• Tindakan: fungsi mengubah keadaan.
• Lihat: Fungsi yang kembali nod maya (menterjemahkan ke HTML), menggunakan JSX atau templat yang serupa, mengakses kedua -dua keadaan dan tindakan.
• Bermula (menggunakan codepen):

Tetapkan preprocessor JavaScript ke Babel di Codepen. Import HyperApp:

1. import
dan
2. : https://unpkg.com/hyperapp
3. Dayakan JSX: app h const { h, app } = hyperapp; Inisialisasi aplikasi:
4. /** @jsx h */
5. Membina aplikasi senarai tugasan (hyperlist): const main = app(state, actions, view, document.body);

tutorial kemudian membimbing anda melalui membina aplikasi senarai tugasan langkah demi langkah, meliputi:

• keadaan awal dan paparan: Menentukan keadaan awal (items, input) dan struktur pandangan asas.
• Menambah Tugas: Mewujudkan Tindakan () Untuk menambah tugas baru ke senarai, mengemas kini keadaan dengan kuat. add
• Tugas menandakan sebagai lengkap: Melaksanakan tindakan () untuk menukar status toggle tugas. completed
• Menghapus tugas: Menambah tindakan () untuk menghapuskan tugas individu. destroy
• membersihkan tugas yang telah siap: Mewujudkan tindakan () untuk menghapuskan semua tugas yang telah siap. clearAllCompleted

Tutorial menyediakan coretan kod untuk setiap langkah, termasuk komponen untuk menambahkan item (

) dan memaparkan item senarai (AddItem), dan penjelasan terperinci mengenai tindakan dan fungsi mereka. Ia menekankan penggunaan fungsi tulen dan kemas kini keadaan yang tidak berubah sepanjang proses. ListItem

Kesimpulan:

Tutorial menyimpulkan dengan meringkaskan proses dan menggalakkan penerokaan keupayaan dan sumber HyperApp selanjutnya, termasuk dokumentasi, kod sumber, dan sokongan komuniti. Ia juga mencadangkan peningkatan masa depan kepada aplikasi senarai tugasan. Bahagian akhir menangani soalan yang sering ditanya mengenai HyperApp dan penggunaannya dalam membina senarai tugasan.

Atas ialah kandungan terperinci Bina senarai tugasan dengan HyperApp, rangka kerja mikro 1KB JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!