Πώς να RxJS - Τα βασικά της δημιουργίας

RxJS Παρατηρήσιμη δημιουργία, σαν επαγγελματίας

Αυτό είναι μέρος 3 της σειράς μου σχετικά με το RxJS, μπορείτε να δείτε τα άλλα μου άρθρα σχετικά με τους παρακάτω συνδέσμους:

  • Πώς να RxJS - τα βασικά
  • Πώς να RxJS - Πώς vs Ψυχρός
  • Πώς να RxJS - Βασικά στοιχεία δημιουργίας

Στο προηγούμενο μέρος αυτής της σειράς, έγραψα για τις διαφορές των Hot vs Cold Observables. Ένα σημαντικό μέρος του RxJS, αν δεν ξέρετε τι είναι, συστήνω ιδιαίτερα να το διαβάσετε πριν προχωρήσετε. Ένας τόνος λαθών, έχω σκοντάψει όταν βοηθώ στο Rx προέρχεται από το γεγονός, ότι δεν ξέρουν τα βασικά.

Σε αυτό το άρθρο, θα περάσουμε από τους συνήθως χρησιμοποιούμενους δημιουργικούς φορείς.

Φωτογραφία από τον Nikhil Mitra στο Unsplash

Θα παρουσιάσω το μαρμάρινο διάγραμμα κάποιων από αυτούς τους χειριστές, τότε θα δώσω ένα παράδειγμα χρήσης.

Ο χειριστής 'από'

Ο πρώτος χειριστής, ο οποίος χρησιμοποιείται ευρέως, είναι ο. Ας αναφερθούμε στην περιγραφή αυτού του χειριστή από τα έγγραφα RxJS:

Μετατρέπει σχεδόν τίποτα σε ένα Observable.

Για να είμαι ειλικρινής, είναι τόσο απλό. Αυτός ο χειριστής μπορεί να δημιουργήσει ένα παρατηρήσιμο από μια Array, αντικείμενο που μοιάζει με array, ένα αντικείμενο που μπορεί να επαναληφθεί, ένα Promise ή ένα αντικείμενο Like-like.

Ωστόσο, αξίζει να αναφέρουμε ότι στην περίπτωση του Array, αντικειμενικών και επαναληπτικών αντικειμένων, θα εκπέμπει τα αντικείμενα μέσα στο αντικείμενο αυτό, ένα προς ένα. Δείτε το μαρμάρινο διάγραμμα στα έγγραφα.

Εικόνα από την τεκμηρίωση του RxJS

Μέσα σε μια γωνιακή εφαρμογή, η πιο συνηθισμένη χρήση αυτού του χειριστή είναι να δημιουργήσει ένα παρατηρήσιμο από μια υπόσχεση. Υπάρχουν αρκετές βιβλιοθήκες εκεί έξω, μέσα σε npm οι οποίες βασίζονται στις υποσχέσεις, δεδομένου ότι μια υπόσχεση είναι μέρος των specs ES2015, ενώ τα παρατηρητήρια δεν είναι. Ωστόσο, μια γωνιακή εφαρμογή εξαρτάται σε μεγάλο βαθμό από τα Παρατηρητικά, μπορείτε να ζήσετε χωρίς αυτά, αλλά θα ήταν σαν να κωδικοποιείτε με το ένα χέρι δεμένο.

Έγραψα δύο παραδείγματα, η πρώτη είναι η απλούστερη περίπτωση, όπου έχετε μια βιβλιοθήκη, η οποία έχει ορισμούς τύπων. Στο δεύτερο παράδειγμα, μπορείτε να δείτε πώς να πείτε στον χειριστή «από» ποιος είναι ο τύπος της υπόσχεσης που επέστρεψε η βιβλιοθήκη. Μπορείτε απλά να επιστρέψετε οποιοδήποτε είδος μαθήματος, αλλά θα πρέπει να αποφύγετε να χρησιμοποιείτε οποιοδήποτε σε κάθε περίπτωση.

Ο χειριστής 'του'

Αυτός είναι ένας απλός χειριστής δημιουργίας, πολύ παρόμοιος με τον. Ας δούμε ξανά την περιγραφή.

Κάθε επιχείρημα γίνεται μια επόμενη ειδοποίηση.
Εικόνα από την τεκμηρίωση του RxJS

Είναι τόσο απλό. Κάθε επιχείρημα που δίνετε σε αυτόν τον φορέα εκμετάλλευσης θα γίνει μια επόμενη ειδοποίηση. Η βασική διαφορά από τον χειριστή «από» είναι ότι το «του» δεν θα ισοπεδώσει κανένα από τα επιχειρήματά του. Αν δώσετε μια παράταξη ως είσοδο, τότε θα εκπέμψει την ίδια τη συστοιχία και όχι τα στοιχεία μέσα στον πίνακα.

Μέσα σε μια γωνιακή εφαρμογή και σε οποιαδήποτε εφαρμογή, αυτός ο χειριστής χρησιμοποιείται για παράδειγμα για να δημιουργήσει προεπιλεγμένες τιμές Obspectable ή εφεδρικές τιμές Obspectable. Μπορείτε να το χρησιμοποιήσετε μέσα σε ένα απλό χειριστήριο σφαλμάτων, για παράδειγμα, για να επιστρέψετε ένα εφεδρικό Refresh, το οποίο περιέχει μια προεπιλεγμένη ή εφεδρική τιμή, έτσι ώστε να μην αποτύχουν οι άλλοι χειριστές με σωληνώσεις.

Οι φορείς εκμετάλλευσης "fromEvent" και "fromEventPattern"

Οι επόμενοι δύο χειριστές στη λίστα μας θα είναι από τους φορείςEvent και από τους φορείςEventPattern. Μιλάω για αυτά μαζί δεδομένου ότι χρησιμοποιούνται για το ίδιο πράγμα, και το outEvent μπορεί να θεωρηθεί ως συντομογραφία για τον φορέα από τοEventPattern.

Χωρίς άλλο λάθος, ας δούμε τις περιγραφές αυτών των φορέων.

Το "από το"

Δημιουργεί ένα εμφανίσιμο από συμβάντα DOM, ή συμβάντα EventEmitter Node.js ή άλλα.

Όπως υποδηλώνει το όνομα, αυτοί οι χειριστές δημιουργούν ένα ρεύμα Observed από μια σειρά γεγονότων που συμβαίνουν σε ένα αντικείμενο στόχο.

Το fromEvent μπορεί να ακούσει τους παρακάτω στόχους συμβάντων:

  • DOM EventTarget Αυτό είναι ένα αντικείμενο με τις μεθόδους addEventListener και removeEventListener. Η προαιρετική τρίτη παράμετρος για αυτές τις μεθόδους μπορεί να δοθεί και ως τρίτη παράμετρος του zEvent
  • Node.js EventEmitter Αυτό είναι το αντικείμενο στόχου συμβάντος κόμβου. Πρόκειται για ένα αντικείμενο με τις μεθόδους addListener και removeListener.
  • Στόχος συμβάντος τύπου JQuery Ένα αντικείμενο με μεθόδους on και off
  • DOM NodeList ή DOM HtmlCollection Σε αυτή την περίπτωση, παρόλο που αυτά δεν είναι EventTargets άμεσα, το RxJS τα χειρίζεται, μέσω iterating πάνω από όλα τα στοιχεία του και την εγγραφή στο δεδομένο γεγονός σε κάθε ένα από αυτά.

Ας δούμε την περιγραφή του χειριστή fromEventPattern.

Δημιουργεί ένα παρατηρήσιμο από ένα αυθαίρετο API για την εγγραφή χειριστών συμβάντων.

Όπως μπορείτε να δείτε, μπορείτε να το χρησιμοποιήσετε αν εκτελέσετε ένα αντικείμενο στόχου συμβάντος το οποίο δεν θα μπορούσε να χειριστεί ο χειριστής fromEvent. Έχει δύο σημαντικές παραμέτρους, τις λειτουργίες addHandler και removeHandler. Σε αυτά πρέπει να προσθέσετε το eventHandler στο eventTarget και να το αφαιρέσετε. Εάν λάβετε κάποιο είδος συμβόλου, όταν προσθέτετε μια λαβή, μπορείτε να την επιστρέψετε στη λειτουργία addHandler, αυτή η επιστρεφόμενη τιμή θα δοθεί στο removeHandler ως δεύτερη παράμετρος.

Μέσα στις γωνιακές εφαρμογές, αυτοί οι χειριστές χρησιμοποίησα σπάνια, δεδομένου ότι θα προτιμούσατε να ακούσετε τα γεγονότα πάνω στα στοιχεία μέσω της δέσμευσης συμβάντων. Παρόλο που μπορεί να υπάρχουν χρήσιμες συνέπειες αυτών των φορέων κατά τη δημιουργία ενός χαμηλού επιπέδου προσαρμοσμένου στοιχείου ή οδηγίας. Το χρησιμοποίησα, μέσα σε ένα στοιχείο που χειριζόταν γεγονότα μεταφοράς και απόθεσης και έπρεπε να συνδυάσω αυτά τα γεγονότα με άλλα ρεύματα.

Η σταθερά 'EMPTY'

Αυτός δεν είναι ένας δημιουργικός χειριστής, αλλά ήταν πριν να καταργηθεί. Παρόλο που δεν είναι χειριστής, αξίζει να το αναφέρουμε, καθώς υπάρχουν κάποιες βασικές περιπτώσεις χρήσης αυτής της σταθεράς.

Απλώς εκπέμπει 'πλήρη', και τίποτα άλλο.

Ακριβώς όπως λέει η περιγραφή και υποδηλώνει το όνομά της, αυτό είναι ένα κενό Obsible, το οποίο θα ολοκληρωθεί αμέσως μετά τη συνδρομή.

Η κενή σταθερά χρησιμοποιείται συνήθως ως εναλλακτική λύση όταν πρέπει να επαναφέρετε μια προεπιλεγμένη δυνατότητα παρακολούθησης βάσει μιας έκφρασης.

Μέσα σε μια γωνιακή εφαρμογή, αυτό μπορεί να χρησιμοποιηθεί για να τυλίξει μια υπό όρους παρενέργεια μέσα σε ένα Obsible. Ας υποθέσουμε ότι γράφετε ένα ηλεκτρονικό κατάστημα για μεταχειρισμένα αγαθά και έχετε ένα χαρακτηριστικό γνώρισμα όπου αν κάποιος αγοράζει ένα αντικείμενο, πρέπει να ενημερώσετε τον πωλητή σχετικά με αυτό, αν αυτός / αυτή έχει διαμορφώσει τη διαφήμιση για να το πράξει.

Στο παραπάνω παράδειγμα, εάν καλέσει κάποιος τη μέθοδο αγοράς του BuyerService, αυτή η παρενέργεια κοινοποίησης θα αντιμετωπιστεί και ο καλών δεν χρειάζεται να το γνωρίζει καθόλου. Όταν ολοκληρωθεί η όλη διαδικασία, θα υπάρξει μια επόμενη και αμέσως μετά μια πλήρης ειδοποίηση για το Obspect. Δεν έχει σημασία αν έπρεπε να ειδοποιήσουμε τον πωλητή ή όχι.

Ο χειριστής 'αναβολή'

Ο τελευταίος χειριστής που θέλω να αναφέρω σε αυτό το άρθρο είναι η αναβολή. Ας δούμε ξανά τα έγγραφα.

Δημιουργεί το Observable lazily, δηλαδή μόνο όταν έχει εγγραφεί.

Όπως αναφέρθηκε στην περιγραφή, μπορούμε να χρησιμοποιήσουμε αυτόν τον χειριστή για να δημιουργήσουμε ένα Observable lazily. Μπορεί να είναι χρήσιμο, για παράδειγμα, όταν εργάζεστε με τις υποσχέσεις. Δεδομένου ότι, όπως είπαμε στο προηγούμενο άρθρο, οι υποσχέσεις δεν είναι τεμπέλες, κάθε φορά που δημιουργείτε μια υπόσχεση που θα τρέξει, ακόμα και αν δεν υπάρχουν κλήσεις. Ο χειριστής «αναβολής» έρχεται στη διάσωση:

Στο παραπάνω παράδειγμα, καλείτε τη μέθοδο callPromise, τότε η Υπόσχεση μέσα στο 'από' θα δημιουργείται πάντα, έτσι θα τρέχει πάντα. Ωστόσο, στη μέθοδο 'lazilyCallPromise', η υπόσχεση θα δημιουργηθεί μόνο αν εγγραφείτε στην έξοδο Obspect of delay.

Είναι το ίδιο σαν να δημιουργήσαμε την υπόσχεση ως παραγωγός ενώ εγγραφόμαστε:

νέο παρατηρήσιμο (παρατηρητής => {
someLibrary.callPromise () και στη συνέχεια (result => observer.next (αποτέλεσμα)).
});

Περίληψη

Σε αυτό το άρθρο, περάσαμε από τους βασικούς δημιουργούς. Προσπάθησα επίσης να δώσω συνοπτικά παραδείγματα σχετικά με τη χρήση τους. Ελπίζω ότι βοήθησε μερικούς από σας.

Μη διστάσετε να αφήσετε προτάσεις ή σχόλια σχετικά με την ιστορία μου. Είμαι επίσης ανοιχτός σε νέα πράγματα για να βελτιώσω ή να μάθω. Επιπλέον, είμαι ανοικτός σε οποιεσδήποτε προτάσεις σχετικά με τις μελλοντικές μου ιστορίες σε θέματα που σχετίζονται με την Ανάπτυξη Ιστού, το JavaScript ή το Γωνιακό.

Μια σημείωση από το JavaScript Σε απλό αγγλικό:

Είμαστε πάντα ενδιαφέρονται να συμβάλουμε στην προώθηση ποιοτικού περιεχομένου. Εάν έχετε ένα άρθρο που θέλετε να υποβάλετε στη Javascript σε απλό αγγλικό, στείλτε μας ένα e-mail στη διεύθυνση [email protected] με το μεσαίο όνομα χρήστη και θα σας προστεθεί ως συγγραφέας.