Μάθετε αυτές τις βασικές έννοιες JavaScript σε λίγα λεπτά

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

  • Σύντομη περιγραφή
  • Γιατί είναι σχετικό
  • Ένα πρακτικό παράδειγμα κώδικα (ES5 / ES6 με λειτουργίες βέλους).

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

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

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

Ενισχύστε τις δεξιότητές σας JavaScript με αυτές τις χρήσιμες μεθόδους JS .

Οι έννοιες JS που θα εξετάσουμε:

  1. Πεδίο εφαρμογής
  2. IIFE
  3. MVC
  4. Async / περιμένετε
  5. Κλείσιμο
  6. Επιστροφή κλήσης

1. Πεδίο εφαρμογής

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

Τοπικό σημαίνει ότι έχετε πρόσβαση σε όλα εντός των ορίων (εντός του πλαισίου), ενώ το παγκόσμιο είναι τα πάντα εκτός των ορίων (εκτός του πλαισίου).

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

Γιατί είναι σχετικό;

  • Διαχωρίζει τη λογική
  • Περιορίζει την εστίαση
  • Βελτιώνει την αναγνωσιμότητα

Παράδειγμα

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

ES5

ES6

Όπως φαίνεται στο παραπάνω παράδειγμα, η συνάρτηση showName()έχει πρόσβαση σε όλα όσα ορίζονται εντός των ορίων της (τοπικά) και επίσης έξω (παγκοσμίως). Θυμηθείτε, το καθολικό εύρος δεν μπορεί να αποκτήσει πρόσβαση σε μεταβλητές που ορίζονται στο τοπικό πεδίο, επειδή περικλείεται από τον εξωτερικό κόσμο, εκτός εάν το επιστρέψετε.

2. IIFE

IIFE (Άμεση επίκληση συναρτήσεων έκφρασης), όπως δηλώνει το όνομα σημαίνει ότι η συνάρτηση είναι "Άμεση επίκληση" όταν δημιουργείται. Πριν το ES6 ++ παρουσίασε τάξεις / μεθόδους για την υποστήριξη του αντικειμενοστρεφούς προγραμματισμού (OOP), ο κοινός τρόπος ήταν να μιμηθεί το IIFE ως όνομα κλάσης και να επικαλεστεί συναρτήσεις ως μεθόδους τυλιγμένες σε έναν returnτύπο.

Γιατί είναι σχετικό;

  • Εκτελεί αμέσως κώδικα
  • Αποφεύγει τη ρύπανση του παγκόσμιου πεδίου
  • Υποστηρίζει ασύγχρονη δομή
  • Βελτιώνει την αναγνωσιμότητα (ορισμένοι μπορεί να υποστηρίζουν το αντίθετο)

Παράδειγμα

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

ES5

ES6

Στο παραπάνω παράδειγμα, έχουμε τυλίξει δύο συναρτήσεις στον returnτύπο ( changeColorToRed()& changeColorToBlack()). Αυτό μας επιτρέπει να έχουμε πρόσβαση σε πολλές λειτουργίες και να επικαλούμε τη μέθοδο που θέλουμε.

Εν ολίγοις, αρχίζουμε να καλούμε το car(function function) για να έχουμε πρόσβαση σε αυτό που υπάρχει μέσα. Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε .συμβολισμό για να επικαλεστούμε τη συνάρτηση που ορίζεται στον returnτύπο. Αυτή η προσέγγιση είναι παρόμοια με τη δομή της ύπαρξης τάξεων / μεθόδων όπου καλούμε πρώτα το όνομα κλάσης προτού μπορέσουμε να καλέσουμε το όνομα μεθόδου. Με αυτόν τον τρόπο μπορείτε να γράψετε καθαρό, διατηρήσιμο και επαναχρησιμοποιήσιμο κώδικα.

3. MVC

Το μοντέλο-view-controller είναι ένα πλαίσιο σχεδίασης (* όχι μια γλώσσα προγραμματισμού) που μας επιτρέπει να διαχωρίζουμε τη συμπεριφορά σε μια πρακτική πραγματική δομή. Σχεδόν το 85% των διαδικτυακών εφαρμογών σήμερα έχουν αυτό το υποκείμενο μοτίβο με τον έναν ή τον άλλο τρόπο. Υπάρχουν και άλλοι τύποι πλαισίων σχεδίασης εκεί έξω, αλλά αυτό είναι μακράν το πιο θεμελιώδες και κατανοητό σχέδιο.

Γιατί είναι σχετικό;

  • Μακροπρόθεσμη επεκτασιμότητα και συντηρησιμότητα
  • Εύκολη βελτίωση, ενημέρωση και εντοπισμός σφαλμάτων (βάσει προσωπικής εμπειρίας)
  • Εύκολη εγκατάσταση
  • Παρέχει δομή και επισκόπηση

Παράδειγμα

Ας δούμε ένα σύντομο παράδειγμα του πλαισίου σχεδίασης MVC.

ES5

ES6

Όπως φαίνεται στο παραπάνω παράδειγμα, συνήθως διαιρούμε το view, modelκαι controllerσε ξεχωριστούς φακέλους / αρχεία από την άποψη των βέλτιστων πρακτικών, αλλά απλώς για να δείξουμε την ιδέα, τα βάζουμε όλα σε ένα αρχείο. Οι στόχοι του πλαισίου σχεδιασμού είναι η απλοποίηση της διαδικασίας ανάπτυξης και η υποστήριξη ενός βιώσιμου περιβάλλοντος συνεργασίας.

4. Async / περιμένετε

Σταματήστε και περιμένετε μέχρι να επιλυθεί κάτι. Παρέχει έναν τρόπο διατήρησης της ασύγχρονης επεξεργασίας με πιο σύγχρονο τρόπο. Για παράδειγμα, πρέπει να ελέγξετε αν ο κωδικός πρόσβασης ενός χρήστη είναι σωστός (συγκρίνετε με αυτόν που υπάρχει στον διακομιστή) προτού επιτρέψετε στον χρήστη να εισέλθει στο σύστημα. Ή ίσως έχετε εκτελέσει ένα αίτημα REST API και θέλετε τα δεδομένα να φορτωθούν πλήρως προτού τα προωθήσετε στην προβολή.

Γιατί είναι σχετικό;

  • Σύγχρονες δυνατότητες
  • Ελέγχει τη συμπεριφορά
  • Μειώνει το "callback hell"

Παράδειγμα

Ας υποθέσουμε ότι θέλετε να αποκτήσετε όλους τους χρήστες από ένα υπόλοιπο API και να δείξετε τα αποτελέσματα σε μορφή JSON.

ES5

ES6

Για να το χρησιμοποιήσουμε await, πρέπει να το τυλίξουμε μέσα σε μια asyncσυνάρτηση για να ειδοποιήσουμε τον JS ότι εργαζόμαστε με υποσχέσεις. Όπως φαίνεται στο παράδειγμα, (α) περιμένουμε δύο πράγματα: responseκαι users. Προτού μπορέσουμε να μετατρέψουμε τη responseμορφή JSON, πρέπει να βεβαιωθούμε ότι έχουμε responseπάρει, αλλιώς μπορούμε να καταλήξουμε στη μετατροπή ενός responseπου δεν είναι ακόμη εκεί, το οποίο πιθανότατα θα προκαλέσει σφάλμα.

5. Κλείσιμο

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

Γιατί είναι σχετικό;

  • Επεκτείνει τη συμπεριφορά
  • Χρήσιμο όταν εργάζεστε με εκδηλώσεις

Παράδειγμα

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

ES5

ES6

Η συνάρτηση showName()είναι ένα κλείσιμο, επειδή επεκτείνει τη συμπεριφορά της συνάρτησης showInfo(), και έχει επίσης πρόσβαση στη μεταβλητή carType.

6. Επανάκληση

Μια επιστροφή κλήσης είναι μια συνάρτηση που εκτελείται μετά την εκτέλεση μιας άλλης συνάρτησης. Αναφέρεται επίσης ως call-after. Στον κόσμο της JavaScript, μια συνάρτηση που περιμένει μια άλλη συνάρτηση να εκτελέσει ή να επιστρέψει μια τιμή (πίνακας ή αντικείμενο) αναφέρεται ως επανάκληση. Η επιστροφή κλήσης είναι ένας τρόπος για να κάνετε τις ασύγχρονες λειτουργίες πιο σύγχρονες (διαδοχική σειρά).

Γιατί είναι σχετικό;

  • Περιμένει να εκτελεστεί ένα συμβάν
  • Παρέχει σύγχρονες δυνατότητες
  • Πρακτικός τρόπος αλυσίδας λειτουργιών (Εάν το A έχει ολοκληρωθεί, εκτελέστε το B και ούτω καθεξής)
  • Παρέχει δομή και έλεγχο κώδικα
  • Να γνωρίζετε, μπορεί να έχετε ακούσει για την κόλαση. Βασικά σημαίνει ότι έχετε μια αναδρομική δομή επιστροφών κλήσεων (επιστροφές κλήσεων εντός επιστροφής κλήσης εντός επιστροφής κλήσης και ούτω καθεξής). Αυτό δεν είναι πρακτικό.

Παράδειγμα

Ας υποθέσουμε ότι ο Elon Musk στο SpaceX χρειάζεται μια λειτουργικότητα που θα πυροδοτήσει τους 27 Merlin κινητήρες του Falcon Heavy (τον πιο ισχυρό πύραυλο στον κόσμο με έναν παράγοντα δύο) όταν πατηθεί ένα κουμπί.

ES5

ES6

Παρατηρήστε ότι περιμένει να συμβεί ένα συμβάν (κάντε κλικ σε ένα κουμπί) πριν εκτελέσετε μια ενέργεια (ενεργοποιήστε τους κινητήρες). Εν συντομία, μεταβιβάζουμε τη fireUpEngines()λειτουργία ως όρισμα (callback) στη pressButton()λειτουργία. Όταν ο χρήστης πατά το κουμπί, ενεργοποιεί τους κινητήρες.

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

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

PS Αν σας άρεσε αυτό το άρθρο και θέλετε περισσότερα σαν κι αυτά, παρακαλώ χτυπήστε ❤ και μοιραστείτε με φίλους, είναι καλό κάρμα