Kerangka Huex Manajemen Negara yang Menyenangkan

Pendahuluan

Saya selalu kagum pada berapa banyak tindakan yang perlu Anda lakukan untuk pengelolaan kerangka kerja negara - segera gambarkan skema, tulis mutasi, komit ... Mengapa tidak membuat semuanya sesederhana mungkin?)

Mengapa menulis kode ketika Anda tidak dapat menulisnya?

(diperbarui)
Saya persembahkan untuk Anda kerajinan setengah jam saya - Huex !

Sejauh ini, solusinya hanya tersedia di platform NodeJS, tapi saya pikir itu sudah cukup untuk presentasi.

Penafian: Huex ditulis oleh saya hanya untuk tujuan hiburan dan pendidikan dan tidak mengklaim sebagai kerangka kerja yang lengkap. Dan mungkin itu klaim. Sekarang ayo pergi.

Untuk apa ini?

Memiliki satu gudang data yang nyaman. Mampu memonitor perubahan mereka. Dia akan menyingkirkan kata-kata yang tidak bisa dimengerti seperti "getter", "mutators", "action", "commit", dll.

Bagaimana cara menginstalnya?

Sejauh ini, hanya dengan menyalin repositori ini .
Setelah repositori disalin, Anda perlu menghubungkannya melalui package.json dari proyek Anda di suatu tempat dalam formulir ini:

"dependencies": { "huex": "file:../huex/" } 

Setelah itu, akan tersedia sebagai modul huex.

Atau membuatnya lebih mudah, seperti yang dicatat dpr dengan benar:
npm i -S https://github.com/vssenko/huex.git

Bagaimana cara menggunakannya?

Sealami dan sesederhana mungkin. Mari kita mulai dengan kode:

 //  huex. const Huex = require('huex'); //  . const storage = Huex(); //     - . storage.on('change:a', (e) => console.log(`Property "a" was changed: ${e.value}`)); //      . storage.a = 5; 

Dan itu saja. Pada setiap perubahan \ pengaturan bidang penyimpanan kami, dua peristiwa akan dibuat: ubah dengan data {key, value} dan ubah: key dengan data {value}.
(diperbarui)
Dan untuk objek bersarang dan array, acara akan dibuat untuk objek bersarang dan orang tua.
Cukup untuk membuat proyek dengan kerumitan apa pun.

Mungkin sesuatu yang lain?

Tentu saja: Anda dapat membuat bidang yang sangat bersarang saat bepergian, dan tidak ada pengecualian yang akan dibuat.

 const Huex = require('huex'); const storage = Huex(); storage.abcde = 5; 

Dan tentu saja, event handler juga dapat digantung pada semua objek bersarang.

(diperbarui)

Mungkin sesuatu yang lain?

Ya! Sekarang Huex bekerja tidak hanya dengan data sederhana, tetapi juga dengan objek dan array, mengubah mereka menjadi repositori Huex saat bepergian!

  sut.subSut = { a: 5 }; sut.on('change:subSut', (e) => { console.log(e.key); // subSut console.log(e.value.a) // 10 console.log(e.nested); // { key: 'a', value: 10 } }); sut.subSut.a = 10; 

Bahkan lebih banyak contoh tersedia dalam tes proyek.

Apa yang menangkap?

Semua keajaiban ini diimplementasikan melalui Proxy . Ini bukan solusi tercepat, dan secara umum mereka tidak merekomendasikan menggunakan kelas Proxy dalam produksi.

(perbarui)

Kesimpulan

Untuk dua siklus pengembangan (malam hari), komunitas JS memiliki kerangka kerja lain yang menarik.
Apa yang dapat dilakukan Huex:

• Diinisialisasi dari objek \ array
• Simpan Nilai dengan Penugasan Sederhana
• Memicu peristiwa saat mengubah dirinya sebagai objek atau sebagai array
• Saat bepergian, ulangi objek / array yang ditulis di repositori Huex
• Memicu peristiwa saat mengubah bidang objek atau bidang array
• Saat bepergian, hasilkan penyimpanan kosong saat mengakses bidang yang tidak ada (fitur kontroversial, tapi sangat keren)

Yang Huex tidak tahu caranya:

• Cepat :-). Meskipun, seperti yang dicatat Drag13 , masih ada kemajuan menuju kecepatan Proxy, jadi tiba-tiba pendekatan ini akan menjadi populer.