Pengurusan Negeri Mudah di JavaScript dengan Negeri Pengasuh

Nanny State: Perpustakaan Pengurusan Negeri Vanila JS yang diselaraskan

Nanny State adalah perpustakaan mini yang direka untuk memudahkan proses membina aplikasi web berasaskan negeri menggunakan JavaScript asli. Ia sama dengan React, tetapi dengan kurang overhead, tidak perlu mempelajari sintaks baru. Ia menggunakan satu objek keadaan seluruh aplikasi dan bukannya membiarkan setiap komponen mempunyai keadaan sendiri. Ia diilhamkan oleh HyperApp dan mempunyai banyak persamaan dengan ELM.

Artikel ini akan menjelaskan bagaimana Nanny State berfungsi dan menunjukkan fungsinya dengan beberapa contoh.

Mata Utama:

1. Pengenalan Negeri Nanny: Nanny State adalah perpustakaan minimalis untuk membina aplikasi web berasaskan negeri menggunakan JavaScript asli, yang lebih mudah dan kurang overhead daripada bertindak balas. Ia menggunakan satu objek negeri yang luas, bukannya satu keadaan setiap komponen, yang diilhamkan oleh HyperApp dan ELM, dan direka untuk menjadi mudah untuk diterima pakai tanpa mempelajari sintaks baru. Model aliran data satu arah:
Perpustakaan ini didasarkan pada model aliran data sehala dan terdiri daripada tiga bahagian teras: keadaan (objek yang memegang semua data aplikasi), dan lihat (an pulangan berdasarkan keadaan semasa). Model ini menekankan kesederhanaan, dengan objek negara sebagai satu -satunya sumber fakta, memastikan determinisme, konsistensi, dan ramalan tingkah laku aplikasi.
2. Contoh dan Skalabiliti Praktikal: dengan contoh praktikal (termasuk aplikasi asas "Hello Nanny State" dan permainan Q & A yang benar dan palsu), artikel itu menunjukkan bangunan dinamik, responsif dengan kesederhanaan dan kecekapan negara pengasuh aplikasi web gaya. Mempamerkan potensi perpustakaan untuk membuat aplikasi interaktif dengan kod minimum, serta cadangan untuk memperluaskan permainan Q & A, menonjolkan kepelbagaian dan sokongan Nanny State untuk ciri -ciri canggih seperti penyimpanan dan penghalaan tempatan.
3. aliran data sehala Nanny State menggunakan model aliran data sehala, yang terdiri daripada tiga bahagian:

Negeri:

Objek yang menyimpan semua data aplikasi.

• Lihat (Lihat): Fungsi yang mengembalikan rentetan HTML berdasarkan keadaan semasa.
• Kemas kini: Satu-satunya fungsi yang boleh mengubah keadaan dan membuat semula pandangan.
• Dalam keadaan pengasuh, keadaan adalah segalanya. Objek Negeri adalah satu -satunya sumber fakta untuk aplikasi -setiap bahagian data aplikasi adalah harta benda ini. Malah pengendali acara yang digunakan dalam pandangan adalah sifat objek negara.
Lihat adalah perwakilan negara sebagai HTML. Ia berubah apabila keadaan berubah dan membolehkan pengguna berinteraksi dengan aplikasi.

Fungsi kemas kini adalah satu -satunya cara untuk mengubah keadaan. Ia adalah satu titik masuk untuk mengemas kini keadaan dan memastikan perubahan adalah deterministik, konsisten, dan boleh diramal.

Membina permohonan negara pengasuh hanya memerlukan ketiga -tiga bahagian ini. Malah, ia boleh diringkaskan seperti berikut tiga soalan:

1. data apa yang perlu disimpan oleh aplikasi saya? Ini akan membentuk sifat objek negara.
2. bagaimana saya mahu data aplikasi diberikan pada halaman? Ini akan membantu anda membuat fungsi pandangan.
3. Bagaimanakah data aplikasi akan berubah apabila pengguna berinteraksi dengan aplikasi? Untuk tujuan ini, fungsi perlu dikemas kini.

Hello Nanny State!

Cara paling mudah untuk memahami bagaimana kerja -kerja Nanny State adalah untuk menulis beberapa kod! Kami akan bermula dengan contoh asas dan cuba membuat sesuatu yang lebih kompleks.

Cara paling mudah untuk menjalankan contoh berikut ialah menggunakan editor kod dalam talian seperti Codepen, atau anda boleh menjalankannya secara tempatan dengan memasang pakej Nanny-State menggunakan NodeJS.

Salin kod berikut ke bahagian JS Codepen:

<code class="language-javascript">import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`;

const State = {
  name: "Nanny State",
  View
};

const Update = Nanny(State);</code>

Ini menunjukkan bagaimana tiga bahagian negara pengasuh bekerja bersama -sama. Mari kita lihat dengan lebih dekat setiap bahagian:

<code class="language-javascript">const View = state => html`<h1>Hello ${state.name}</h1>`;</code>

Nanny State menggunakan μhtml untuk menjadikan HTML. Fungsi paparan selalu menerima objek negara sebagai parameter yang unik . Ia kemudian menggunakan fungsi HTML yang disediakan oleh μHTML untuk membuat HTML berdasarkan literasi templat yang disediakan sebagai parameter.

Menggunakan literals templat bermakna kita boleh memasukkan sifat -sifat keadaan ke dalam pandangan menggunakan simbol

. Dalam contoh ini, kami menggunakannya untuk memasukkan nilai atribut nama ke dalam elemen ${variable}. <h1></h1>

<code class="language-javascript">const State = {
  name: "Nanny State",
  View
};</code>

Objek Negeri adalah di mana semua data aplikasi disimpan. Ia mengandungi sebarang atribut dan nilai yang akan dipaparkan dalam pandangan yang mungkin berubah sepanjang hayat permohonan, seperti atribut nama dalam contoh ini.

Sila ambil perhatian bahawa pandangan juga merupakan harta negara menggunakan notasi singkatan objek. Ingat

status adalah segala -galanya - Setiap bahagian permohonan adalah harta Negeri.

<code class="language-javascript">const Update = Nanny(State);</code>

baris terakhir mentakrifkan fungsi kemas kini sebagai nilai pulangan fungsi pengasuh. Ini kini boleh digunakan untuk mengemas kini nilai mana -mana harta Negeri. Malah, ini adalah satu -satunya cara untuk mengemas kini mana -mana harta negara. Ia juga melakukan rendering awal pandangan berdasarkan nilai yang disediakan dalam keadaan. Ini bermakna tajuk akan dipaparkan dengan perkataan "Hello Nanny State" seperti yang ditunjukkan dalam codepen di bawah:

... (Kandungan berikutnya adalah serupa dengan teks asal, kecuali bahasa dan ekspresi diselaraskan, teks asal tidak berubah, dan semua gambar dan formatnya dikekalkan.)

Atas ialah kandungan terperinci Pengurusan Negeri Mudah di JavaScript dengan Negeri Pengasuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!