5 προηγμένες λειτουργίες JavaScript που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε την ποιότητα του κώδικά σας

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

Για να δημιουργήσετε προϊόντα που θα αγαπήσουν και θα εκτιμήσουν οι χρήστες, είναι απαραίτητο να γράψετε κώδικα που δεν είναι μόνο λειτουργικός αλλά και αποτελεσματικός και εύκολος στη συντήρηση. Ο καθαρός κώδικας JavaScript είναι ζωτικής σημασίας για την επιτυχία οποιασδήποτε εφαρμογής ιστού ή για κινητά, είτε πρόκειται για έργο χόμπι είτε για περίπλοκη εμπορική εφαρμογή.

Τι είναι τόσο καλό για τις λειτουργίες JavaScript;

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

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

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

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

1. μια φορά

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

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

Δείτε πώς μπορείτε να ορίσετε μια τέτοια συνάρτηση:

συνθ μια φορά = (func) => {
αφήνω αποτέλεσμα;
αφήνω funcCalled = ψευδής;
ΕΠΙΣΤΡΟΦΗ(...args) => {
αν (!funcCalled) {
 αποτέλεσμα = func(...args);
 funcCalled = αληθής;
 }
ΕΠΙΣΤΡΟΦΗ αποτέλεσμα;
 };
};

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

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

// Ορίστε μια συνάρτηση για την ανάκτηση δεδομένων από το DB
λειτουργίαgetUserData() {
// ...
}
// λάβετε μια έκδοση της συνάρτησης getUserData που μπορεί να εκτελεστεί μόνο μία φορά
συνθ makeHTTPRequestOnlyOnce = μία φορά (getUserData);
συνθ userDataBtn = έγγραφο.querySelector("#btn");
userDataBtn.addEventListener("Κάντε κλικ", makeHTTPRequestOnlyOnce);

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

2. σωλήνας

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

Εδώ είναι ένα παράδειγμα σε κώδικα:

// Ορισμός της συνάρτησης σωλήνα
συνθ σωλήνας = (...λειτουργεί) => {
ΕΠΙΣΤΡΟΦΗ(αργ) => {
 funcs.forEach(λειτουργία(func) {
 arg = func (arg);
 });
ΕΠΙΣΤΡΟΦΗ arg;
 }
}
// Ορισμός ορισμένων συναρτήσεων
συνθ addOne = (ένα) => ένα + 1;
συνθ διπλός = (Χ) => Χ * 2;
συνθ τετράγωνο = (Χ) => x * x;
// Δημιουργία σωλήνα με τις συναρτήσεις
συνθ myPipe = σωλήνας (addOne, διπλό, τετράγωνο);
// Δοκιμάστε το σωλήνα με μια τιμή εισόδου
κονσόλα.log (myPipe(2)); // Έξοδος: 36

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

3. χάρτης

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

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

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

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

συνθ αριθμοί = [1, 2, 3, 4, 5];
συνθ doubledNumbers = numbers.map(λειτουργία(αριθμός) {
ΕΠΙΣΤΡΟΦΗ αριθμός * 2;
});
κονσόλα.log (doubledNumbers);
// Έξοδος: [2, 4, 6, 8, 10]

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

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

4. διαλέγω

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

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

Ακολουθεί ένα παράδειγμα σε κώδικα:

συνθ διαλέγω = (αντικείμενο, ...κλειδιά) => {
ΕΠΙΣΤΡΟΦΗ keys.reduce((αποτέλεσμα, κλειδί) => {
αν (object.hasOwnProperty (κλειδί)) {
 αποτέλεσμα[κλειδί] = αντικείμενο[κλειδί];
 }
ΕΠΙΣΤΡΟΦΗ αποτέλεσμα;
 }, {});
};

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

συνθ χρήστης = {
 όνομα: 'Χελιδόνι',
 ηλικία: 30,
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: '[email protected]',
};
κονσόλα.log (επιλογή (χρήστης, 'όνομα', 'ηλικία'));
// Έξοδος: { όνομα: 'Martin', ηλικία: 30 }

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

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

5. φερμουάρ

Αυτή η συνάρτηση zip συνδυάζει πίνακες σε μια ενιαία συστοιχία πλειάδων, που ταιριάζουν με αντίστοιχα στοιχεία από κάθε πίνακα εισόδου.

Ακολουθεί ένα παράδειγμα υλοποίησης μιας συνάρτησης zip:

λειτουργίαφερμουάρ(...συστοιχίες) {
συνθ μέγιστο μήκος = Μαθηματικά.min(...arrays.map(πίνακας => πίνακας.μήκος));
ΕΠΙΣΤΡΟΦΗΠίνακας.από(
 { μήκος: μέγιστο μήκος },
 (_, ευρετήριο) => arrays.map(πίνακας => πίνακας[ευρετήριο])
 );
};
συνθ a = [1, 2, 3];
συνθ b = ['ένα', 'σι', 'ντο'];
συνθ c = [αληθής, ψευδής, αληθής];
κονσόλα.log (zip (a, b, c));
// Έξοδος: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Η συνάρτηση zip δέχεται πίνακες εισόδου και υπολογίζει το μεγαλύτερο μήκος τους. Στη συνέχεια δημιουργεί και επιστρέφει έναν μόνο πίνακα χρησιμοποιώντας τη μέθοδο Array.from JavaScript. Αυτός ο νέος πίνακας περιέχει στοιχεία από κάθε πίνακα εισόδου.

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

Εργασία με Λειτουργίες JavaScript στον Κώδικά σας

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

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