5 สาเหตุทั่วไปของข้อผิดพลาด JavaScript (และวิธีหลีกเลี่ยง)

JavaScript (JS) เป็นภาษาการเขียนโปรแกรมที่แพร่หลายยืดหยุ่นและได้รับความนิยมอย่างกว้างขวางแม้ว่าจะมีข้อผิดพลาดและข้อบกพร่องที่ทำให้นักพัฒนาส่วนใหญ่ขมวดคิ้วและประหลาด.


JS ใช้อย่างกว้างขวางเพื่อเพิ่มประสิทธิภาพการโต้ตอบกับผู้ใช้ในฝั่งไคลเอ็นต์ของเว็บแอพพลิเคชันส่วนใหญ่ หากไม่มี JavaScript อาจมีสิ่งต่าง ๆ ในเว็บที่ไร้ชีวิตและไม่มีการกระตุ้น อย่างไรก็ตาม ebbs และการไหลของภาษาบางครั้งทำให้นักพัฒนามีความสัมพันธ์ที่เกลียดชังด้วยความรัก.

ความผิดพลาดของ JavaScript ทำให้แอปพลิเคชันสร้างผลลัพธ์ที่ไม่คาดคิดและเป็นอันตรายต่อประสบการณ์ของผู้ใช้ เมื่อเร็ว ๆ นี้ ศึกษา โดย University of British Columbia (UBC) พยายามค้นหาสาเหตุที่แท้จริงและผลกระทบของข้อผิดพลาดและข้อบกพร่องของ JavaScript ผลการศึกษาพบรูปแบบทั่วไปบางอย่างที่ทำให้ประสิทธิภาพการทำงานของโปรแกรม JS ลดลง.

นี่คือแผนภูมิวงกลมแสดงสิ่งที่นักวิจัยค้นพบ:

ในโพสต์บล็อกนี้เราจะแสดงสาเหตุทั่วไปของข้อบกพร่องของ JavaScript ที่เน้นในการศึกษา (รวมถึงสาเหตุอื่น ๆ ที่เราพบเจอทุกวัน) และวิธีทำให้แอปพลิเคชันของคุณมีแนวโน้มที่จะล้มเหลวน้อยลง.

DOM ที่เกี่ยวข้อง

Document Object Model (DOM) มีบทบาทสำคัญในการโต้ตอบของเว็บไซต์ ส่วนต่อประสาน DOM ช่วยให้สามารถจัดการเนื้อหาสไตล์และโครงสร้างของหน้าเว็บได้ การทำให้หน้าเว็บ HTML ธรรมดาเป็นแบบโต้ตอบ – หรือจัดการ DOM – เป็นสาเหตุที่ทำให้ภาษาการเขียนโปรแกรม JavaScript ได้รับการเผยแพร่.

ดังนั้นแม้จะมีการเปิดตัวเทคโนโลยีแบ็กเอนด์ JavaScript อย่าง Node.js การทำงานกับ DOM ยังคงเป็นภาษาที่ยิ่งใหญ่ ดังนั้น DOM จึงเป็นช่องทางสำคัญในการแนะนำบั๊กและข้อผิดพลาดในแอปพลิเคชัน JavaScript.

ไม่แปลกใจที่การศึกษารายงานข้อผิดพลาดของ JavaScript พบว่าปัญหาที่เกี่ยวข้องกับ DOM มีส่วนรับผิดชอบต่อข้อบกพร่องส่วนใหญ่ที่ 68%.

ตัวอย่างเช่นผู้เขียนโปรแกรมจาวาสคริปต์บางคนมักทำผิดพลาดในการอ้างอิงองค์ประกอบ DOM ก่อนที่จะโหลดซึ่งนำไปสู่ข้อผิดพลาดของรหัส.

document.getElementById ("ภาชนะ") .innerHTML = "ข้อบกพร่องและข้อผิดพลาด JS ทั่วไป";

หากโค้ดด้านบนทำงานบนเบราว์เซอร์ Chrome รหัสข้อผิดพลาดจะปรากฏบนคอนโซลนักพัฒนาซอฟต์แวร์:

ข้อผิดพลาดเกิดขึ้นเนื่องจากรหัส JavaScript มักใช้งานตามลำดับที่ปรากฏบนเอกสาร ดังนั้นเบราว์เซอร์จะไม่รู้จักองค์ประกอบที่อ้างถึงเมื่อโค้ดทำงาน.

เพื่อแก้ปัญหาดังกล่าวคุณสามารถใช้วิธีการต่างๆ วิธีที่ง่ายที่สุดคือการวางไว้ก่อนจุดเริ่มต้นของแท็กสคริปต์ คุณยังสามารถใช้ไลบรารี JavaScript เช่น jQuery เพื่อให้แน่ใจว่าโหลด DOM ก่อนที่จะสามารถเข้าถึงได้.

document.getElementById ("ภาชนะ") .innerHTML = "ข้อบกพร่องและข้อผิดพลาด JS ทั่วไป";

ไวยากรณ์ตาม

มีข้อผิดพลาดทางไวยากรณ์เกิดขึ้นเมื่อล่าม JavaScript ไม่สามารถเรียกใช้รหัสที่ไม่ถูกต้อง หากการสร้างแอปพลิเคชันและล่ามจะสังเกตโทเค็นที่ไม่ตรงกับไวยากรณ์มาตรฐานของภาษาการเขียนโปรแกรม JavaScript จะทำให้เกิดข้อผิดพลาด จากการศึกษารายงานข้อผิดพลาดของ JavaScript ข้อผิดพลาดดังกล่าวมีหน้าที่รับผิดชอบ 12% ของข้อผิดพลาดทั้งหมดในภาษา.

ข้อผิดพลาดทางไวยากรณ์เช่นวงเล็บที่ขาดหายไปหรือวงเล็บเหลี่ยมที่ไม่ตรงกันเป็นสาเหตุหลักของข้อผิดพลาดทางไวยากรณ์ใน JavaScript.

ตัวอย่างเช่นเมื่อคุณต้องใช้คำสั่งแบบมีเงื่อนไขเพื่อระบุหลายเงื่อนไขคุณอาจพลาดที่จะใส่วงเล็บตามที่ต้องการซึ่งนำไปสู่ข้อบกพร่องทางไวยากรณ์.

ลองดูตัวอย่างต่อไปนี้.

ถ้า ((x > y) && (y < 77) {
// รหัสเพิ่มเติมที่นี่
}

ใช่เครื่องหมายวงเล็บสุดท้ายของข้อความสั่งเงื่อนไขหายไป คุณสังเกตเห็นความผิดพลาดจากรหัสข้างต้นหรือไม่?

มาแก้ไขให้ถูกต้อง.

ถ้า ((x > y) && (y < 77)) {
// รหัสเพิ่มเติมที่นี่
}

เพื่อหลีกเลี่ยงข้อผิดพลาดทางไวยากรณ์ดังกล่าวคุณควรใช้เวลาเรียนรู้กฎไวยากรณ์ของภาษาการเขียนโปรแกรม JavaScript ด้วยการฝึกการเข้ารหัสที่กว้างขวางคุณสามารถมองเห็นข้อผิดพลาดทางไวยากรณ์ได้อย่างง่ายดายและหลีกเลี่ยงการจัดส่งด้วยแอปพลิเคชันที่พัฒนาขึ้น.

การใช้คำหลักที่ไม่ได้กำหนด / null อย่างไม่เหมาะสม

นักพัฒนา JavaScript บางคนไม่ทราบวิธีการใช้ ไม่ได้กำหนด และ โมฆะ คำค้นหาถูกต้อง ในความเป็นจริงการศึกษารายงานว่าการใช้คำหลักที่ไม่เหมาะสมนั้นคิดเป็น 5% ของข้อบกพร่อง JavaScript ทั้งหมด.

โมฆะ keyword คือค่าการมอบหมายซึ่งโดยปกติจะถูกกำหนดให้กับตัวแปรเพื่อแสดงถึงค่าที่ไม่มีอยู่จริง อย่างแปลกใจ, โมฆะ ยังเป็นวัตถุ JavaScript.

นี่คือตัวอย่าง:

var codeJS = null;

console.log (codeJS);
// output เป็นโมฆะ

console.log (typeof codeJS);
// output เป็นวัตถุ

ในทางกลับกัน, ไม่ได้กำหนด บ่งชี้ว่าตัวแปรหรือคุณสมบัติอื่น ๆ ซึ่งได้รับการประกาศแล้วขาดค่าที่กำหนด นอกจากนี้ยังสามารถบ่งบอกว่าไม่มีการประกาศ. ไม่ได้กำหนด เป็นประเภทของตัวเอง.

นี่คือตัวอย่าง:

var codeJS;

console.log (codeJS);
// เอาต์พุตไม่ได้ถูกกำหนด

console.log (typeof codeJS);
// เอาต์พุตไม่ได้ถูกกำหนด

ที่น่าสนใจถ้าผู้ประกอบการความเท่าเทียมกันและผู้ประกอบการที่ใช้ในการเปรียบเทียบ โมฆะ และ ไม่ได้กำหนด คำหลักหลังไม่ถือว่าพวกเขาเท่ากัน.

console.log (null == undefined);
// เอาต์พุตเป็นจริง

console.log (null === undefined);
// เอาต์พุตเป็นเท็จ

ดังนั้นรู้การใช้งานที่ถูกต้องของ โมฆะ และ ไม่ได้กำหนด คำหลักสามารถช่วยคุณหลีกเลี่ยงการแนะนำบั๊กในโปรแกรม JavaScript ของคุณ.

วิธีการที่ไม่ได้กำหนด

สาเหตุทั่วไปอีกประการของข้อบกพร่องใน JavaScript คือการเรียกใช้เมธอดโดยไม่ต้องให้คำจำกัดความก่อนหน้า นักวิจัยของ UBC พบว่าข้อผิดพลาดนี้นำไปสู่ข้อผิดพลาด JavaScript 4%.

นี่คือตัวอย่าง:

var coder = {
ชื่อ: "จางไป",
อายุ: 27,
พูด () {
console.log (this.name);
}
};
coder.speakNow ();

นี่คือข้อผิดพลาดที่เห็นได้ในคอนโซลนักพัฒนาซอฟต์แวร์ของ Chrome:

ข้อผิดพลาดดังกล่าวเกิดขึ้นเนื่องจากฟังก์ชั่นที่เรียกว่า speakNow () ไม่ได้ถูกกำหนดไว้ในรหัส JavaScript.

การใช้คำสั่งส่งคืนไม่ถูกต้อง

ในจาวาสคริปต์ กลับ คำสั่งที่ใช้ในการหยุดการทำงานของฟังก์ชั่นเพื่อให้สามารถส่งออกค่าของมัน หากใช้อย่างผิดพลาดข้อความสั่งคืนอาจทำให้ประสิทธิภาพการทำงานของแอปพลิเคชันลดลง จากการศึกษาพบว่าการใช้งานคำสั่ง return ไม่ถูกต้องจะทำให้ 2% ของบั๊กทั้งหมดในแอปพลิเคชั่น JavaScript.

ตัวอย่างเช่นโปรแกรมเมอร์ JavaScript บางคนมักทำผิดพลาดในการทำลายคำสั่ง return อย่างไม่ถูกต้อง.

ในขณะที่คุณสามารถแบ่งคำสั่ง JavaScript ในสองบรรทัดและยังได้รับผลลัพธ์ที่ต้องการการทำลายคำสั่ง return คือการเชิญหายนะเข้ามาในแอปพลิเคชันของคุณ.

นี่คือตัวอย่าง:

หมายเลขฟังก์ชัน (n) {
var เพิ่ม = 5;
กลับ;
n + เพิ่ม;
}
console.log (หมายเลข (10));

เมื่อเรียกใช้โค้ดข้างต้นจะพบข้อผิดพลาดที่ไม่ได้กำหนดในคอนโซลนักพัฒนาซอฟต์แวร์ของ Chrome:

ดังนั้นคุณควรหยุดยั้งจากการแตกหัก กลับ คำสั่งในรหัส JavaScript ของคุณ.

ข้อสรุป

ภาษาการเขียนโปรแกรมจาวาสคริปต์ฝั่งไคลเอ็นต์มาพร้อมกับความสามารถที่ยอดเยี่ยมสำหรับการเพิ่มประสิทธิภาพการทำงานของเว็บแอปพลิเคชันที่ทันสมัย อย่างไรก็ตามหากคุณไม่เข้าใจนิสัยใจคอที่ทำให้ภาษาทำงานได้ประสิทธิภาพของแอปพลิเคชั่นของคุณอาจถูกทำลายได้.

นอกจากนี้, นักพัฒนาจาวาสคริปต์ ต้องการเครื่องมือที่หลากหลายสำหรับการแก้ไขปัญหาประสิทธิภาพการทำงานของแอปพลิเคชันและตรวจจับข้อบกพร่องและข้อผิดพลาดได้อย่างรวดเร็ว.

ดังนั้นด้วยชุดเครื่องมือทดสอบที่ครอบคลุมคุณสามารถระบุความผิดปกติที่ทำให้ประสิทธิภาพเว็บไซต์ของคุณแย่ลงอย่างมั่นใจ นี่คือสิ่งที่คุณต้องการในการปรับปรุงประสิทธิภาพของไซต์และรับประสบการณ์การใช้งานที่ดีที่สุด.

การเขียนโปรแกรมจาวาสคริปต์ที่ปราศจากข้อผิดพลาดมีความสุข!

บทความที่เขียนโดย Alfrick Opidi

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