Έτσι, είσαι αν / αλλιώς κόλαση - εδώ είναι πώς να ξεφύγεις από αυτό

Φωτογραφία από τον Luca Bravo στο Unsplash

Τι είναι αυτό το θέμα;

Εάν είστε από javascript υπόβαθρο μπορεί να έχετε ακούσει τους όρους callback κόλαση ή async / περιμένουν κόλαση. Φαίνεται έτσι:

Ο τρόμος.

Υπάρχει παρόμοια κατάσταση με τη χρήση μόνο if / else. Μπορεί να το χαρακτηρίσετε ως προγραμματιστές που είναι εμμονή ή να το αγνοήσετε, σκέπτοντας ότι αυτό είναι εντάξει σε ορισμένες περιπτώσεις.

Διαφωνώ. Όπως λέει η παροιμία ... απλά προσποιούμαστε ότι όποιος διατηρεί τον κωδικό σας έπειτα ξέρει πού εργάζεστε και μπορεί να σας φωνάξει.

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

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

Ας ζωγραφίσουμε μια φωτογραφία. Σας δίνεται ένα κουμπί για την εφαρμογή στο React & το κουμπί έχει 2 επιλογές για ένα θέμα, είτε προεπιλεγμένο είτε πρωτεύον. Πιστεύετε ότι είναι απλό και γράφετε το στοιχείο σας :

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

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

Έτσι γράφουν μια ξεχωριστή πρόταση if:

Μέχρι εδώ καλά …

Αυτό είναι όπου γίνεται ενδιαφέρον

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

Τώρα με βάση αυτή την απαίτηση, ολόκληρη η δομή API αλλάζει το στοιχείο . Ο προγραμματιστής που εργάζεται στον κώδικα καταλήγει σε λογική όπως αυτή:

Αυτό πήρε από το χέρι πολύ γρήγορα .... δεν ήταν;

και σκέφτεστε τον εαυτό σας, δεν υπήρχε τίποτα που θα μπορούσατε να κάνετε :(

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

Όλοι οι πιθανοί συνδυασμοί τιμών που μπορεί να έχει η συνιστώσα <MyButton /> κάθε φορά

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

Αυτό είναι το ίδιο με το προηγούμενο, οι τιμές FALSE παραλείπονται εδώ για λόγους απλότητας

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

Λύση

Βάσει των παραπάνω κριτηρίων, μπορώ να γράψω τον κώδικα μου έτσι ώστε να το απλοποιήσω.

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

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

Με τις μεθόδους αυτοματοποίησης (πεπερασμένων καταστάσεων) όπως για την κωδικοποίηση:

  • Ο κώδικας είναι πλέον ευανάγνωστος τώρα
  • Ο κώδικας είναι πιο συντηρητικός

Μη διστάσετε να μοιραστείτε τις σκέψεις σας. Ευχαριστούμε που το διαβάσατε.

Μπορείτε επίσης να φτάσετε στο twitter @adeelibr

Αναφορά & έμπνευση: Φόρουμ Ανταλλαγής Στοίβων