إذا كنت ترغب في تحسين الجودة الشاملة للتعليمات البرمجية الخاصة بك، فقد ترغب في الاحتفاظ بنماذج البيانات الخاصة بك منفصلة بدقة عن طرق العرض الأساسية.

تمكّنك أطر العمل التفاعلية أو مكتبات واجهة المستخدم مثل Rimmel.js، التي تتمتع بدعم كامل للعناصر القابلة للملاحظة، من تحديد نماذجك على أنها تدفقات يمكن ملاحظتها (على سبيل المثال: بيانات بسيطة واردة وتدفقات بيانات صادرة) بالإضافة إلى تصميم غير معروف النمط وهو محول الحدث.

تساعدك محولات الأحداث على تعيين أي أحداث مصدر (على سبيل المثال: MouseEvent الخاص بـ DOM، وPointerEvent، وKeyboardEvent، وما إلى ذلك) إلى التنسيق المستخدم فعليًا بواسطة نماذج البيانات الخاصة بك، لذلك سيتم تحريرها من مهمة التحويل هذه وسيتم فصلها في النهاية عن واجهة المستخدم.

يُسهل Rimmel ربط هذا التدفق بـ DOM:

import { rml } from 'rimmel';

const component = () => {
  const total = new Subject().pipe(
    map(x => doSomethingWith(x)),
  );

  return rml`
    click me
    
${stream}
  `;
}

الارتباط تافه: تقوم Rimmel بتوصيل أحداث النقر القادمة من الزر مباشرةً إلى الدفق الذي يمكن ملاحظته، والذي سيتلقى مثيلات PointerEvent في كل مرة يتم النقر فوق الزر.

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

import { scan } from 'rxjs';
import { rml } from 'rimmel';

const component = () => {
  const total = new BehaviorSubject(0).pipe(
    scan((old, new) => old new, 0),
  );

  return rml`
    inc
    dec

    
${total}
  `;
}

يعمل هذا، ولكن جزء القالب يتضمن بعض المنطق، وهو نمط مضاد. من الناحية المثالية، يجب أن نسعى جاهدين للحصول على قوالب أقل منطقًا لتحقيق أقصى قدر من قابلية الاختبار بشكل عام.

لذا، مع Rimmel 1.2، لديك ميزة جديدة، وهي Event Mappers، والتي تساعد تمامًا في ذلك. إنها تساعدك على ربط أحداث DOM بما يحتاجه نموذجك، بحيث يمكنك إبقاء المنطق منفصلاً تمامًا عن القالب. وإليك كيف يعمل.

import { map, scan } from 'rxjs';
import { rml, reversePipe } from 'rimmel';

const Inc = reversePipe(map(() => 1));
const Dec = reversePipe(map(() => -1));
const component = () => {
  const total = new BehaviorSubject(0).pipe(
    scan((old, new) => old new, 0),
  );

  return rml`
    inc
    dec

    
${total}
  `;
};

reversePipe هي الإضافة المبتكرة هنا: أداة إنشاء خط أنابيب تعمل عكس وظيفة Pipe() في RxJS. في حين أن الأخير يطبق التحويلات على مخرجات الدفق، فإن ReversePipe() يطبقها على المدخلات.
بهذه الطريقة تكون متأكدًا من أن الموضوع/BehaviorSubject/Observer/EventListener الخاص بك يحصل دائمًا على البيانات بالتنسيقات التي تريدها وتحتفظ بالمحول الخاص بك باعتباره مصدر اهتمام منفصل.

يمكنك استخدام أي مشغل RxJS في خطوط الأنابيب العكسية الخاصة بك. هل تريد فقط تصفية أحداث معينة، مثل عندما يضغط المستخدم على Enter، بدلاً من أي مفتاح آخر؟ ما عليك سوى استخدام عامل التصفية:

import { Subject, filter, map } from 'rxjs';
import { rml, inputPipe } from 'rimmel';

const UpperOnEnter = inputPipe(
  filter((e: Event) => e.key == 'Enter'),
  map((e: Event) => e.target.value.toUpperCase()),
);

const Component = () => {
  const state = new Subject();

  return rml`
    Type some text and hit Enter

    
    
${state}
  `;
};

فيما يتعلق باختبار الوحدة، فهذه إضافة صغيرة ولكنها مفيدة ستجعل الاختبارات أبسط وأكثر كفاءة.

اطلع على مصممي خرائط الأحداث أثناء العمل على Stackblitz