Η JavaScript (JS) είναι μια πανταχού παρούσα, ευέλικτη και ευρέως δημοφιλής γλώσσα προγραμματισμού—αν και είναι επίσης επιρρεπής σε σφάλματα και σφάλματα που κάνουν τους περισσότερους προγραμματιστές να συνοφρυώνονται και να φρικάρουν.
Το JS χρησιμοποιείται εκτενώς για την ενίσχυση της αλληλεπίδρασης με τον χρήστη στην πλευρά του πελάτη των περισσότερων εφαρμογών Ιστού. Χωρίς JavaScript, ίσως τα πράγματα στον ιστό θα μπορούσαν να είναι άψυχα και μη διεγερτικά. Ωστόσο, οι άμπωτες και οι ροές της γλώσσας μερικές φορές κάνουν τους προγραμματιστές να έχουν μια σχέση αγάπης-μίσους μαζί της.
Τα σφάλματα JavaScript προκαλούν τις εφαρμογές να παράγουν απροσδόκητα αποτελέσματα και βλάπτουν την εμπειρία του χρήστη. Μια μελέτη από το Πανεπιστήμιο της Βρετανικής Κολομβίας (UBC) προσπάθησε να ανακαλύψει τις βασικές αιτίες και τον αντίκτυπο των σφαλμάτων JavaScript και των σφαλμάτων. Τα αποτελέσματα της μελέτης αποκάλυψαν ορισμένα κοινά μοτίβα που βλάπτουν την απόδοση των προγραμμάτων JS.
Ακολουθεί ένα διάγραμμα πίτας που δείχνει τι ανακάλυψαν οι ερευνητές:
Σε αυτήν την ανάρτηση ιστολογίου, θα παρουσιάσουμε μερικές από τις κοινές αιτίες σφαλμάτων JavaScript που επισημαίνονται στη μελέτη (καθώς και άλλες που συναντάμε καθημερινά) και πώς να κάνετε τις εφαρμογές σας λιγότερο επιρρεπείς σε αποτυχίες.
Πίνακας περιεχομένων
Σχετικά με το DOM
Το Document Object Model (DOM) διαδραματίζει ζωτικό ρόλο στη διαδραστικότητα των ιστότοπων. Η διεπαφή DOM επιτρέπει τον χειρισμό του περιεχομένου, του στυλ και της δομής μιας ιστοσελίδας. Το να κάνετε απλές ιστοσελίδες HTML διαδραστικές —ή να χειρίζεστε το DOM— είναι ο ίδιος ο λόγος για τον οποίο κυκλοφόρησε η γλώσσα προγραμματισμού JavaScript.
Έτσι, ακόμη και με την εισαγωγή τεχνολογιών JavaScript backend όπως το Node.js, η εργασία με το DOM εξακολουθεί να αποτελεί ένα μεγάλο κομμάτι του τι κάνει η γλώσσα. Επομένως, το DOM είναι μια σημαντική οδός για την εισαγωγή σφαλμάτων και σφαλμάτων στις εφαρμογές JavaScript.
Δεν αποτελεί έκπληξη το γεγονός ότι η μελέτη αναφοράς σφαλμάτων JavaScript ανακάλυψε ότι τα ζητήματα που σχετίζονται με το DOM ευθύνονται για τα περισσότερα από τα ελαττώματα, σε ποσοστό 68%.
Για παράδειγμα, ορισμένοι προγραμματιστές JavaScript κάνουν συνήθως το λάθος να αναφέρουν ένα στοιχείο DOM προτού φορτωθεί, οδηγώντας σε σφάλματα κώδικα.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Εάν ο παραπάνω κώδικας εκτελείται στο πρόγραμμα περιήγησης Chrome, θα εμφανιστεί ένα σφάλμα, το οποίο μπορεί να φανεί στην κονσόλα προγραμματιστή:
Το σφάλμα παρουσιάζεται επειδή ο κώδικας JavaScript εκτελείται συνήθως σύμφωνα με τη σειρά που εμφανίζεται σε ένα έγγραφο. Ως εκ τούτου, το πρόγραμμα περιήγησης δεν γνωρίζει το στοιχείο
Για να λύσετε ένα τέτοιο πρόβλημα, μπορείτε να χρησιμοποιήσετε διάφορες προσεγγίσεις. Η απλούστερη μέθοδος είναι να τοποθετήσετε το
πριν από την αρχή της ετικέτας σεναρίου. Μπορείτε επίσης να χρησιμοποιήσετε μια βιβλιοθήκη JavaScript όπως το jQuery για να βεβαιωθείτε ότι το DOM έχει φορτωθεί πρώτα πριν να είναι δυνατή η πρόσβαση σε αυτό.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
</body>
</html>
Με βάση τη σύνταξη
Τα συντακτικά σφάλματα παρουσιάζονται όταν ο διερμηνέας JavaScript αποτυγχάνει να εκτελέσει έναν συντακτικά λανθασμένο κώδικα. Εάν δημιουργήσετε μια εφαρμογή και ο διερμηνέας παρατηρήσει διακριτικά που δεν ταιριάζουν με την τυπική σύνταξη της γλώσσας προγραμματισμού JavaScript, θα εμφανιστεί σφάλμα. Σύμφωνα με τη μελέτη αναφοράς σφαλμάτων JavaScript, τέτοια σφάλματα ευθύνονται για το 12% όλων των σφαλμάτων στη γλώσσα.
Τα γραμματικά λάθη, όπως οι παρενθέσεις που λείπουν ή οι αγκύλες που δεν ταιριάζουν, είναι οι κύριες αιτίες συντακτικών σφαλμάτων στο JavaScript.
Για παράδειγμα, όταν πρέπει να χρησιμοποιήσετε εντολές υπό όρους για να αντιμετωπίσετε πολλαπλές συνθήκες, μπορεί να παραλείψετε να παρέχετε τις παρενθέσεις όπως απαιτείται, οδηγώντας σε ελαττώματα σύνταξης.
Ας δούμε το παρακάτω παράδειγμα.
if((x > y) && (y < 77) {
//more code here
}
Ναι, λείπει η τελευταία παρένθεση της δήλωσης υπό όρους. Παρατηρήσατε το λάθος με τον παραπάνω κωδικό;
Ας το διορθώσουμε.
if ((x > y) && (y < 77)) {
//more code here
}
Για να αποφύγετε τέτοια συντακτικά λάθη, θα πρέπει να αφιερώσετε χρόνο στην εκμάθηση των γραμματικών κανόνων της γλώσσας προγραμματισμού JavaScript. Με την εκτεταμένη πρακτική κωδικοποίησης, μπορείτε να εντοπίσετε εύκολα τα γραμματικά λάθη και να αποφύγετε την αποστολή τους με την αναπτυγμένη εφαρμογή σας.
Ακατάλληλη χρήση ακαθόριστων/μηδενικών λέξεων-κλειδιών
Ορισμένοι προγραμματιστές JavaScript δεν γνωρίζουν πώς να χρησιμοποιούν σωστά τις απροσδιόριστες και μηδενικές λέξεις-κλειδιά. Στην πραγματικότητα, η μελέτη ανέφερε ότι η ακατάλληλη χρήση των λέξεων-κλειδιών ευθύνεται για το 5% όλων των σφαλμάτων JavaScript.
Η λέξη-κλειδί null είναι μια τιμή εκχώρησης, η οποία συνήθως εκχωρείται σε μια μεταβλητή για να δηλώσει μια ανύπαρκτη τιμή. Παραδόξως, το null είναι επίσης ένα αντικείμενο JavaScript.
Εδώ είναι ένα παράδειγμα:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
Από την άλλη πλευρά, το undefined υποδηλώνει ότι μια μεταβλητή ή οποιαδήποτε άλλη ιδιότητα, που έχει ήδη δηλωθεί, δεν έχει εκχωρηθείσα τιμή. Μπορεί επίσης να σημαίνει ότι δεν έχει δηλωθεί τίποτα. το απροσδιόριστο είναι ένας τύπος του εαυτού του.
Εδώ είναι ένα παράδειγμα:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Είναι ενδιαφέρον ότι, εάν ο τελεστής ισότητας και ο τελεστής ταυτότητας έχουν συνηθίσει να συγκρίνουν τις μηδενικές και μη καθορισμένες λέξεις-κλειδιά, ο τελευταίος δεν τις θεωρεί ίσες.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Επομένως, η γνώση της σωστής χρήσης των μηδενικών και ακαθόριστων λέξεων-κλειδιών μπορεί να σας βοηθήσει να αποφύγετε την εισαγωγή σφαλμάτων στα προγράμματα JavaScript.
Μη καθορισμένες μέθοδοι
Μια άλλη κοινή αιτία σφαλμάτων στο JavaScript είναι να κάνετε μια κλήση σε μια μέθοδο χωρίς να παρέχετε τον προηγούμενο ορισμό της. Οι ερευνητές του UBC ανακάλυψαν ότι αυτό το λάθος οδηγεί στο 4% όλων των σφαλμάτων JavaScript.
Εδώ είναι ένα παράδειγμα:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Ακολουθεί το σφάλμα που εμφανίζεται στην κονσόλα προγραμματιστή του Chrome:
Το παραπάνω σφάλμα παρουσιάζεται επειδή η καλούμενη συνάρτηση, speakNow(), δεν έχει οριστεί στον κώδικα JavaScript.
Λανθασμένη χρήση της δήλωσης επιστροφής
Στο JavaScript, η δήλωση return χρησιμοποιείται για να σταματήσει την εκτέλεση μιας συνάρτησης έτσι ώστε να μπορεί να εξάγεται η τιμή της. Εάν χρησιμοποιηθεί λανθασμένα, η δήλωση επιστροφής μπορεί να βλάψει τη βέλτιστη απόδοση των εφαρμογών. Σύμφωνα με τη μελέτη, η εσφαλμένη χρήση της δήλωσης επιστροφής οδηγεί στο 2% όλων των σφαλμάτων σε εφαρμογές JavaScript.
Για παράδειγμα, ορισμένοι προγραμματιστές JavaScript συνήθως κάνουν το λάθος να παραβιάζουν τη δήλωση επιστροφής εσφαλμένα.
Ενώ μπορείτε να σπάσετε μια δήλωση JavaScript σε δύο γραμμές και να λάβετε την απαιτούμενη έξοδο, η διακοπή της δήλωσης επιστροφής προκαλεί καταστροφή στην εφαρμογή σας.
Εδώ είναι ένα παράδειγμα:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Όταν εκτελείται ο παραπάνω κώδικας, εμφανίζεται ένα απροσδιόριστο σφάλμα στην κονσόλα προγραμματιστή του Chrome:
Επομένως, θα πρέπει να αποφύγετε την παραβίαση των δηλώσεων επιστροφής στον κώδικα JavaScript.
συμπέρασμα
Η γλώσσα προγραμματισμού JavaScript από την πλευρά του πελάτη διαθέτει εξαιρετικές εκτεταμένες δυνατότητες για την τροφοδοσία των λειτουργιών των σύγχρονων εφαρμογών Ιστού. Ωστόσο, εάν δεν καταλαβαίνετε τις ιδιορρυθμίες που κάνουν τη γλώσσα να λειτουργεί, η απόδοση των εφαρμογών σας μπορεί να ακρωτηριαστεί.
Επί πλέον, Προγραμματιστές JavaScript απαιτούν ευέλικτα εργαλεία για την αντιμετώπιση προβλημάτων της απόδοσης των εφαρμογών τους και τον γρήγορο εντοπισμό σφαλμάτων και σφαλμάτων.
Επομένως, με μια ολοκληρωμένη σειρά εργαλείων δοκιμών, μπορείτε να εντοπίσετε με σιγουριά τις ανωμαλίες που βλάπτουν την απόδοση του ιστότοπού σας. Είναι αυτό που χρειάζεστε για να βελτιώσετε την απόδοση του ιστότοπού σας και να επιτύχετε τη βέλτιστη εμπειρία χρήστη.
Χαρούμενος προγραμματισμός JavaScript χωρίς σφάλματα!
Άρθρο γραμμένο από τον Alfrick Opidi