ด้วยการเกิดขึ้นของแอปพลิเคชันส่วนหน้าของเว็บที่หลากหลาย นักพัฒนาจะต้องตรวจสอบอีกครั้งและให้ความสนใจกับความสามารถและการใช้ภาษา JavaScript โดยละทิ้งรูปแบบที่ผ่านมาของการเพียงแค่ "คัดลอก/วาง" สคริปต์ทั่วไปเพื่อทำงานส่วนหน้าแบบง่ายๆ ให้เสร็จสิ้น . ภาษา JavaScript เองเป็นภาษาสคริปต์ที่พิมพ์ได้ไม่ดีนักซึ่งมีข้อจำกัดที่หลวมกว่าภาษา C++ หรือ Java แนวคิดการเขียนโปรแกรมเชิงฟังก์ชันที่เน้นฟังก์ชันทั้งหมดยังช่วยให้นักพัฒนามีการใช้งานไวยากรณ์ที่ยืดหยุ่นมากขึ้น อย่างไรก็ตาม แม้ว่าความยืดหยุ่นนี้จะนำมาซึ่งประสิทธิภาพ แต่ก็กลายเป็นฝันร้ายสำหรับนักพัฒนา JavaScript มือใหม่หรือไม่มีประสบการณ์ รูปแบบการเขียนโค้ดที่แตกต่างกันและพฤติกรรมของโค้ดที่ผิดพลาดส่งผลกระทบอย่างมากต่อความสามารถในการอ่านและความเสถียรของโค้ดโดยรวม และได้กลายเป็นหนึ่งในปัญหาที่พบบ่อยที่สุดในเว็บโปรเจ็กต์
ดังนั้นเราจึงต้องการเครื่องมือคุณภาพโค้ด JavaScript ที่มีประสิทธิภาพ เพื่อให้เราสามารถค้นพบและแก้ไขปัญหาที่ซ่อนอยู่ในโค้ด JavaScript ได้ทันทีและรับประกันคุณภาพของการจัดส่งโค้ด ในฐานะเครื่องมือตรวจสอบคุณภาพโค้ด JavaScript ที่ยืดหยุ่นและมีประสิทธิภาพ JSLint ช่วยให้ผู้ใช้สามารถระบุรูปแบบการเขียนโค้ดที่ตรงกับความต้องการในการพัฒนาแอปพลิเคชันเฉพาะ ทำให้โครงการทั้งหมดเป็นหนึ่งเดียวในรูปแบบการทำงานที่ขับเคลื่อนด้วย "กฎ" นี้ทำให้ JSLint ใช้งานได้ สำหรับความต้องการการตรวจจับโค้ดที่แตกต่างกัน บทความนี้จะแนะนำผู้อ่านให้รู้จักกับแนวคิดพื้นฐานและฟังก์ชันของ JSLint อธิบายวิธีทำงานตามกฎ จากนั้นจึงอธิบายการใช้งานพื้นฐานผ่านตัวอย่าง สุดท้ายจะแนะนำวิธีรวม JSLint เข้ากับกระบวนการแอปพลิเคชันของ Ant และ Eclipse เพื่อสาธิตทุกด้าน วิธีใช้ JSLint ในงานพัฒนารายวัน
JSLint.js คืออะไร
เนื่องจากเป็นภาษาใหม่ที่มีไวยากรณ์ที่ยืดหยุ่นและข้อกำหนดด้านรูปแบบที่ค่อนข้างหลวม JavaScript จึงมีรูปแบบโค้ดที่น่าสับสนและการใช้คุณลักษณะบางอย่างของภาษาไม่ถูกต้อง ซึ่งมักจะส่งผลให้ผลิตภัณฑ์ที่จัดส่งในขั้นสุดท้ายมีข้อผิดพลาดที่ไม่คาดคิดมากมายที่เกิดจากรูปแบบการทำงานหรือข้อผิดพลาดหากเป็นเช่นนั้น ปัญหาที่เป็นนิสัยไม่ได้รับการชี้ให้เห็นและแก้ไขทันเวลา แต่มักจะเกิดขึ้นอีกในระหว่างกระบวนการวนซ้ำของโครงการ ซึ่งส่งผลกระทบร้ายแรงต่อความเสถียรและความปลอดภัยของผลิตภัณฑ์บนเว็บ JSLint เป็นเครื่องมือที่สร้างขึ้นโดย Douglas Crockford เพื่อแก้ไขปัญหาดังกล่าว นอกเหนือจากการชี้ให้เห็นแบบแผนที่ไม่สมเหตุสมผลเหล่านี้แล้ว JSLint ยังสามารถทำเครื่องหมายปัญหาเชิงโครงสร้างได้อีกด้วย แม้ว่า JSLint จะไม่สามารถรับประกันได้ว่าตรรกะของโค้ดนั้นถูกต้อง แต่ก็สามารถช่วยค้นหาข้อผิดพลาดและสอนแนวทางปฏิบัติในการเขียนโค้ดที่ดีให้กับนักพัฒนาได้ เป็นมูลค่าการกล่าวขวัญว่าเครื่องมือ JSLint นั้นเป็นโค้ด JavaScript เช่นกัน มันเป็นสคริปต์ JavaScript ที่ตรวจสอบคุณภาพของโค้ด JavaScript การตรวจสอบคุณภาพของสคริปต์ JavaScript ของ JSLint ประกอบด้วยประเด็นต่อไปนี้เป็นหลัก:
• ตรวจหาข้อผิดพลาดทางไวยากรณ์: ตัวอย่างเช่น การจับคู่วงเล็บปีกกา "{}" ที่ไม่ถูกต้อง
•ข้อกำหนดคำจำกัดความของตัวแปร: เช่นการตรวจจับตัวแปรที่ไม่ได้กำหนด
•ข้อกำหนดเฉพาะของรูปแบบโค้ด: ตัวอย่างเช่น เครื่องหมายอัฒภาคหายไปที่ท้ายประโยค
• การตรวจจับการใช้งานคุณลักษณะภาษาเส็งเคร็ง: ข้อจำกัดการใช้งาน เช่น eval และ with
การอัปเดตเวอร์ชันของ JSLint เปิดใช้งานแล้ว ณ เวลาที่เขียนบทความนี้ JSLint เวอร์ชันล่าสุดเผยแพร่เมื่อวันที่ 10-10-2553 โปรแกรมแก้ไขโค้ดกระแสหลักหลายตัวให้การสนับสนุนเพิ่มเติมที่ดีสำหรับ JSLint รวมถึง Eclipse, VS2008 และอื่นๆ
ปัจจุบันมีเครื่องมือตรวจจับโค้ด JavaScript จำนวนมากที่มีฟังก์ชันคล้ายกับ JSLint รวมถึง: YUI Test, Firebug, MS Script Debugger, CompanionJS เป็นต้น ส่วนใหญ่มีอยู่ในรูปแบบของปลั๊กอินของเบราว์เซอร์ในเบราว์เซอร์ไคลเอนต์เพื่อเรียกใช้ JavaScript ข้อแตกต่างที่สำคัญระหว่าง JSLint และเครื่องมือเหล่านี้ก็คือ ให้ความสำคัญกับการตรวจจับและการดีบักรูปแบบโค้ดแบบคงที่มากกว่า ซึ่งเป็นสิ่งที่จำเป็นและสนับสนุนให้มีการก่อสร้างอย่างต่อเนื่องในการพัฒนาแบบ Agile ที่ร้อนแรงในปัจจุบัน
ทำความเข้าใจกฎ JSLint
หลักการสำคัญของการตรวจสอบคุณภาพโค้ดของ JSLint อยู่ในชุดกฎที่กำหนดโดยผู้ใช้ กฎที่กำหนดโดย JSLint เป็นค่าเริ่มต้นประกอบด้วยรูปแบบการพัฒนาที่นักพัฒนาเว็บสั่งสมมาหลายปีและถือว่ารูปแบบเหล่านั้นไม่ดี เราสามารถเลือกสร้างชุดกฎเฉพาะได้ตามความต้องการของโครงการของเราเอง JSLint จะสแกนสคริปต์ JavaScript ตามนั้นและให้ข้อมูลคำอธิบายปัญหาที่เกี่ยวข้อง กฎจะอยู่ในรูปแบบของคู่คีย์-ค่าหลายชุด: [param:option] โดยมีชื่อกฎเป็นคีย์ และไม่ว่ากฎจะถูกเรียกเป็นค่าหรือไม่ก็ตาม ตัวอย่างเช่น กฎ: "plusplus:true" ไม่อนุญาตให้ใช้ตัวดำเนินการ ++ และ -- ปรากฏขึ้น และ "undef:true" ไม่อนุญาตให้ใช้ตัวแปรที่ไม่ได้กำหนด
เนื่องจากเครื่องมือ JSLint นั้นเป็นสคริปต์ JS ธรรมดา การดำเนินการจึงอาศัยกลไกรันไทม์ JS ตามธรรมชาติ หลังจากโหลดโดยกลไกแล้ว เครื่องมือจะสร้างออบเจ็กต์ฟังก์ชัน JSLint ส่วนกลางในหน่วยความจำ แบบแรกใช้เพื่อระบุสตริงหรืออาร์เรย์สตริงที่สร้างขึ้นหลังจากแยกวิเคราะห์ไฟล์สคริปต์ที่จะตรวจพบ และแบบหลังแสดงถึงตัวเลือกกฎที่ผู้ใช้กำหนด หากตัวเลือกว่างเปล่า JSLint จะใช้กฎเริ่มต้นในการสแกนและตรวจหาแหล่งที่มา
กระบวนการตรวจจับทั้งหมดเป็นกระบวนการดำเนินการของฟังก์ชัน JSLINT (แหล่งที่มา ตัวเลือก) ที่มีอยู่ในสคริปต์ เมื่อสคริปต์ต้นทางที่ระบุผ่านการตรวจหาภายใต้เงื่อนไขตัวเลือก JSLint จะส่งคืน true มิฉะนั้นจะส่งคืน false และในเวลานี้ สามารถรับข้อมูลข้อผิดพลาดโดยละเอียดได้ผ่านอ็อบเจ็กต์ JSLINT.errors รูปที่ 1 แสดงกระบวนการทำงานทั้งหมดของ JSLint
รูปที่ 1 แผนผังของกระบวนการทำงานของ JSLint
ดังที่แสดงในภาพ มีสามวิธีในการกำหนดค่าชุดกฎ:
1. แก้ไขกฎเริ่มต้นโดยตรงโดยการแก้ไขซอร์สโค้ด JSLint.js
2. เมื่อฟังก์ชัน JSLint ทำงาน ให้ตั้งค่าพารามิเตอร์ตัวเลือกพร้อมกันและเปลี่ยนตัวเลือกกฎแบบไดนามิก (เขียนทับครั้งแรก) วิธีนี้เหมาะสำหรับการใช้กฎที่กำหนดเองชุดเดียวกันสำหรับไฟล์แบตช์ js
3. เพิ่มกฎพิเศษ (การเขียนทับครั้งที่สอง) ที่ใช้กับโค้ดของไฟล์ js เดียวโดยการเพิ่มกฎประเภทคำอธิบายประกอบลงในส่วนหัวของไฟล์ js ที่จะตรวจพบ วิธีนี้เหมาะสำหรับการตั้งค่ากฎการตรวจจับเฉพาะสำหรับไฟล์ js ที่แตกต่างกัน และโดยปกติจะใช้เพื่อแนะนำตัวแปรร่วมบางตัวในไฟล์