Ένας πρακτικός οδηγός για τις μονάδες ES6

Δομοστοιχεία ES6

Μία από τις σημαντικότερες προκλήσεις κατά τη δημιουργία ενός web-app είναι το πόσο γρήγορα μπορείτε να κλιμακώσετε και να ανταποκριθείτε στις ανάγκες της αγοράς. Όταν η ζήτηση (απαιτήσεις) αυξάνεται, οι δυνατότητες (χαρακτηριστικά) αυξάνονται επίσης. Επομένως, είναι σημαντικό να έχετε μια σταθερή αρχιτεκτονική δομή, ώστε η εφαρμογή να αναπτύσσεται με βιολογικό τρόπο. Δεν θέλουμε να καταλήξουμε σε καταστάσεις όπου η εφαρμογή δεν μπορεί να κλιμακωθεί επειδή όλα στην εφαρμογή είναι βαθιά μπλεγμένα.

Γράψτε κώδικα που είναι εύκολο να διαγραφεί, δεν είναι εύκολο να επεκταθεί.
- Tef, ο προγραμματισμός είναι τρομερός

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

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

TL; DR - Αν θέλετε να δείτε ένα πρακτικό παράδειγμα όπου δημιουργούμε ένα ταμπλό χρησιμοποιώντας δομοστοιχεία ES6 από αρχιτεκτονική σχεδίαση, μεταβείτε στην ενότητα 4.

Εδώ πρόκειται για το τι θα εξετάσουμε

  1. Γιατί χρειάζονται δομοστοιχεία ES6
  2. Πίσω στις ημέρες κατά τις οποίες τα σενάρια φορτώθηκαν με το χέρι
  3. Πώς λειτουργούν οι μονάδες ES6 (εισαγωγή έναντι εξαγωγής)
  4. Ας φτιάξουμε ένα ταμπλό με ενότητες
  5. Τεχνικές βελτιστοποίησης για παράδειγμα του ταμπλό
Αν θέλετε να γίνετε καλύτερος προγραμματιστής ιστού, να ξεκινήσετε τη δική σας επιχείρηση, να διδάξετε άλλους ή να βελτιώσετε τις ικανότητές σας ανάπτυξης, θα δημοσιεύσω εβδομαδιαίες συμβουλές και κόλπα στις πιο πρόσφατες γλώσσες του ιστού.

1. Γιατί χρειάζονται δομοστοιχεία ES6

Ας δούμε μερικά σενάρια σχετικά με το γιατί οι ενότητες είναι σχετικές.

Σενάριο 1 - Μην επανεφεύρετε τον τροχό

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

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

Σενάριο 2 - Φραγμός γνώσης

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

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

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

Σενάριο 3 - Απροσδόκητη συμπεριφορά

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

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

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

2. Πίσω στις ημέρες κατά τις οποίες τα σενάρια φορτώθηκαν με το χέρι

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

Ο λόγος είναι ότι η HTML σε μια σελίδα φορτώνεται με τη σειρά που εμφανίζεται, πράγμα που σημαίνει ότι δεν μπορούμε να φορτώσουμε δέσμες ενεργειών πριν τελειώσει η φόρτωση του περιεχομένου μέσα στο στοιχείο .

Για παράδειγμα, εάν προσπαθήσετε να αποκτήσετε πρόσβαση σε ένα στοιχείο μέσα στην ετικέτα χρησιμοποιώντας document.getElementById ("id-name") και το στοιχείο δεν έχει φορτωθεί ακόμα, τότε θα λάβετε ένα αόριστο σφάλμα. Για να βεβαιωθείτε ότι τα σενάρια έχουν φορτωθεί σωστά μπορούμε να χρησιμοποιήσουμε την αναβολή και την ανίχνευση. Ο πρώτος θα βεβαιωθεί ότι κάθε δέσμη ενεργειών φορτώνεται με τη σειρά που εμφανίζεται, ενώ το τελευταίο φορτώνει το σενάριο όποτε είναι διαθέσιμο.

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

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

Διαχωρισμός ανησυχιών

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

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

Οι δηλώσεις εισαγωγής και εξαγωγής

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

Ο κανόνας του αντίχειρα είναι, για να εισαγάγετε κάτι, πρώτα πρέπει να το εξάγετε.

Και τι μπορούμε να εξάγουμε;

  • Μια μεταβλητή
  • Ένα αντικείμενο κυριολεκτικά
  • Μια τάξη
  • Μια λειτουργία
  • ++

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

Και στη συνέχεια απλά φορτώστε το script app.js στο index.html. Αλλά πρώτα, για να το λειτουργήσουμε, πρέπει να χρησιμοποιήσουμε type = "module" (source) για να μπορέσουμε να χρησιμοποιήσουμε την εισαγωγή και εξαγωγή για την εργασία με τις ενότητες.

Όπως μπορείτε να δείτε, το index.html είναι πλέον υπεύθυνο για ένα σενάριο, το οποίο διευκολύνει τη συντήρηση και την κλιμάκωση. Εν ολίγοις, το script app.js γίνεται το σημείο εισαγωγής που μπορούμε να χρησιμοποιήσουμε για να ξεκινήσουμε την εφαρμογή μας.

Σημείωση: Δεν θα συνιστούσα τη φόρτωση όλων των σεναρίων σε ένα αρχείο όπως το app.js, εκτός από εκείνα που το απαιτούν.

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

3. Πώς λειτουργούν τα υποσυστήματα ES6

Ποια είναι η διαφορά μεταξύ μιας ενότητας και ενός στοιχείου; Μια ενότητα είναι μια συλλογή μικρών ανεξάρτητων μονάδων (εξαρτημάτων) που μπορούμε να επαναχρησιμοποιήσουμε στην εφαρμογή μας.

Ποιος είναι ο σκοπός;

  • Συμπεριλάβετε τη συμπεριφορά
  • Εύκολη συνεργασία
  • Εύκολο στη συντήρηση
  • Εύκολο στην κλίμακα

Ναι, διευκολύνει την ανάπτυξη!

Τι είναι λοιπόν ένα συστατικό;

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

Τι είναι ένα στοιχείο

Τι είναι πραγματικά μια ενότητα;

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

Τι είναι μια ενότητα

Είναι μια πρόκληση να κάνουμε τα πάντα επαναχρησιμοποιήσιμα

Ένας κύριος μηχανικός με πάνω από 30 χρόνια εμπειρίας στον τομέα της ηλεκτρολογικής μηχανικής κάποτε είπε ότι δεν μπορούμε να αναμένουμε ότι όλα θα ξαναχρησιμοποιηθούν εξαιτίας του χρόνου, του κόστους και ότι όλα δεν προορίζονται για επαναχρησιμοποίηση. Είναι προτιμότερο να επαναχρησιμοποιηθεί σε κάποιο βαθμό από το να περιμένουμε τα πράγματα να επαναχρησιμοποιηθούν 100%.

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

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

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

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

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

Ο Διευθύνων Σύμβουλος της υπερχείλισης Stack, Joel Spolsky, λέει:

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

4. Ας φτιάξουμε ένα ταμπλό με ενότητες

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

Ο κώδικας για το παράδειγμα μπορεί να βρεθεί εδώ.

Βήμα 1 - Σχεδιάστε αυτό που χρειάζεστε

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

Έτσι είναι αυτό που χρειαζόμαστε με βάση τον αρχιτεκτονικό σχεδιασμό.

  • Στοιχεία: χρήστες.js, user-profile.js και issues.js
  • Διαμορφώσεις: header.js και sidebar.js
  • Πίνακας ελέγχου: dashboard.js

Όλα τα στοιχεία και οι διατάξεις θα φορτωθούν στο dashboard.js και στη συνέχεια θα εκκινήσουμε το dashboard.js στο index.js.

Αρχιτεκτονικός σχεδιασμός του ταμπλό μας

Γιατί λοιπόν έχουμε ένα φάκελο σχεδιαγράμματος και εξαρτημάτων;

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

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

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

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

Βήμα 2 - Διάρθρωση φακέλου εγκατάστασης

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

- ταμπλό οργάνων
- συστατικά
- διατάξεις
index.html
index.js (σημείο εισόδου)

Και σε κάθε αρχείο μέσα στο φάκελο, εξάγουμε μια κλάση.

- ταμπλό οργάνων
    dashboard.js
- συστατικά
    issues.js
    user-profile.js
    users.js
- διατάξεις
    header.js
    sidebar.js
index.html
index.js (σημείο εισόδου)

Βήμα 3 - Εφαρμογή

Η δομή του φακέλου έχει ρυθμιστεί, οπότε το επόμενο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε το στοιχείο (κατηγορία) σε κάθε αρχείο και, στη συνέχεια, να το εξάγετε. Η συνθήκη κώδικα είναι η ίδια για τα υπόλοιπα αρχεία: κάθε συνιστώσα είναι απλώς μια κλάση και μια μέθοδος που υποστηρίζει το "x component is loaded" όπου το x είναι το όνομα του στοιχείου για να υποδείξει ότι το στοιχείο έχει φορτωθεί.

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

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

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

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

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

Προς το παρόν, η εφαρμογή δεν εξάγει τίποτα επειδή δεν έχουμε εκτελέσει τη μέθοδο loadDashboard (). Για να το λειτουργήσει πρέπει να εισαγάγουμε την ενότητα του πίνακα ελέγχου στο αρχείο index.js όπως αυτό:

Και μετά οι έξοδοι της κονσόλας:

Τα φορτισμένα στοιχεία ES6

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

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

Δύο μοναδικές περιπτώσεις του ταμπλό

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

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

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

5. Τεχνικές βελτιστοποίησης για παράδειγμα πίνακα οργάνων

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

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

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

Εδώ θέλουμε να επιτύχουμε:

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

Δημιουργήστε μια δυναμική διεπαφή (επίσης γνωστή ως βαρέλια)

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

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

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

Το index.js είναι το πρώτο αρχείο που φορτώνει όταν έχουμε πρόσβαση στο χώρο του ριζικού φακέλου - είναι το ίδιο με το index.html που εκκινεί το περιεχόμενο HTML. Αυτό σημαίνει ότι δεν χρειάζεται να γράφουμε ρητά την εισαγωγή {component} από το αρχείο ./components/index.js, αλλά να εισάγουμε {component} από το ./components.

Δείτε πώς μια δυναμική διεπαφή φαίνεται.

Χρησιμοποιώντας μια δυναμική διεπαφή, καταλήγουμε με ένα λιγότερο επίπεδο ρίζας για πρόσβαση, και επίσης λιγότερο κώδικα.

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

Καταργήσαμε τις τέσσερις παρουσίες στο dashboard.js μας και δημιουργήσαμε ένα στιγμιότυπο κατά το χρόνο εκτέλεσης όταν εξάγεται κάθε στοιχείο. Εάν θέλετε να αποφασίσετε το όνομα του αντικειμένου, μπορείτε να κάνετε εξαγωγή του προεπιλεγμένου νέου πίνακα εργαλείων () και, στη συνέχεια, να εισαγάγετε το dashView χωρίς τις σγουρές αγκύλες.

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

Τέλος, φορτώνουμε όλα τα εξαρτήματα και τις διατάξεις με μία μέθοδο.

συμπέρασμα

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

Τα ταψιά:

  • Με τα δομοστοιχεία ES6 μπορούμε εύκολα να επαναχρησιμοποιήσουμε, να διατηρήσουμε, να διαχωρίσουμε και να εγκλωβίσουμε τα εξαρτήματα από την αλλαγή από εξωτερική συμπεριφορά
  • Μια ενότητα είναι μια συλλογή στοιχείων
  • Ένα στοιχείο είναι ένα μεμονωμένο μπλοκ
  • Μην προσπαθήσετε να κάνετε όλα τα πάντα επαναχρησιμοποιήσιμα καθώς απαιτεί χρόνο και πόρους και συχνά δεν το επαναχρησιμοποιούμε
  • Δημιουργήστε ένα αρχιτεκτονικό διάγραμμα πριν βυθιστείτε στον κώδικα
  • Προκειμένου τα εξαρτήματα να είναι διαθέσιμα σε άλλα αρχεία, πρέπει πρώτα να εξαγάγουμε και στη συνέχεια να εισαγάγουμε
  • Χρησιμοποιώντας το index.js (ίδια ιδέα για τον τύπο index.ts) μπορούμε να δημιουργήσουμε δυναμικές διεπαφές (βαρέλια) για γρήγορη πρόσβαση στα πράγματα που χρειαζόμαστε με λιγότερο κώδικα και λιγότερες ιεραρχικές διαδρομές
  • Μπορείτε να εξαγάγετε μια νέα παρουσία κατά τη διάρκεια εκτέλεσης, χρησιμοποιώντας την εξαγωγή, επιτρέψτε objectName = new ClassName ()

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

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

  • Μια σύγκριση μεταξύ του γωνιακού και του React
  • Ένα χαοτικό μυαλό οδηγεί σε χαοτικό κώδικα
  • Προγραμματιστές που συνεχώς θέλουν να μάθουν νέα πράγματα
  • Μάθετε αυτές τις βασικές έννοιες Web
  • Ενισχύστε τις δεξιότητές σας με αυτές τις σημαντικές μεθόδους JavaScript
  • Προγραμματίστε ταχύτερα δημιουργώντας προσαρμοσμένες εντολές bash

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

Εάν σας άρεσε αυτό το άρθρο και θέλετε περισσότερα σαν αυτά, παρακαλώ χτυπήστε (❤) και μοιραστείτε με φίλους ή συναδέλφους, είναι καλό κάρμα.