ในกระบวนการพัฒนาโปรแกรม AJAX หลายๆ คนจะทำข้อผิดพลาดทั่วไปบางประการ ข้อผิดพลาดบางอย่างอาจเป็นอันตรายต่อฟังก์ชันและประสิทธิภาพของโปรแกรม AJAX ทำให้ข้อดีทั้งหมดของโปรแกรม AJAX สูญหายไป ที่นี่ผู้เขียนจะแนะนำให้คุณรู้จักกับบาปทั้งเจ็ดที่คุณต้องให้ความสนใจเมื่อพัฒนาโปรแกรม AJAX
AJAX เป็นสิ่งที่ดี ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันแบบไดนามิกได้เร็วขึ้นและมีประสิทธิภาพมากขึ้น แต่ก็มีข้อบกพร่องของตัวเองเช่นกัน
เมื่อมองแวบแรก อาจดูเหมือนว่าสามัญสำนึกเล็กน้อยจะป้องกันข้อผิดพลาดเหล่านี้ได้ และในระดับหนึ่งก็สามารถป้องกันได้ แต่เมื่อเทียบกับคู่แข่ง DHTML สถาปัตยกรรมของโปรแกรม AJAX นั้นแตกต่างอย่างสิ้นเชิง ไม่ว่าคุณจะมีสามัญสำนึกในการพัฒนาแอปพลิเคชันมากน้อยเพียงใด คุณก็ควรเรียนรู้จากบทเรียนของผู้ที่อยู่ก่อนหน้าคุณ ในบทความนี้ เราเรียกข้อผิดพลาดเหล่านี้ว่า "บาป 7 ประการ" แต่ไม่ได้เป็นตัวแทนของข้อผิดพลาดทั้งหมด
ก่อนที่เราจะเรียนรู้เกี่ยวกับข้อผิดพลาดร้ายแรงเจ็ดประการในการพัฒนา AJAX เรามาดูข้อผิดพลาดที่ร้ายแรงน้อยกว่าเจ็ดประการกันก่อน ทุกคนทำผิดพลาดเหล่านี้ ลองค้นหาใน Google แล้วคุณจะเห็นว่าข้อผิดพลาดเหล่านี้เกิดขึ้นบ่อยเพียงใด
ความผิดทางอาญาเจ็ดประการ
1. การใช้ปุ่มย้อนกลับในทางที่ผิด - หลายๆ คนทำผิดพลาด และปุ่มย้อนกลับได้กลายเป็นสิ่งที่ต้องมีในโปรแกรมประสบการณ์การใช้งานเว็บหลายๆ โปรแกรม นักพัฒนา AJAX มือใหม่หลายคนเพิ่มปุ่มย้อนกลับให้กับโปรแกรม AJAX ด้วยเหตุผลหลายประการ แต่พบว่าปุ่มย้อนกลับส่งผลต่อการทำงานของโปรแกรม สาเหตุหลักมาจาก Javascript ไม่ใช่ภาษาการเขียนโปรแกรมที่เป็นมิตรต่อผู้ใช้ ประการที่สอง นักพัฒนาจะต้องเรียนรู้แนวคิดการพัฒนาของ AJAX อีกครั้ง
สำหรับผู้ที่เพิ่งเริ่มใช้ AJAX ไม่ใช่เรื่องง่ายที่จะยอมรับแนวคิดที่ว่าปุ่มย้อนกลับไม่ใช่วิธีแก้ปัญหาที่ดี เมื่อเราอยู่ที่จุดรีเฟรชของหน้าหรือเมื่อเราจำเป็นต้องใช้ฟังก์ชัน "เลิกทำ" เราก็สามารถพิจารณา "ปุ่มย้อนกลับ" ได้ แต่คุณต้องคิดให้รอบคอบก่อนเขียนโค้ด ไม่เช่นนั้นการรีเฟรชซ้ำๆ จะเกิดขึ้นได้ง่าย
2. การไม่แจ้งให้ผู้ใช้ทราบถึงผลลัพธ์ของการดำเนินการ - ส่วนหนึ่งของวิธีการทำงานของ AJAX คือไม่ได้ใช้ตัวโหลดอินเทอร์เฟซผู้ใช้บนเว็บตามปกติ ดังนั้น คุณต้องออกแบบภาพเพื่อให้ผู้ใช้เข้าใจสิ่งที่เกิดขึ้น
3. ลิงก์ที่ถูกมองข้าม - นี่เป็นข้อผิดพลาดมาตรฐานของ AJAX เช่นกัน นั่นคือ ทิ้งลิงก์ URL ที่ผู้ใช้ภายนอกสามารถตัดและวางได้ เราทุกคนได้คัดลอก URL และส่งไปให้บุคคลอื่นแล้ว เมื่อเราใช้ AJAX เราจะให้ลิงก์ไปยังผู้อื่นได้ผ่านการป้อนข้อมูลด้วยตนเองเท่านั้น ทำไม เนื่องจากในแอปพลิเคชัน AJAX เซิร์ฟเวอร์ไม่ได้จัดเตรียมหน้านี้ที่สร้างขึ้นโดยอัตโนมัติใน Javascript อย่ามองข้ามคุณสมบัติทั่วไปนี้ในเว็บแอปที่ผู้ใช้ของคุณอาจสนใจ โปรดสละเวลาสักครู่เพื่อให้ที่อยู่ URL แก่ผู้ใช้ เนื่องจากเซิร์ฟเวอร์ไม่ได้จัดเตรียมไว้ให้
4. ใช้การควบคุมเนื้อหาแทนการควบคุมเพจ - หากคุณกำลังมองหาการควบคุมเนื้อหาแบบไดนามิก ความก้าวหน้าของแอปพลิเคชัน AJAX ในวิธีการโต้ตอบไคลเอนต์และเซิร์ฟเวอร์แบบดั้งเดิมอาจเป็นของขวัญที่ดีสำหรับคุณ อย่างไรก็ตาม สิ่งนี้ก็มีข้อเสียเช่นกัน: แม้ว่าคุณจะสามารถควบคุมการเขียนเนื้อหาใหม่ในตำแหน่งที่แม่นยำบนหน้าเว็บได้อย่างดีเยี่ยม เพื่อปรับประสบการณ์การโต้ตอบของผู้ใช้ แต่คุณก็อาจจบลงด้วยหน้าที่ไม่สมบูรณ์
ในหลายกรณี เรามุ่งเน้นไปที่การประมวลผลบางส่วนของเพจและลืมไปว่าเซิร์ฟเวอร์จะไม่รีเฟรชเพจ ซึ่งอาจนำไปสู่หน้าที่ยุ่งเหยิงและทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี: เมื่อพวกเขาดูหน้านั้น พวกเขาอาจกำลังดูหน้าที่ล้าสมัย โปรดจับตาดูหน้าทั้งหมด ตรวจสอบให้แน่ใจว่ามีการอัปเดตหน้าที่มีเนื้อหาแบบไดนามิก
5. สไปเดอร์ที่เหนื่อยล้า - ข้อดีของ AJAX อยู่ที่ข้อความจำนวนมากที่สามารถมอบให้กับเพจได้โดยไม่ต้องติดตั้งใหม่ ข้อเสียของ AJAX ก็อยู่ที่ข้อความจำนวนมากที่สามารถมอบให้กับเพจได้โดยไม่ต้องติดตั้งใหม่ หากแอปได้รับการออกแบบมาให้เป็นมิตรกับเครื่องมือค้นหา คุณก็ควรจะจินตนาการได้ว่าจะเกิดอะไรขึ้น ไม่ว่าจะเกิดอะไรขึ้นบนหน้า อย่าลืมใส่ข้อความทึบๆ ไว้ด้านบนสุดแล้วปล่อยให้สไปเดอร์สนุกไปกับมัน
6. อักขระที่อ่านไม่ออก - AJAX ไม่สามารถรองรับชุดอักขระหลายชุดได้ นี่ไม่ใช่ข้อจำกัดของชีวิตหรือความตาย แต่การลืมสิ่งนี้อาจนำไปสู่ปัญหาที่แท้จริงได้ ชุดอักขระพื้นฐานที่สุดคือ UTF-8 ไม่ว่า Javascript ของคุณจะส่งชุดอักขระใด อย่าลืมเข้ารหัสให้ถูกต้องและตั้งค่าชุดอักขระฝั่งเซิร์ฟเวอร์ตามเนื้อหา
7. ไม่มีการแจ้งสำหรับผู้ใช้ที่ไม่รองรับ Javascript - เบราว์เซอร์บางตัวไม่รองรับ Javascript และผู้ใช้เหล่านี้ไม่สามารถเข้าใจสิ่งที่เกิดขึ้น โปรดให้คำแนะนำแก่พวกเขา
ข้างต้นเป็นข้อผิดพลาดบางประการที่ค้นหาได้ง่าย ปัญหาที่แท้จริงถูกมองข้ามไปได้ง่าย
บาปมหันต์เจ็ดประการ
1. ปล่อยให้หน่วยความจำล้น - ใครก็ตามที่ทำงานด้านการพัฒนามาเป็นเวลานานจะรู้ว่าการอ้างอิงแบบวงกลมคืออะไร และเข้าใจถึงอันตรายที่การอ้างอิงแบบวงกลมนำมาสู่การจัดการหน่วยความจำ Javascript ที่ใช้โดย AJAX เป็นภาษาการจัดการหน่วยความจำ กล่าวอีกนัยหนึ่ง Javascript มีฟังก์ชันการรวบรวมแพ็กเก็ตในตัว จึงสามารถแยกตัวแปรที่ไม่ได้ใช้โดยเส้นทางอ้างอิงอีกต่อไป และจัดสรรหน่วยความจำใหม่ที่ใช้โดยตัวแปรเหล่านี้
ใครก็ตามที่ทำงานด้านการพัฒนามาเป็นเวลานานจะรู้ว่าการอ้างอิงแบบวงกลมคืออะไร และเข้าใจถึงอันตรายที่นำมาสู่การจัดการหน่วยความจำ Javascript ที่ใช้โดย AJAX เป็นภาษาการจัดการหน่วยความจำ กล่าวอีกนัยหนึ่ง Javascript มีฟังก์ชันการรวบรวมแพ็กเก็ตในตัว จึงสามารถแยกตัวแปรที่ไม่ได้ใช้โดยเส้นทางอ้างอิงอีกต่อไป และจัดสรรหน่วยความจำใหม่ที่ใช้โดยตัวแปรเหล่านี้
ตอนนี้ ปัญหามาถึงแล้ว: ในโมเดลอ็อบเจ็กต์ไฟล์ โหนด DOM ใดๆ ในแผนผังไฟล์อาจถูกอ้างอิงโดยองค์ประกอบอื่นๆ ที่มีอยู่ในแผนผัง โดยไม่คำนึงว่าจะถูกอ้างอิงโดยอ็อบเจ็กต์อื่นหรือไม่! ดังนั้นวัตถุใดๆ ที่ทำเครื่องหมายไว้ในตัวรวบรวมแพ็กเก็ตว่าถูกอ้างอิงกลับโดยโหนด DOM จะต้องเป็นศูนย์ในทิศทางนี้ มิฉะนั้น หน่วยความจำจะยังคงได้รับการจัดสรร
2. ไม่เข้าใจว่า “อะซิงโครนัส” หมายถึงอะไร – คำว่าอะซิงโครนัสสามารถทำให้ผู้ใช้ไม่คุ้นเคยรู้สึกกังวลได้อย่างง่ายดาย แต่ถ้าเว็บแอปที่คุณออกแบบสำหรับผู้ใช้เหล่านี้เป็นแอปเดสก์ท็อป พวกเขาจะไม่เสียใจ นี่คือจุดการออกแบบที่สำคัญ เว็บแอปส่วนใหญ่ทำงานคล้ายกับแอปบนเดสก์ท็อปมาก แต่ในเว็บแอปพลิเคชัน ผู้ใช้คาดหวังคุณภาพที่ลวงตานี้ให้แตกต่างไปจากเดิมอย่างสิ้นเชิง
ผู้ใช้มีอคติและความคาดหวังที่แตกต่างกันมากเมื่อต้องรับมือกับเว็บเบราว์เซอร์มากกว่ากับแอปพลิเคชันบนเดสก์ท็อป ดังนั้นในขณะที่การตอบสนองบ่อยครั้งระหว่างเพจและเซิร์ฟเวอร์จะดีและมีประสิทธิภาพ โดยที่เพจจะแก้ไขตัวเองไปพร้อมๆ กัน มันจะทำให้ผู้ใช้เวียนหัว ดังนั้นคุณต้องปฏิบัติตามกฎสองข้อและพิจารณาทุกการเปลี่ยนแปลงที่เกิดขึ้นในช่วงการมองเห็นของผู้ใช้: หากการอัปเดตไม่ใช่เรื่องเร่งด่วนสำหรับผู้ใช้ ให้ทำการอัปเกรดอย่างอ่อนโยนและไม่ถ่ายโอน หากการอัปเดตไม่ใช่เรื่องเร่งด่วนสำหรับผู้ใช้ การโต้ตอบของแอปพลิเคชันมีความสำคัญมาก ดังนั้นการอัปเดตควรมีความชัดเจนและชัดเจน
3. ทำให้เซิร์ฟเวอร์ตาบอด - การลดการสื่อสารระหว่างไคลเอนต์และเซิร์ฟเวอร์เป็นปัญหาใหญ่ซึ่งไม่เคยเกิดขึ้นมาก่อน ในอดีต แอปพลิเคชันฝั่งเซิร์ฟเวอร์รู้ทุกอย่างและสามารถเห็นทุกสิ่ง: ทุกข้อยกเว้น ทุกการโหลด ทุกเหตุการณ์สามารถดูและบันทึกได้ และแน่นอนว่าเซิร์ฟเวอร์ยังรู้ว่าเกิดอะไรขึ้นบนไคลเอนต์ เพราะเซิร์ฟเวอร์ สิ่งที่แสดง บนหน้าจอจะถูกบันทึก
นี่ไม่ใช่กรณีในแอปพลิเคชัน AJAX เมื่อเหตุการณ์เกิดขึ้น เหตุการณ์เหล่านี้จะไม่ขึ้นอยู่กับเซิร์ฟเวอร์ กล่าวคือ เมื่อเกิดปัญหาบนไคลเอนต์ เซิร์ฟเวอร์จะไม่ทราบทันที ค้นหาและบันทึกเหตุการณ์ฝั่งไคลเอ็นต์และข้อยกเว้นในตำแหน่งที่ช่วยให้เซิร์ฟเวอร์สามารถติดตามปัญหาที่ต้องมีการแทรกแซง
4. ใช้ GET เพื่อขี้เกียจ - ฟังก์ชั่นของ GET คือการดึงข้อมูล ฟังก์ชั่นของ POST คือการตั้งค่า GET อย่าใช้ GET ในทางที่ไม่เหมาะสม และอย่าลองใช้ GET หากคุณคิดว่ามันไม่เป็นอันตราย การดำเนินการ GET จะเปลี่ยนสถานะ และลิงก์ที่เปลี่ยนสถานะอาจทำให้ผู้ใช้สับสน ส่วนใหญ่เชื่อว่าลิงก์มีไว้เพื่อการนำทาง ไม่ใช่ฟังก์ชันการทำงาน
5. ไม่มีการตรวจสอบประเภทข้อมูล - Javascript ไม่ได้เป็นส่วนหนึ่งของ .NET Framework แม้ว่านี่จะน่าเศร้าเล็กน้อย แต่ก็แสดงให้เห็นถึงปัญหาที่เราอาจพบ: ตรวจสอบให้แน่ใจว่า Javascript เข้าใจประเภทข้อมูลบนแพลตฟอร์มที่มันทำงานอยู่ และในทางกลับกันสำหรับ .NET หรืออื่นๆ อาจมีหลาย Conversion และคุณจำเป็นต้องทำทีละรายการ ตัวอย่างเช่น ไลบรารี Ajax.NET Pro มีตัวแปลงที่แปลงสัญลักษณ์อ็อบเจ็กต์ .NET และ Javascript
6. บางโปรแกรมไม่สามารถปิดได้ - การสร้างเนื้อหาแบบไดนามิกโดยไม่รีเฟรชหน้าจะแย่มากหากไม่มีเวลาปิด มีหน้าเว็บกี่หน้าที่คุณเห็นว่ายาวกว่า Hansard of Congress กี่หน้า? หากหน้าเว็บขยายออกไปอย่างไม่มีกำหนด มันจะเป็นฝันร้ายสำหรับผู้ใช้อย่างแน่นอน แค่คิดดูว่าผู้ใช้จะคิดอย่างไรกับแอปพลิเคชันที่ไม่เคยหยุดนิ่ง ทำให้แอปพลิเคชันเว็บของคุณเป็นแบบไดนามิก แต่อยู่ภายในขอบเขตของสิ่งที่เป็นไปได้
7. ทำให้ Javascript และ DOM เป็นอิสระจากกัน - โปรดจำไว้ว่า AJAX ขึ้นอยู่กับโครงสร้าง "Model-View-Controller" (Model-View-Controller) โปรดดำเนินการอย่างจริงจัง Javascript อยู่ในเลเยอร์โมเดล DOM อยู่ในเลเยอร์ภาพ และผู้ควบคุมคือที่ปรึกษาด้านการแต่งงานที่เชื่อมโยงพวกมันเข้าด้วยกัน ตรวจสอบให้แน่ใจว่าไฟล์เว็บของคุณไม่ขึ้นอยู่กับ Javascript (เพื่อให้มีประโยชน์มากกว่าสำหรับผู้ใช้ที่ไม่รองรับ Javascript) เว้นแต่ว่าเนื้อหานั้นจะมีความหมายสำหรับผู้ใช้ที่ใช้ Javascript เท่านั้น ในกรณีนี้ ให้ใช้ Javascript เพื่อสร้างเนื้อหา