إطار إدارة الدولة المرح Huex

مقدمة

لقد كنت مندهشًا دائمًا من عدد الإجراءات التي تحتاج إلى القيام بها لإدارة حالة الأطر - وصف المخطط على الفور ، وكتابة الطفرات ، وتنفيذها ... لماذا لا تجعل كل شيء بسيطًا قدر الإمكان؟)

لماذا تكتب الرمز عندما لا تستطيع كتابته؟

(محدث)
أقدم لكم مركبتي نصف ساعة - Huex !

حتى الآن ، الحل متاح فقط على منصة NodeJS ، لكني أعتقد أنه سيكون كافيًا للعرض التقديمي.

إخلاء المسؤولية: كتبت Huex بواسطتي لأغراض ترفيهية وتعليمية فقط ولا تدعي أنها إطار عمل متكامل. وربما تدعي. الآن دعنا نذهب.

ما هو؟

امتلاك مستودع بيانات واحد مناسب. تكون قادرة على مراقبة التغييرات. سوف يتخلص من الكلمات غير المفهومة مثل "getters" ، "mutators" ، "إجراءات" ، "ارتكاب" ، إلخ.

كيفية تثبيته؟

حتى الآن ، فقط عن طريق نسخ هذا المستودع.
بعد نسخ المستودع ، تحتاج إلى توصيله عبر package.json من مشروعك في مكان ما في هذا النموذج:

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

بعد ذلك ، سيكون متاحًا كوحدة huex.

أو اجعل الأمر أسهل ، كما لاحظ dpr بشكل صحيح:
npm i -S https://github.com/vssenko/huex.git

كيفية استخدامه؟

طبيعية وبسيطة قدر الإمكان. لنبدأ على الفور بالكود:

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

هذا كل ما في الأمر. في أي تغيير \ إعداد لمجال التخزين لدينا ، سيتم إنشاء حدثين: التغيير بالبيانات {المفتاح والقيمة} والتغيير: المفتاح بالبيانات {القيمة}.
(محدث)
وبالنسبة للكائنات والمصفوفات المتداخلة ، سيتم إنشاء الأحداث لكل من الكائن المتداخل والأصل.
يكفي لإنشاء مشاريع بأي تعقيد.

ربما شيء آخر؟

بالطبع: يمكنك إنشاء حقول متداخلة تمامًا أثناء التنقل ، ولن يتم إنشاء أي استثناءات.

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

وبالطبع ، يمكن أيضًا تعليق معالجات الأحداث على كافة الكائنات المتداخلة.

(محدث)

ربما شيء آخر؟

نعم فعلا! يعمل Huex الآن ليس فقط مع البيانات البسيطة ، ولكن أيضًا مع الكائنات والمصفوفات ، وإعادة تشكيلها في مستودعات Huex أثناء التنقل!

  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; 

تتوفر المزيد من الأمثلة في اختبارات المشروع.

ما هو الصيد؟

يتم تنفيذ كل هذا السحر من خلال الوكيل . هذا ليس الحل الأسرع ، وبشكل عام لا ينصحون باستخدام فئة الوكيل في الإنتاج.

(تحديث)

الخلاصة

لدورتين تطوير (المساء) ، مجتمع JS لديه إطار آخر مثير للاهتمام.
ما يمكن أن تفعله Huex:

• تمت التهيئة من الكائن \ الصفيف
• حفظ القيم عن طريق التعيين البسيط
• قم بتشغيل الأحداث عند تغيير نفسها ككائن أو كصفيف
• أثناء التنقل ، أعد العناصر / المصفوفات المكتوبة إليها في مستودعات Huex
• قم بتشغيل الأحداث عند تغيير حقل كائن أو حقل صفيف
• أثناء التنقل ، قم بإنشاء مخازن فارغة عند الوصول إلى حقل غير موجود (ميزة مثيرة للجدل ، ولكنها رائعة جدًا)

ما هو Huex لا يعرف كيف:

• كن سريعًا :-). على الرغم من أنه ، كما أشار Drag13 ، لا يزال هناك تقدم نحو سرعة الوكيل ، لذلك فجأة سيصبح هذا النهج شائعًا.