Πώς να γράψετε ισχυρά σχήματα σε JavaScript

Παρουσιάζοντας το schm, μια λειτουργική και εξαιρετικά συνθετική βιβλιοθήκη για τη δημιουργία σχημάτων σε JavaScript και Node.js

Δουλεύω με HTML, CSS και JavaScript από το 2002. Η πρώτη φορά που χρειαζόμουν κάποιο σχήμα στο JavaScript ήταν πριν από λίγα χρόνια.

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

Τι είναι το schm;

schm είναι μια ομάδα πακέτων npm για να βοηθήσει τους προγραμματιστές να αντιμετωπίσουν σχήματα σε JavaScript και Node.js.

Είναι πολύ εμπνευσμένο από τα Mongoose Schemas. Στην πραγματικότητα, είναι τόσο παρόμοια που μπορείτε να χρησιμοποιήσετε schmπαραμέτρους στο Mongoose Schemas και το αντίστροφο. Ωστόσο, δεν είναι συγκεκριμένο για το MongoDB. Μπορείτε να το χρησιμοποιήσετε για όλα σε JavaScript.

Τι είδους προβλήματα λύνει το schm;

; Ανάλυση και επικύρωση τιμών φόρμας

Στον πελάτη, μπορείτε να χρησιμοποιήσετε σχήματα για να ορίσετε μοντέλα για φόρμες HTML. Διευκολύνει τον μετασχηματισμό και την επικύρωση τιμών. Επίσης, εάν χρησιμοποιείτε το Node.js στο διακομιστή, μπορείτε να χρησιμοποιήσετε το ίδιο σχήμα. Το αποτέλεσμα είναι μια συνεπής συμπεριφορά μεταξύ επικυρώσεων πελάτη και διακομιστή.

; Ανάλυση και επικύρωση της συμβολοσειράς ερωτήματος

Εξετάστε την ακόλουθη συμβολοσειρά ερωτήματος: /?term=John&page=2&limit=10. Συνδυάζοντας πακέτα όπως schm-koa, schm-express και / ή schm-mongo, θα μπορείτε να αναλύσετε και να επικυρώσετε τις συμβολοσειρές ερωτημάτων με όρους αναζήτησης και με σελιδοποίηση με ευκολία.

☊ Επικοινωνία μεταξύ πελάτη και διακομιστή

Εάν έχετε μια εφαρμογή που καταναλώνει πόρους από ένα REST API, για παράδειγμα, μπορείτε να χρησιμοποιήσετε σχήματα για να ορίσετε, στον πελάτη, τη δομή αντικειμένου που ο πελάτης σας αναμένει να λάβει από το διακομιστή. Εάν αλλάξει κάτι στο διακομιστή (οι ιδιότητες έχουν μετονομαστεί, για παράδειγμα), μπορείτε απλώς να ενημερώσετε το σχήμα σας, ώστε ολόκληρη η εφαρμογή σας να συνεχίσει να λειτουργεί.

Δημιουργία σχήματος

Ένα απλό σχήμα είναι απλώς ένας χάρτης κλειδιών και τύπων:

Αυτό είναι το ίδιο με τη χρήση μιας typeιδιότητας:

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

Αυτό ισοδυναμεί με το εξής:

Για να μάθετε περισσότερα σχετικά με το πώς να γράψετε σχήματα, ρίξτε μια ματιά στο Mongoose Schemas.

Ανάλυση τιμών

Αφού ορίσετε το σχήμα, μπορείτε να το χρησιμοποιήσετε για την ανάλυση των τιμών. Αυτή η διαδικασία θα μετατρέψει τιμές στους κατάλληλους τύπους, καθώς και την εφαρμογή άλλων αναλυτών που ορίζονται στο σχήμα. Αυτά είναι τα διαθέσιμα προγράμματα ανάλυσης: type, default, set, get, trim, uppercase, lowercase.

Η έξοδος θα είναι κάπως έτσι:

{ name: "HAZ", birthdate: Tue Apr 10 1990 00:00:00 GMT,}

Επικύρωση τιμών

Όπως και στα Mongoose Schemas, μπορείτε να ορίσετε κανόνες επικύρωσης στα σχήματά σας. Αυτές είναι οι διαθέσιμες επικύρωσης: validate, required, match, enum, max, min, maxlength, minlength.

Μπορείτε επίσης να δημιουργήσετε προσαρμοσμένους αναλυτές και επικυρωτές επεκτείνοντας το σχήμα. Θα το συζητήσουμε αργότερα σε αυτό το άρθρο.

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

[ { message: "age must be greater than or equal 18", min: 18, param: "age", validator: "min", value: 17, }]

Εάν η επικύρωση περάσει, θα επιστρέψει τις αναλυμένες τιμές, όπως parse().

Σύνθεση πολλαπλών σχημάτων

Ας υποθέσουμε ότι έχετε ξεχωριστή σχήματα που περιγράφουν ένα body, identityκαι άλλα πράγματα, και θέλετε να τα συνθέσει για την κατασκευή ενός humanσχήματος. Αυτό είναι τόσο εύκολο όσο ακούγεται:

Ένας άλλος τρόπος σύνθεσης σχημάτων είναι μέσω ένθεσης. Ένα σχήμα μπορεί να χρησιμοποιηθεί ως typeμέσα σε ένα άλλο σχήμα:

Επέκταση σχημάτων

Αυτό είναι το μέρος όπου schmπραγματικά λάμπει. Μπορείτε να προσθέσετε προσαρμοσμένους αναλυτές και επικυρωτές ή ακόμη και να αντικαταστήσετε την προεπιλεγμένη συμπεριφορά parseκαι validateμεθόδους δημιουργώντας ομάδες σχήματος.

Μια ομάδα σχήματος είναι μια συνάρτηση που λαμβάνει το προηγούμενο σχήμα ως το μόνο όρισμα. Εκτός από το προηγούμενο params, parsersκαι validators, το αντικείμενο σχήματος έχει μια mergeμέθοδο, η οποία είναι χρήσιμη για τις λειτουργίες της ομάδας σχήματος για τη συγχώνευση νέων λειτουργιών στα προηγούμενα σχήματα.

Η έξοδος του παραπάνω αποσπάσματος θα είναι κάπως έτσι:

{ name: "Haz!!!", age: 27,}

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

Επεκτείνοντας τα σχήματα, μπορούμε να δημιουργήσουμε πολλά είδη πραγμάτων. Έτσι schmγράφονται οι περισσότερες από τις δορυφορικές βιβλιοθήκες, όπως schm-translate, schm-computed και schm-mongo.

Θα μιλήσουμε για ένα από αυτά τώρα.

Μετονομασία κλειδιών τιμών

Το schm-translate είναι μια από τις απλούστερες, αλλά ισχυρές, δορυφορικές βιβλιοθήκες του schm. Είναι μερικές από περισσότερες από 10 γραμμές κώδικα συμπιεσμένες σε μία λειτουργία, η οποία σας επιτρέπει να μεταφράσετε κλειδιά τιμών στα πλήκτρα σχήματος.

Ας υποθέσουμε ότι εργάζεστε σε μια διαδικτυακή εφαρμογή που καταναλώνει πόρους από ένα REST API. Ξαφνικά, οι προγραμματιστές αλλάζουν τα πράγματα στο API, το οποίο κάνει το σώμα απόκρισης να επιστρέφει ένα ελαφρώς διαφορετικό μοντέλο από αυτό που περίμενε ο πελάτης. Αντί για μια emailιδιότητα, επιστρέφει τώρα μια σειρά από emails.

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

Με schmκαι schm-translate, μπορεί να επιλυθεί αλλάζοντας μερικές γραμμές κώδικα σε ένα μόνο μέρος:

Το αποτέλεσμα θα είναι ακριβώς αυτό που αναμένεται από την εφαρμογή σας πριν από την αλλαγή:

{ name: "Haz", email: "[email protected]",}

Κάντε κλικ εδώ για να δείτε τη λίστα όλων των πακέτων

Πώς διαφέρει αυτό από άλλες βιβλιοθήκες σχήματος;

Μια κοινή ερώτηση είναι η διαφορά μεταξύ schmκαι άλλων βιβλιοθηκών, όπως οι Joi και ajv (που ακολουθεί τις προδιαγραφές του JSON Schema).

Συγκρίνοντας ajv, schmδεν ακολουθεί καμία συγκεκριμένη προδιαγραφή. Αντ 'αυτού, προσπαθεί να μιμηθεί το Mongoose Schema API. Επίσης, παρόλο που ajvέχει κάποια χαρακτηριστικά ανάλυσης, περιορίζονται στις προεπιλεγμένες τιμές και τον εξαναγκασμό τύπου.

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

Τούτου λεχθέντος, Joiκαι τα δύο και ajvμπορούν να συνδυαστούν με schm. Μπορείτε εύκολα να το επεκτείνετε για να χρησιμοποιήσετε μια διαφορετική μέθοδο επικύρωσης:

Ευχαριστούμε που το διαβάσατε!

Εάν σας αρέσει και το θεωρείτε χρήσιμο, ακολουθούν ορισμένα πράγματα που μπορείτε να κάνετε για να δείξετε την υποστήριξή σας:

  • Χτυπήστε το χειροκρότημα; κουμπί σε αυτό το άρθρο μερικές φορές (έως 50)
  • Δώστε ένα αστέρι ⭐️ στο GitHub: //github.com/diegohaz/schm
  • Ακολουθήστε με στο GitHub: //github.com/diegohaz
  • Ακολουθήστε με στο Twitter: //twitter.com/diegohaz