यदि आप अपने कोड की समग्र गुणवत्ता में सुधार करना चाहते हैं, तो आप अपने डेटा मॉडल को अंतर्निहित दृश्यों से बड़े करीने से अलग रखना चाह सकते हैं।

रिममेल.जेएस जैसे कार्यात्मक-प्रतिक्रियाशील ढांचे या यूआई लाइब्रेरी, जो ऑब्जर्वेबल्स के लिए पूर्ण समर्थन रखते हैं, आपको अल्पज्ञात डिजाइन के अलावा अपने मॉडलों को ऑब्जर्वेबल स्ट्रीम (जैसे: सरल डेटा इन, डेटा आउट स्ट्रीम) के रूप में परिभाषित करने में सक्षम बनाते हैं। पैटर्न जो इवेंट एडॉप्टर है।

इवेंट एडेप्टर आपको किसी भी स्रोत इवेंट (जैसे: DOM के माउसइवेंट, पॉइंटरइवेंट, कीबोर्डइवेंट, आदि) को वास्तव में आपके डेटा मॉडल द्वारा उपयोग किए जाने वाले प्रारूप में मैप करने में मदद करते हैं, इसलिए उन्हें इस रूपांतरण कार्य से मुक्त कर दिया जाएगा और अंततः इससे अलग कर दिया जाएगा। यूआई.

रिममेल ऐसी स्ट्रीम को DOM से कनेक्ट करना आसान बनाता है:

import { rml } from 'rimmel';

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

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

बाइंडिंग तुच्छ है: रिममेल बटन से आने वाले क्लिक इवेंट को सीधे आपके अवलोकन योग्य स्ट्रीम में जोड़ता है, जो हर बार बटन क्लिक करने पर पॉइंटरइवेंट के उदाहरण प्राप्त करेगा।

अब तक तो सब ठीक है। यदि आपकी स्ट्रीम को कई स्रोतों से डेटा लेने और प्रत्येक के आधार पर अलग-अलग व्यवहार करने की आवश्यकता हो तो क्या होगा?
आइए एक वेतन वृद्धि और एक वेतन वृद्धि बटन के साथ एक सरल काउंटर बनाएं, प्रत्येक इसमें एक जोड़ या घटा रहा है।

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}
  `;
}

यह काम करता है, लेकिन टेम्पलेट भाग में कुछ तर्क शामिल हैं, जो एक विरोधी पैटर्न है। आदर्श रूप से हमें समग्र रूप से परीक्षण योग्यता को अधिकतम करने के लिए तर्क-रहित टेम्पलेट्स का प्रयास करना चाहिए।

तो, रिममेल 1.2 के साथ आपके पास एक नई सुविधा, इवेंट मैपर्स है, जो वास्तव में इसमें मदद करती है। वे आपके मॉडल की ज़रूरतों के अनुसार 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}
  `;
};

रिवर्सपाइप यहां एक अभिनव जोड़ है: एक पाइपलाइन निर्माण उपकरण जो आरएक्सजेएस में पाइप() फ़ंक्शन के विपरीत काम करता है। जबकि बाद वाला स्ट्रीम के आउटपुट में परिवर्तन लागू करता है, रिवर्सपाइप() उन्हें इनपुट पर लागू करता है।
इस तरह आप सुनिश्चित हैं कि आपके मुख्य स्ट्रीम सब्जेक्ट/बिहेवियरसब्जेक्ट/ऑब्जर्वर/इवेंट लिस्टनर को हमेशा आपके इच्छित प्रारूप में डेटा मिलता है और आप अपने एडॉप्टर को एक अलग चिंता के रूप में रखते हैं।

आप अपनी रिवर्स पाइपलाइनों में किसी भी 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}
  `;
};

यूनिट परीक्षण के संबंध में यह एक छोटा लेकिन उपयोगी जोड़ है जो परीक्षणों को सरल और अधिक कुशल बना देगा।

इस स्टैकब्लिट्ज पर काम कर रहे इवेंट मैपर्स को देखें