5 גורמים נפוצים לשגיאות JavaScript (וכיצד להימנע מהם)

JavaScript (JS) היא שפת תכנות בכל מקום, גמישה ופופולרית רחבה – אם כי היא מועדת גם לשגיאות ובאגים שגורמים לרוב המפתחים להזעזע ולהתחרפן..


JS משמש בהרחבה להפעלת אינטראקטיביות משתמשים בצד הלקוח של מרבית יישומי האינטרנט. ללא JavaScript, אולי הדברים ברשת עשויים להיות חסרי חיים ומעוררי גירוי. עם זאת, הפילוגים והזרמים של השפה גורמים לעיתים למפתחים לקיים איתה יחסי אהבה-שנאה.

תקלות ב- JavaScript גורמות ליישומים להניב תוצאות בלתי צפויות ופוגעות בחוויית המשתמש. לאחרונה לימוד על ידי אוניברסיטת קולומביה הבריטית (UBC) ביקש לברר את גורמי השורש וההשפעה של שגיאות JavaScript ותקלות. תוצאות המחקר חשפו כמה דפוסים נפוצים הפוגעים בביצועים של תוכניות JS.

להלן תרשים עוגה המראה מה גילו החוקרים:

בפוסט בבלוג זה נמחיש כמה מהסיבות השכיחות לתקלות JavaScript שהודגשו במחקר (פלוס אחרות בהן אנו נתקלים מדי יום) וכיצד להפוך את היישומים שלך פחות מועדים לכישלונות..

קשור ל- DOM

מודל אובייקט המסמך (DOM) ממלא תפקיד חיוני באינטראקטיביות של אתרים. ממשק ה- DOM מאפשר לתפעל את התוכן, הסגנון והמבנה של דף אינטרנט. הפיכת דפי אינטרנט רגילים ל- HTML אינטראקטיביים – או מניפולציה של ה- DOM – היא עצם הסיבה לכך ששפת התכנות JavaScript יצאה לאור.

לכן, אפילו עם הטכנולוגיות JavaScript של Backend כמו Node.js, העבודה עם DOM עדיין מהווה נתח גדול ממה שהשפה עושה. לכן ה- DOM הוא דרך משמעותית להצגת באגים ושגיאות ביישומי JavaScript.

אין זה מפתיע שמחקר דוחות באגים ב- JavaScript גילה שנושאים הקשורים ל- DOM אחראים לרוב הפגמים, 68%.

לדוגמה, חלק מתכנתי JavaScript בדרך כלל מבצעים את הטעות בהתייחס אלמנט DOM לפני שהוא נטען, מה שמוביל לשגיאות קוד.

document.getElementById ("מכולה") .innerHTML = "באגים ושגיאות נפוצים של JS";

אם הקוד למעלה מופעל בדפדפן Chrome, הוא יזרוק שגיאה, אותה ניתן לראות במסוף המפתחים:

השגיאה נזרקת מכיוון שקוד JavaScript בדרך כלל מבוצע לפי הסדר שהוא מופיע במסמך. כיוון שכך, הדפדפן אינו מודע לאלמנט שהפנה אליו כאשר הקוד פועל.

כדי לפתור בעיה כזו אתה יכול להשתמש בגישות שונות. השיטה הפשוטה ביותר היא למקם את הקוד לפני תחילת תג הסקריפט. אתה יכול גם להשתמש בספריית JavaScript כמו jQuery כדי לוודא שה- DOM נטען קודם לפני הגישה אליו.

document.getElementById ("מכולה") .innerHTML = "באגים ושגיאות נפוצים של JS";

מבוסס תחביר

שגיאות תחביר מתרחשות כאשר מתורגמן JavaScript אינו מצליח לבצע קוד שגוי מבחינה תחבירית. אם יצירת אפליקציה והמתורגמן צופה באסימונים שאינם תואמים לתחביר הסטנדרטי של שפת התכנות JavaScript, זה יזרוק שגיאה. על פי מחקר דוח הבאגים ב- JavaScript, שגיאות מסוג זה אחראיות ל- 12% מכל השגיאות בשפה.

טעויות דקדוקיות, כמו סוגריים חסרים או סוגריים שלא תואמים, הם הגורמים העיקריים לשגיאות תחביר ב- JavaScript..

לדוגמה, כאשר עליך להשתמש בהצהרות מותנות כדי להתמודד עם תנאים מרובים, אתה עלול להחמיץ לספק את הסוגריים כנדרש, מה שמוביל לפגמים בתחביר.

הבה נבחן את הדוגמא הבאה.

אם ((x > y) && (י < 77) {
// קוד נוסף כאן
}

כן, הסגירה האחרונה של ההצהרה המותנית חסרה. האם שמת לב לטעות בקוד שלמעלה?

בואו נתקן את זה.

אם ((x > y) && (י < 77)) {
// קוד נוסף כאן
}

כדי להימנע משגיאות תחביר כאלה, עליכם להקדיש זמן ללימוד הכללים הדקדוקיים של שפת התכנות JavaScript. בעזרת תרגול קידוד נרחב, אתה יכול לאתר את הטעויות הדקדוקיות בקלות ולהימנע מלשלוח אותן באמצעות היישום המפותח שלך.

שימוש לא נכון במילות מפתח לא מוגדרות / null

חלק ממפתחי JavaScript לא יודעים להשתמש ב- לא מוגדר ו ריק מילות מפתח נכון. למעשה, המחקר דיווח כי שימוש לא נכון במילות המפתח מהווה 5% מכל באגי ה- JavaScript.

ה ריק מילת מפתח היא ערך הקצאה, שבדרך כלל מוקצה למשתנה כדי לציין ערך שאינו קיים. למרבה ההפתעה, ריק הוא גם אובייקט JavaScript.

הנה דוגמה:

var codeJS = null;

console.log (codeJS);
// הפלט הוא null

console.log (typeof codeJS);
// פלט הוא אובייקט

מצד שני, לא מוגדר מציין שמשתנה או כל מאפיין אחר, שכבר הוכרז, חסר ערך שהוקצה. זה יכול גם לרמוז כי לא הוכרז דבר. לא מוגדר הוא סוג של עצמו.

הנה דוגמה:

var codeJS;

console.log (codeJS);
// הפלט אינו מוגדר

console.log (typeof codeJS);
// הפלט אינו מוגדר

מעניין לציין שאם מפעיל השוויון ומפעיל הזהות רגילים להשוות בין ריק ו לא מוגדר מילות מפתח, אלה האחרות אינן רואות אותן כשוות.

console.log (null == לא מוגדר);
// הפלט נכון

console.log (null === לא מוגדר);
// הפלט שגוי

לכן, ידיעת השימוש הנכון ב- ריק ו לא מוגדר מילות מפתח יכולות לעזור לך להימנע מחדרת באגים בתוכניות JavaScript שלך.

שיטות לא מוגדרות

גורם נפוץ נוסף לבעיות ב- JavaScript הוא קריאה לשיטה מבלי לספק את ההגדרה הקודמת שלה. חוקרי UBC גילו כי טעות זו מובילה ל -4% מכל שגיאות JavaScript.

הנה דוגמה:

var coder = {
שם: "פיטר",
גיל: 27,
מדבר () {
console.log (שם זה);
}
};
coder.speakNow ();

הנה השגיאה הנראית במסוף המפתחים של Chrome:

השגיאה שלעיל מתרחשת מכיוון שהפונקציה הנקראת, speakNow (), לא הוגדרה בקוד JavaScript.

שימוש לא נכון בהצהרת ההחזרה

ב- JavaScript, ה- לחזור הצהרה משמשת לעצירת הפעלת פונקציה כך שניתן יהיה להציג את הערך שלה. אם משתמשים בטעות, הצהרת ההחזרה עלולה לפגוע בביצועים האופטימליים של יישומים. על פי המחקר, שימוש שגוי בהצהרת ההחזרה מוביל ל -2% מכלל הבאגים ביישומי JavaScript.

לדוגמה, חלק מתכנתי JavaScript בדרך כלל טועים בשבירת הצהרת ההחזרה בצורה שגויה.

אמנם אתה יכול לשבור הצהרת JavaScript בשתי שורות ועדיין לקבל את התפוקה הנדרשת, אבל שבירת הצהרת ההחזרה מזמינה אסון ליישום שלך.

הנה דוגמה:

מספר פונקציה (n) {
var להוסיף = 5;
להחזיר;
n + הוסף;
}
console.log (מספר (10));

כאשר מופעל הקוד לעיל, שגיאה לא מוגדרת נצפתה במסוף המפתחים של Chrome:

לכן, עליך להימנע מלשבור לחזור הצהרות בקוד JavaScript שלך.

סיכום

שפת התכנות של JavaScript בצד הלקוח מגיעה עם יכולות נרחבות מצוינות להפעלת הפונקציונליות של יישומי אינטרנט מודרניים. עם זאת, אם אינך מבין את המוזרויות הגורמות לשפה לעבוד, ניתן לפגוע בביצועים של היישומים שלך.

יתר על כן, מפתחי JavaScript דורשים כלים רב-תכליתיים לפתרון בעיות בביצועי היישומים שלהם וגילוי באגים ושגיאות במהירות.

לכן, עם חבילה מקיפה של כלי בדיקה, תוכלו לזהות בביטחון את החריגות הפוגעות בביצועים של אתרכם. זה מה שאתה צריך כדי לשפר את ביצועי האתר שלך ולהשיג חווית משתמש מיטבית.

תכנות JavaScript ללא שגיאות שמחה!

מאמר שנכתב על ידי אלפריק אודידי

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map