अंतर क्या है?
जैसा कि आप अपने उदाहरण में देखते हैं, मुख्य अंतर स्रोत कोड की पठनीयता में सुधार करना है। आपके उदाहरण में केवल दो कार्य हैं, लेकिन कल्पना कीजिए कि क्या एक दर्जन कार्य हैं? तो यह पसंद आएगा
function1().function2().function3().function4()
यह वास्तव में बदसूरत हो रहा है, और पढ़ना मुश्किल है, खासकर जब आप कार्यों के अंदर भर रहे हैं। विज़ुअल स्टूडियो कोड जैसे कुछ संपादकों के शीर्ष पर 140 से अधिक लाइन की लंबाई की अनुमति नहीं है। लेकिन अगर यह निम्नलिखित की तरह हो जाता है।
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
यह पठनीयता में अत्यधिक सुधार करता है।
यदि कोई अंतर नहीं है, तो फ़ंक्शन पाइप क्यों मौजूद है?
PIPE () फ़ंक्शन का उद्देश्य सभी कार्यों को एक साथ गांठ करना है , और अवलोकन योग्य वापस करना है। यह शुरू में एक नमूदार होता है, फिर उस पाइप का उपयोग पूरे समारोह में किया जाता है।
पहला फ़ंक्शन अवलोकनीय लेता है, इसे संसाधित करता है, इसके मूल्य को संशोधित करता है, और अगले फ़ंक्शन को पास करता है, फिर अगला फ़ंक्शन पहले फ़ंक्शन के अवलोकनीय लेता है, इसे संसाधित करता है, और अगले फ़ंक्शन को पास करता है, फिर यह सभी फ़ंक्शन तक चलता है पाइप के अंदर () फंक्शन का उपयोग किया जा सकता है जो देखने योग्य है, अंत में आपके पास प्रोसेस्ड है। अंत में आप मान को सदस्यता से हटा सकते हैं () फ़ंक्शन इसके मूल्य को निकालने के लिए। याद रखें, मूल अवलोकन में मूल्यों को नहीं बदला जाता है। !!
उन कार्यों को अलग-अलग आयात की आवश्यकता क्यों है?
आयात उस जगह पर निर्भर करता है जहां फ़ंक्शन rxjs पैकेज में निर्दिष्ट है। यह इस प्रकार चलता है। सभी मॉड्यूल कोणीय_ में नोड_मॉडल फ़ोल्डर में संग्रहीत किए जाते हैं। "मॉड्यूल" से {class} आयात करें;
एक उदाहरण के रूप में निम्नलिखित कोड लेते हैं। मैंने इसे स्टैकब्लिट्ज़ में लिखा है। तो कुछ भी स्वचालित रूप से उत्पन्न नहीं होता है, या कहीं और से कॉपी किया जाता है। जब आप जा सकते हैं और इसे भी पढ़ सकते हैं, तो मुझे rxjs प्रलेखन में जो कहा गया है, उसे कॉपी करने का बिंदु नहीं दिख रहा है। मुझे लगता है कि आपने यह प्रश्न यहां पूछा है, क्योंकि आप प्रलेखन को नहीं समझते थे।
- संबंधित मॉड्यूल से आयातित पाइप, अवलोकन योग्य, मानचित्र कक्षाएं हैं।
- कक्षा के शरीर में, मैंने पाइप () फ़ंक्शन का उपयोग किया जैसा कि कोड में देखा गया है।
फ़ंक्शन () फ़ंक्शन एक अवलोकन योग्य देता है, जो क्रमांकित होने पर क्रम में संख्याओं का उत्सर्जन करता है।
अभी तक अवलोकन योग्य नहीं है।
जब आप इसका उपयोग करते हैं, तो यह अवलोकन योग्य होता है। पाइप () फ़ंक्शन, इनपुट के रूप में दिए गए ऑब्जर्वेबल का उपयोग करता है।
पहला फ़ंक्शन, मैप () फ़ंक्शन ऑब्जर्वेबल का उपयोग करता है, इसे प्रोसेस करता है, संसाधित ऑब्जर्वेबल को पाइप पर वापस लौटाता है () फ़ंक्शन,
उसके बाद जो संसाधित ऑब्जर्वेबल अगले फ़ंक्शन को दिया जाता है यदि कोई हो,
और यह इस तरह से चलता है कि जब तक सभी कार्यों को देखने योग्य प्रक्रिया नहीं होती है,
अंत में जो अवलोकन योग्य है वह पाइप () फ़ंक्शन द्वारा एक चर में लौटाया जाता है, निम्नलिखित उदाहरण में।
अब ऑब्जर्वेबल में बात यह है कि जब तक पर्यवेक्षक ने इसे सदस्यता नहीं दी है, तब तक यह किसी भी मूल्य का उत्सर्जन नहीं करता है। इसलिए मैंने इस ऑब्जर्वबल को सब्सक्राइब करने के लिए सब्सक्रिप्शन () फंक्शन का इस्तेमाल किया, फिर जैसे ही मैंने इसे सब्सक्राइब किया। इन () फ़ंक्शन मानों का उत्सर्जन करना शुरू करता है, फिर उन्हें पाइप () फ़ंक्शन के माध्यम से संसाधित किया जाता है, और आपको अंतिम परिणाम मिलता है, उदाहरण के लिए 1 () फ़ंक्शन से लिया जाता है, 1 मैप में 1 जोड़ा जाता है () फ़ंक्शन, और वापस लौट आया। आप सदस्यता (फ़ंक्शन ( तर्क ) {}) फ़ंक्शन के अंदर एक तर्क के रूप में उस मूल्य को प्राप्त कर सकते हैं ।
यदि आप इसे प्रिंट करना चाहते हैं, तो के रूप में उपयोग करता है
subscribe( function (argument) {
console.log(argument)
}
)
import { Component, OnInit } from '@angular/core';
import { pipe } from 'rxjs';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
obs = of(1,2,3).pipe(
map(x => x + 1),
);
constructor() { }
ngOnInit(){
this.obs.subscribe(value => console.log(value))
}
}
https://stackblitz.com/edit/angular-ivy-plifkg
pipe()आप उन ऑपरेटरों को पास करते हैं जो आप बनाते हैं?