วิธีที่ดีที่สุดที่จะหลีกเลี่ยงการเขียนรหัส GUI ป่อง?

ฉันพบว่าเมื่อใดก็ตามที่ฉันทำงานกับรหัส GUI โค้ดจะมีแนวโน้มที่จะขยายตัวเร็วขึ้นจากนั้นก็เป็นรหัสประเภทอื่น มันก็ดูเหมือนยากที่จะ refactor ในขณะที่รหัสอื่น ๆ ที่ฉันสามารถสร้างใหม่ได้อย่างง่ายดาย - ฉันพบว่าฉันสามารถแยกคลาสที่ใหญ่กว่าออกเป็นส่วนเล็ก ๆ ของฟังก์ชั่น - กับกรอบงาน GUI ส่วนใหญ่ฉันมักจะผูกพันกับเฟรมเวิร์กที่ต้องใช้เครื่องมือ ใช้สิ่งอื่น ๆ อีกมากมายได้โดยตรงในวิดเจ็ต / การควบคุม / อะไรก็ตาม บางครั้งนี่อาจเป็นเพราะต้อง (ก) สืบทอดบางส่วนของวิดเจ็ต / การควบคุม / บางสิ่งบางอย่างหรือ (b) ต้องเข้าถึงวิธีการป้องกัน

ยกตัวอย่างเช่นฉันต้องตอบสนองต่ออินพุตที่หลากหลายผ่านสัญญาณ / เหตุการณ์ / อะไรก็ตามจากเฟรมเวิร์กเพื่อใช้โหมดทั้งหมดของการโต้ตอบกับผู้ใช้ ฉันอาจต้องการเครื่องมือ GUI / การควบคุมเดียวเพื่อจัดการอินพุต / เอาต์พุตหลากหลายที่อาจรวมถึง:

1. คลิกขวา / เมนูบริบท
2. ตอบสนองต่อการเลือกจากเมนูบริบท - ซึ่งอาจเป็นจำนวนมาก
3. วิธีพิเศษในการวาด GUI
4. ตอบสนองต่อคีย์บอร์ด
5. ปุ่มช่องทำเครื่องหมาย
6. ฯลฯ

... ในขณะที่จัดการคลาสภายใต้ GUI ที่แสดงถึงตรรกะทางธุรกิจ

GUI ตรงไปข้างหน้าอย่างง่ายสามารถทำให้โค้ดของมันเติบโตอย่างรวดเร็วแม้เมื่อแยกตรรกะทางธุรกิจและการใช้ MVC ฉันพบว่าโค้ด GUI เป็นแม่เหล็กที่ยิ่งใหญ่สำหรับการเปลี่ยนแปลง

มีวิธีจัดการรหัส GUI อย่างมีสติและหลีกเลี่ยงการปล่อยให้มันกลายเป็นหน้าต่างแตกหรือไม่? หรือมวลของตัวจัดการเหตุการณ์แบบสุ่ม / วิธีการแทนที่จริง ๆ แล้วดีที่สุดที่เราสามารถทำได้สำหรับโค้ด GUI?

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

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

สามเทคนิค refactoring ที่ผมพบผมใช้กันมากที่สุดมีการเปลี่ยนชื่อ , สารสกัดจากวิธีและสารสกัดจากชั้น ถ้าฉันไม่เคยได้เรียนรู้การเปลี่ยนรูปแบบอื่น ๆ อีกครั้งทั้งสามจะยังคงทำให้ฉันสามารถรักษาโค้ดของฉันให้สะอาดและมีโครงสร้างที่ดีและจากเนื้อหาของคำถามของคุณมันฟังดูราวกับว่าคุณอาจพบว่า เพื่อให้โค้ด GUI ของคุณบางและสะอาด

คุณสามารถแยก GUI และตรรกะทางธุรกิจที่ดีที่สุดในโลกและรหัส GUI สามารถดูเหมือนว่ามีการระเบิดรหัสกลาง คำแนะนำของฉันคือมันไม่เจ็บที่จะมีชั้นพิเศษหรือสองเพื่อช่วยให้คุณจัดการ GUI ของคุณอย่างถูกต้องและนี้ไม่จำเป็นต้องเป็นชั้นดูของคุณถ้าคุณใช้รูปแบบ MVC - แม้ว่าคุณจะพบบ่อย คลาสตัวกลางจะคล้ายกับมุมมองของคุณซึ่งคุณมักจะรู้สึกอยากที่จะรวมเข้าด้วยกันเพื่อความสะดวก สิ่งที่ฉันทำในตอนนี้คือมันไม่เจ็บจริง ๆ ที่จะเพิ่มเลเยอร์เฉพาะ GUI เพิ่มเติมเพื่อจัดการตรรกะภาพทั้งหมด แต่คุณอาจต้องการเพิ่มน้ำหนักผลประโยชน์และต้นทุนในการทำเช่นนั้น

คำแนะนำของฉันคือ:

• อย่าทำอะไรเลยด้านหลัง GUI ของคุณโดยตรงยกเว้นการเรียกใช้และกำหนดวิธีที่ GUI จะเชื่อมโยงไปยังมุมมอง (หรือเลเยอร์ตัวกลาง)
• อย่าพยายามขัดรองเท้าทุก ๆ มุมมองที่เกี่ยวข้องในคลาสเดียว - หรือแม้แต่คลาสเดียวต่อหน้าต่าง GUI - ยกเว้นว่าเหมาะสมสำหรับคุณที่จะทำเช่นนั้น ทางเลือกของคุณคือการสร้างจำนวนน้อยและง่ายต่อการจัดการชั้นเรียนเพื่อจัดการตรรกะ GUI ของคุณ
• เมื่อวิธีการของคุณเริ่มมองหาโค้ดที่มีขนาดใหญ่กว่า 4-5 บรรทัดให้ตรวจสอบว่าจำเป็นหรือไม่และถ้าเป็นไปได้ที่จะแยกเมธอดหรือสองวิธีเพื่อให้คุณคงวิธีการไว้ได้แม้ว่าจะหมายถึงคลาส ด้วยวิธีการอื่น ๆ อีกมากมาย
• หากคลาสของคุณเริ่มมีขนาดใหญ่มากให้เริ่มโดยลบฟังก์ชันการทำงานที่ทำซ้ำทั้งหมดออกและดูว่าคุณสามารถจัดกลุ่มวิธีการของคุณอย่างมีเหตุผลเพื่อให้คุณสามารถแยกคลาสอื่นหรือสองคลาสได้หรือไม่
• คิดเกี่ยวกับการปรับโครงสร้างใหม่ทุกครั้งที่คุณเขียนบรรทัดของโค้ด ถ้าคุณได้รับบรรทัดของรหัสการทำงานดูว่าคุณสามารถ refactor หรือไม่เพื่อหลีกเลี่ยงการทำซ้ำฟังก์ชันการทำงานหรือเพื่อให้น้อย leaner โดยไม่มีการเปลี่ยนแปลงลักษณะการทำงาน
• ยอมรับสิ่งที่หลีกเลี่ยงไม่ได้ซึ่งคุณจะรู้สึกเสมอว่าส่วนหนึ่งหรืออีกส่วนหนึ่งในระบบของคุณจะเริ่มรู้สึกป่องเล็กน้อยโดยเฉพาะอย่างยิ่งถ้าคุณละเลยการปรับโครงสร้างตามที่คุณไป แม้ว่าจะมีฐานรหัสที่ได้รับการรับรองอย่างดีแล้วก็ตามคุณยังสามารถรู้สึกราวกับว่ามีอีกมากที่คุณสามารถทำได้ นี่คือความเป็นจริงของการเขียนซอฟต์แวร์ที่คุณจะพบว่าตัวเองมักจะรู้สึกว่ามีอะไรที่ทำได้มากกว่า "ดีกว่า" ดังนั้นคุณต้องสร้างสมดุลระหว่างการทำงานกับมืออาชีพและการชุบทอง
• ยอมรับว่าตัวทำความสะอาดที่คุณลองและรักษารหัสของคุณโค้ดของคุณจะดูป่องน้อยลง

ฉันคิดว่าปัญหาที่คุณประสบอยู่มากมายนั้นสามารถย้อนกลับไปหาสาเหตุง่ายๆได้ นักพัฒนาส่วนใหญ่ไม่ปฏิบัติกับรหัส GUI เช่นรหัส 'ของจริง' ฉันไม่มีหลักฐานหรือสถิติที่นี่แค่ความรู้สึกของฉัน

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

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

ด้วยเหตุผลบางอย่างรหัส GUI สร้างจุดบอดในนักพัฒนาเกี่ยวกับการแยกข้อกังวล อาจเป็นเพราะบทเรียนทั้งหมดรวบรวมทุกอย่างไว้ในชั้นเรียนเดียว อาจเป็นเพราะการเป็นตัวแทนทางกายภาพทำให้สิ่งต่าง ๆ ดูเหมือนใกล้ชิดกันมากกว่าที่เป็นอยู่ อาจเป็นเพราะชั้นเรียนได้รับการสร้างขึ้นอย่างช้าๆเพื่อให้ผู้คนจำไม่ได้ว่าพวกเขาต้องการการปรับโครงสร้างใหม่เช่นกบสุภาษิตที่ถูกต้มโดยการเปิดความร้อนอย่างช้าๆ

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

คุณอาจต้องการดูรูปแบบ Model View Presenter / Passive View เรย์ไรอันพูดคุยอย่างดีเกี่ยวกับ Google IO เกี่ยวกับแนวทางปฏิบัติด้านสถาปัตยกรรมที่ดีที่สุดสำหรับ GWT

http://www.google.com/events/io/2009/sessions/GoogleWebToolkitBestPractices.html

มันง่ายที่จะทำให้นามธรรมความคิดกับกรอบและภาษาอื่น ๆ ประโยชน์หลักของ MVP (ในความคิดของฉัน) คือการทดสอบหน่วย และคุณจะได้รับหากรหัสของคุณที่ไม่ใช่ป่องและไม่ใช่สปาเก็ตตี้ (ตัดสินโดยคำถามของคุณนี่คือสิ่งที่คุณต้องการ) มันทำงานได้โดยการแนะนำเลเยอร์ตรรกะมุมมองที่เรียกว่าผู้นำเสนอ มุมมองที่แท้จริงถูกแยกออกจากสิ่งนี้ผ่านทางอินเทอร์เฟซ (และสามารถจำลองในการทดสอบหน่วยได้อย่างง่ายดาย) ตอนนี้เนื่องจากเลเยอร์ตรรกะมุมมองของคุณ (ผู้นำเสนอ) เป็นอิสระจากภายในของเฟรมเวิร์ก GUI ที่เป็นรูปธรรมคุณสามารถจัดระเบียบได้เหมือนรหัสปกติ เป็นการดีที่คุณสามารถสลับการใช้งาน GUI ในกรอบงานที่แตกต่างกันตราบใดที่พวกเขาสอดคล้องกับอินเทอร์เฟซเดียวกัน

คำตอบของฉันประกอบด้วยสี่ส่วน: โครงสร้างความเรียบง่ายการทดสอบและไวยากรณ์

สามคนแรกนั้นยากมากที่จะทำ!

โครงสร้างหมายถึงการให้ความสนใจอย่างมากกับการใช้จำนวนน้อยที่สุดของรหัสและจำนวนสูงสุดของเฟรมเวิร์ก, ไลบรารีและอื่น ๆ

ความเรียบง่ายหมายถึงการทำให้สิ่งต่าง ๆ เรียบง่ายตั้งแต่การออกแบบเริ่มต้นไปจนถึงการใช้งานจริง ทำให้การนำทางง่ายขึ้นโดยใช้ปลั๊กอินอย่างง่ายการจัดวางเลย์เอาต์อย่างเป็นธรรมจะช่วยได้ที่นี่ ตอนนี้พวกเขาสามารถ 'ขาย' ให้กับลูกค้า / ผู้ใช้ที่สามารถดูข้อดีของหน้าเว็บที่ทำงานบนพีซี, iPad, มือถือและอุปกรณ์อื่น ๆ ได้อย่างรวดเร็ว

การทดสอบหมายรวมถึงเครื่องมือทดสอบเบราว์เซอร์ (webrat และ capybara คำนึงถึงการทำงานของรางของฉัน) ที่จับประเด็นข้ามเบราว์เซอร์ล่วงหน้าเมื่อรหัสที่ดีกว่าสามารถออกแบบเพื่อจัดการกับพวกเขาในตอนแรกซึ่งแตกต่างจากการ โดยนักพัฒนาที่แตกต่างกันเนื่องจากพวกเขาถูกค้นพบโดยผู้ใช้เบราว์เซอร์ที่แตกต่างกัน

วากยสัมพันธ์ การใช้ตัวตรวจสอบรหัส / IDE / editor-plugin ฯลฯ เป็นประโยชน์จริง ๆ สำหรับ HTML, CSS, Javascript ฯลฯ ข้อดีของเบราว์เซอร์ที่ได้รับจากความสามารถในการจัดการ HTML ที่มีรูปแบบไม่ดีนั้นสามารถทำงานได้กับคุณเมื่อเบราว์เซอร์ต่างๆ ดังนั้นเครื่องมือที่ตรวจสอบรูปแบบ HTML ของคุณจึงเป็นสิ่งจำเป็น การมี HTML ที่มีรูปแบบที่ดีนั้นเป็นประโยชน์อย่างมากในการมี HTML ที่ไม่ได้เผยแพร่เนื่องจากรหัสที่ไม่ดีควรมีการแสดงผลที่มากขึ้น

วิธีแก้ปัญหาที่ฉันพบคือรหัสที่เปิดเผย การใช้รหัสขั้นตอนเพียงอย่างเดียวเป็นสูตรสำหรับรหัส GUI ของสปาเก็ตตี้ แน่นอนว่า "วิธีพิเศษในการวาดวิดเจ็ต" น่าจะเป็นรหัส แต่นี่คือรหัสที่แยกได้ในชั้นเรียน ตัวจัดการเหตุการณ์แป้นพิมพ์ลัดขนาดหน้าต่าง - สิ่งที่ยุ่งที่สุดคือการประกาศที่ดีที่สุด

มีคำตอบที่ยอดเยี่ยมมากมายที่นี่

สิ่งหนึ่งที่ช่วยฉันลดความซับซ้อนของรหัส GUI คือทำให้แน่ใจว่า GUI มีตัวแบบข้อมูลของตัวเอง

เพื่อยกตัวอย่างง่ายๆถ้าฉันมี GUI พร้อมฟิลด์ป้อนข้อความ 4 ตัวฉันมีคลาสข้อมูลแยกต่างหากที่เก็บเนื้อหาของฟิลด์ป้อนข้อความ 4 รายการเหล่านั้น GUIs ที่ซับซ้อนมากขึ้นต้องการคลาสข้อมูลเพิ่มเติม

ฉันออกแบบ GUI เป็นโมเดล - ดู โมเดล GUI ถูกควบคุมโดยคอนโทรลเลอร์แอพพลิเคชั่นของโมเดลแอปพลิเคชั่น - มุมมอง - คอนโทรลเลอร์ มุมมองแอปพลิเคชันคือโมเดล GUI แทนที่จะเป็นโค้ด GUI เอง

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

บางส่วนของปุ่มเพื่อลดความซับซ้อนของ GUI คือ (ส่วนใหญ่ใช้กับ. NET):

1. มุ่งมั่นเพื่อการออกแบบที่เรียบง่ายกว่าทุกครั้งที่ทำได้ หลีกเลี่ยงพฤติกรรมแฟนซีหากไม่ได้รับการเรียกร้องจากธุรกิจ

2. ใช้ผู้ให้บริการการควบคุมที่ดี

3. อย่าสร้างฟังก์ชันการควบคุมที่กำหนดเองในรหัสลูกค้าเอง แต่ให้สร้างการควบคุมผู้ใช้ที่ขยายการควบคุมดั้งเดิมในลักษณะที่คุณสามารถสะท้อนพฤติกรรมเฉพาะของคุณในการควบคุมได้มากกว่าในรหัสของการใช้ฟอร์ม / หน้า

4. ใช้เฟรมเวิร์ก (แม้แต่ที่ปลูกเองในบ้าน) เพื่อจัดการกับความเป็นสากลการจัดการทรัพยากรสไตล์ ฯลฯ เพื่อให้คุณไม่ต้องทำซ้ำรหัสนี้ในทุก ๆ UI

5. ใช้ส่วนประกอบ (หรือกรอบ) สำหรับการนำทาง

6. สร้างการสนทนามาตรฐานสำหรับข้อผิดพลาดคำเตือนการยืนยันและอื่น ๆ

ใช้การออกแบบเชิงวัตถุกับรหัสของคุณและสำหรับการพัฒนา UI:

1. การนำเสนอและรูปแบบแยกกัน ใช้ไลบรารี / กรอบงานหรือเขียนของคุณเองเพื่อช่วยแยกลอจิกมุมมอง / คอนโทรลเลอร์ออกจากตัวแบบข้อมูล การสื่อสารกับแบ็กเอนด์ทั้งหมดควรทำในโมเดลและสถานะของโมเดลควรซิงค์กับแบ็กเอนด์เสมอ
2. Decoupling ถ้า object A รู้เกี่ยวกับ object B ดังนั้น A สามารถเรียกเมธอดบน B ได้ แต่ B ไม่ควรรู้เกี่ยวกับ A แทน A สามารถฟังเหตุการณ์จาก B ได้มันทำให้แน่ใจว่าไม่มีการพึ่งพาแบบวนรอบ หากแอปของคุณมีเหตุการณ์มากมายระหว่างส่วนประกอบให้สร้าง EventBus หรือใช้ประโยชน์จากกรอบงานที่ขับเคลื่อนด้วยเหตุการณ์เช่น Twitter Flight
3. บางส่วนกับการแสดงผลเต็มหากมุมมองของคุณเป็นตารางหรือรายการคุณอาจถูกล่อลวงให้สร้างวิธีเช่น "เพิ่ม", "ลบ" เพื่อแทรก / ลบหนึ่งรายการใน / จากคอลเลกชัน รหัสของคุณสามารถขยายได้อย่างง่ายดายเมื่อคุณต้องสนับสนุนการเรียงลำดับและการแบ่งหน้า ดังนั้นคำแนะนำของฉันคือเพียงแค่ทำให้มุมมองทั้งหมดใหม่แม้ในขณะที่มีการเปลี่ยนแปลงบางส่วน แล้วประสิทธิภาพล่ะ ดีถ้าคอลเลกชันของคุณมีขนาดใหญ่แล้วคุณควรทำเลขหน้า นักพัฒนาเว็บ: ตรวจสอบให้แน่ใจว่าตัวจัดการเหตุการณ์ของคุณได้รับมอบสิทธิ์ให้กับองค์ประกอบรูทของมุมมองที่ไม่เปลี่ยนแปลง
4. ดูโมเดลเมื่อสถานะมุมมองของคุณซับซ้อนเกินกว่าที่จะรักษาตัวอย่างเช่นมุมมองตารางจะต้องติดตามข้อมูลแถวข้อมูลคอลัมน์ลำดับการเรียงลำดับแถวที่ถูกตรวจสอบในปัจจุบัน (ถ้ารองรับการตรวจสอบหลายครั้ง) ฯลฯ คุณควรจะ สร้างวัตถุ ViewModel สำหรับสถานะเหล่านั้น วัตถุ View ของคุณควรเรียก setters บน ViewModel หากมีการเปลี่ยนแปลงบางอย่างใน UI (เช่น: ผู้ใช้ตรวจสอบแถว) และควรตอบสนองต่อเหตุการณ์การเปลี่ยนแปลงของ ViewModel โดยการอัพเดต UI โดยปกติแล้วคุณควรหลีกเลี่ยงการอัปเดต UI หากเหตุการณ์การเปลี่ยนแปลงถูกเรียกใช้โดย UI

นี่เป็นแอพขนาดเล็ก แต่ไม่สำคัญที่ช่วยให้แสดงถึงจุดต่างๆของฉัน คุณสามารถค้นหารหัสและดู / แผนภาพการโต้ตอบได้ที่นี่: https://github.com/vanfrankie/pushpopbox

คุณต้องการที่จะดูที่แนวคิดของการ"databinding" นี่เป็นวิธีเชื่อมต่อองค์ประกอบ UI กับองค์ประกอบรูปแบบนามธรรมในวิธีการประกาศซึ่งองค์ประกอบรูปแบบจะซิงโครไนซ์กับเนื้อหาของ UI โดยอัตโนมัติ วิธีการนี้มีประโยชน์มากมายเช่นไม่ต้องเขียนตัวจัดการเหตุการณ์เพื่อซิงโครไนซ์ข้อมูล

มีการสนับสนุน databinding สำหรับกรอบ UI อีกหลายคนเช่น.NETและEclipse / JFace