ตอนที่ 7 ความรู้เบื้องต้นเกี่ยวกับรูปแบบ MVC (Model-View-Controller)

เนื้อหานี้เป็นส่วนหนึ่งของชุด "ข้อมูลเบื้องต้นเกี่ยวกับการพัฒนาองค์กร" บทความก่อนหน้านี้:

• เกี่ยวกับเครือข่าย
• เกี่ยวกับสถาปัตยกรรมซอฟต์แวร์
• เกี่ยวกับโปรโตคอล HTTP/HTTPS ;
• เกี่ยวกับพื้นฐาน Maven ;
• เกี่ยวกับเซิร์ฟเล็ต (เรากำลังเขียนเว็บแอปพลิเคชันธรรมดา) ;
• เกี่ยวกับคอนเทนเนอร์เซิร์ฟเล็ต

ในเนื้อหานี้เราจะแนะนำให้คุณรู้จักกับ MVC เรามาพูดถึงว่า MVC คืออะไร สัมผัสประวัติความเป็นมาของการสร้างสรรค์ ทำความเข้าใจแนวคิดหลักและแนวคิดที่มีอยู่ใน MVC พิจารณาทีละขั้นตอนวิธีแยกแอปพลิเคชันออกเป็นโมดูล Model, View, Controller และเขียนแอปพลิเคชันเว็บขนาดเล็กด้วย Spring-Boot และการใช้ Spring-MVC เป็นตัวอย่าง มาดูกันว่าข้อมูลถูกถ่ายโอนจากโค้ด Java ไปยังหน้า html อย่างไร เพื่อทำความเข้าใจเนื้อหานี้ คุณต้องคุ้นเคยกับรูปแบบการออกแบบ โดยเฉพาะผู้สังเกตการณ์และส่วนหน้า ทำความคุ้นเคยกับคำขอและการตอบกลับ HTTP เข้าใจพื้นฐานของ html รู้ว่าคำอธิบายประกอบคืออะไรใน Java นั่งเอนหลัง ชงชา เตรียมของหวาน สลัด อาหารจานหลักและอาหารจานแรก เราเริ่ม.

ประวัติความเป็นมาของเอ็มวีซี

แนวคิดสำหรับ MVC ได้รับการออกแบบโดย Trygve Reenskaug ในขณะที่ทำงานที่ Xerox PARC ในช่วงปลายทศวรรษที่ 70 ในสมัยนั้น การทำงานกับคอมพิวเตอร์เป็นไปไม่ได้หากไม่มีวุฒิการศึกษาและการศึกษาเอกสารจำนวนมากอย่างต่อเนื่อง ปัญหาที่ Reenskaug แก้ไขร่วมกับกลุ่มนักพัฒนาที่แข็งแกร่งมากคือการลดความซับซ้อนของการโต้ตอบของผู้ใช้โดยเฉลี่ยกับคอมพิวเตอร์ จำเป็นต้องสร้างเครื่องมือที่ในอีกด้านหนึ่งจะเรียบง่ายและเข้าใจได้อย่างมาก และในอีกด้านหนึ่งจะทำให้สามารถจัดการคอมพิวเตอร์และแอปพลิเคชันที่ซับซ้อนได้ Reenskaug ทำงานในทีมที่พัฒนาคอมพิวเตอร์พกพา "สำหรับเด็กทุกวัย" - Dynabook รวมถึงภาษา SmallTalk ภายใต้การนำของ Alan Kay ในตอนนั้นเองที่แนวคิดของอินเทอร์เฟซที่เป็นมิตรได้ถูกวางลง งานของ Reenskaug กับทีมของเขามีอิทธิพลอย่างมากต่อการพัฒนาด้านไอที ให้เรานำเสนอข้อเท็จจริงที่น่าสนใจที่ไม่เกี่ยวข้องโดยตรงกับ MVC แต่แสดงให้เห็นถึงความสำคัญของการพัฒนาเหล่านั้น ในปี 2550 หลังจากการนำเสนอ Apple iPhone Alan Kay กล่าวว่า “เมื่อ Macintosh เปิดตัว Newsweek ก็ถามว่าฉันคิดอย่างไร ฉันพูดว่า: นี่เป็นคอมพิวเตอร์ส่วนบุคคลเครื่องแรกที่ควรค่าแก่การวิจารณ์ หลังจากการนำเสนอ Steve Jobs เข้ามาถามว่า iPhone คุ้มค่าต่อการวิจารณ์หรือไม่? และฉันบอกว่าให้ทำให้มันห้าคูณแปดนิ้วแล้วคุณจะพิชิตโลก” สามปีต่อมา ในวันที่ 27 มกราคม 2010 Apple ได้เปิดตัว iPad ขนาด 9.7 นิ้ว นั่นคือ Steve Jobs ทำตามคำแนะนำของ Alan Kay แทบจะเป็นตัวอักษรเลย โครงการที่ Rennskaug ทำอยู่กินเวลานานถึง 10 ปี และการตีพิมพ์ครั้งแรกเกี่ยวกับ MVC จากผู้สร้างก็ถูกตีพิมพ์ในอีก 10 ปีต่อมา Martin Fowler ผู้เขียนหนังสือและบทความเกี่ยวกับสถาปัตยกรรมซอฟต์แวร์หลายเล่มกล่าวว่าเขาเรียนรู้ MVC จาก SmallTalk เวอร์ชันที่ใช้งานจริง เนื่องจากไม่มีข้อมูลเกี่ยวกับ MVC จากแหล่งข้อมูลหลักมาเป็นเวลานาน รวมถึงด้วยเหตุผลอื่น ๆ หลายประการ การตีความแนวคิดนี้ที่แตกต่างกันจำนวนมากจึงปรากฏขึ้น เป็นผลให้หลายคนมองว่า MVC เป็นโครงร่างหรือรูปแบบการออกแบบ โดยทั่วไปแล้ว MVC เรียกว่ารูปแบบคอมโพสิตหรือการรวมกันของหลายรูปแบบที่ทำงานร่วมกันเพื่อปรับใช้แอปพลิเคชันที่ซับซ้อน แต่ในความเป็นจริง ตามที่กล่าวไว้ข้างต้น MVC เป็นกลุ่มของแนวคิด/หลักการ/แนวทางทางสถาปัตยกรรมเป็นหลัก ที่สามารถนำไปใช้ได้หลากหลายรูปแบบโดยใช้รูปแบบต่างๆ... ต่อไป เราจะพยายามดูแนวคิดหลักที่ฝังอยู่ในแนวคิด MVC

MVC คืออะไร: แนวคิดและหลักการพื้นฐาน

• VC คือชุดแนวคิดและหลักการทางสถาปัตยกรรมสำหรับการสร้างระบบข้อมูลที่ซับซ้อนด้วยอินเทอร์เฟซผู้ใช้
• MVC เป็นตัวย่อที่ย่อมาจาก Model-View-Controller

ข้อจำกัดความรับผิดชอบ: MVC ไม่ใช่รูปแบบการออกแบบ MVC คือชุดแนวคิดและหลักการทางสถาปัตยกรรมสำหรับการสร้างระบบที่ซับซ้อนด้วยอินเทอร์เฟซผู้ใช้ แต่เพื่อความสะดวกเพื่อไม่ให้ทำซ้ำทุกครั้ง: "ชุดแนวคิดทางสถาปัตยกรรม ... " เราจะเรียกรูปแบบ MVC เริ่มจากสิ่งง่ายๆ มีอะไรซ่อนอยู่เบื้องหลังคำว่า Model-View-Controller? เมื่อพัฒนาระบบด้วยอินเทอร์เฟซผู้ใช้ ตามรูปแบบ MVC คุณจะต้องแบ่งระบบออกเป็นสามส่วน สิ่งเหล่านี้สามารถเรียกได้ว่าเป็นโมดูลหรือส่วนประกอบ พูดสิ่งที่คุณต้องการ แต่หารด้วยสาม แต่ละองค์ประกอบจะมีจุดประสงค์ของตัวเอง แบบอย่าง. ส่วนประกอบ/โมดูลแรกคือสิ่งที่เรียกว่าโมเดล มันมีตรรกะทางธุรกิจทั้งหมดของแอปพลิเคชัน ดู. ส่วนที่สองของระบบคือมุมมอง โมดูลนี้มีหน้าที่ในการแสดงข้อมูลให้กับผู้ใช้ ทุกสิ่งที่ผู้ใช้เห็นนั้นสร้างขึ้นจากมุมมอง คอนโทรลเลอร์ ลิงค์ที่สามในห่วงโซ่นี้คือตัวควบคุม มันเก็บรหัสที่รับผิดชอบในการประมวลผลการกระทำของผู้ใช้ (การกระทำของผู้ใช้ใด ๆ ในระบบจะถูกประมวลผลในตัวควบคุม) โมเดลเป็นส่วนที่เป็นอิสระที่สุดของระบบ เป็นอิสระมากจนไม่ควรรู้อะไรเกี่ยวกับโมดูล View และ Controller โมเดลนี้มีความเป็นอิสระมากจนนักพัฒนาอาจไม่รู้อะไรเลยเกี่ยวกับมุมมองและคอนโทรลเลอร์ วัตถุประสงค์หลักของมุมมองคือการให้ข้อมูลจากโมเดลในรูปแบบที่ใช้งานง่าย ข้อจำกัดหลักของ View คือ ไม่ควรเปลี่ยนโมเดลไม่ว่าด้วยวิธีใดก็ตาม วัตถุประสงค์หลักของคอนโทรลเลอร์คือเพื่อประมวลผลการกระทำของผู้ใช้ ผู้ใช้ทำการเปลี่ยนแปลงโมเดลผ่านคอนโทรลเลอร์ แม่นยำยิ่งขึ้นในข้อมูลที่จัดเก็บไว้ในโมเดล ให้เราให้แผนภาพที่แสดงให้คุณดูในการบรรยายอีกครั้ง: จากทั้งหมดนี้เราสามารถสรุปข้อสรุปเชิงตรรกะได้อย่างสมบูรณ์ ระบบที่ซับซ้อนจำเป็นต้องแบ่งออกเป็นโมดูล ให้เราอธิบายสั้น ๆ ถึงขั้นตอนในการบรรลุการแยกดังกล่าว

ขั้นตอนที่ 1: แยกตรรกะทางธุรกิจของแอปพลิเคชันออกจากอินเทอร์เฟซผู้ใช้

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

ขั้นตอนที่ 2 ใช้รูปแบบ Observer เพื่อให้โมเดลมีความเป็นอิสระมากยิ่งขึ้น รวมถึงการซิงโครไนซ์อินเทอร์เฟซผู้ใช้

ที่นี่เราติดตาม 2 เป้าหมาย:

1. บรรลุความเป็นอิสระของโมเดลมากยิ่งขึ้น
2. ประสานส่วนต่อประสานกับผู้ใช้

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

ขั้นตอนที่ 3 แบ่งอินเทอร์เฟซออกเป็น View และ Controller

เรายังคงแบ่งแอปพลิเคชันออกเป็นโมดูลต่อไป แต่ในระดับที่ต่ำกว่าของลำดับชั้น ในขั้นตอนนี้ อินเทอร์เฟซผู้ใช้ (ซึ่งแยกออกเป็นโมดูลแยกต่างหากในขั้นตอนที่ 1) จะถูกแบ่งออกเป็นมุมมองและตัวควบคุม เป็นการยากที่จะวาดเส้นแบ่งที่ชัดเจนระหว่างมุมมองและตัวควบคุม ถ้าเราบอกว่ามุมมองคือสิ่งที่ผู้ใช้เห็น และตัวควบคุมเป็นกลไกที่ผู้ใช้สามารถโต้ตอบกับระบบได้ ก็จะมีความขัดแย้งอยู่บ้าง การควบคุม เช่น ปุ่มบนเว็บเพจหรือแป้นพิมพ์เสมือนบนหน้าจอโทรศัพท์ เป็นส่วนหนึ่งของคอนโทรลเลอร์โดยพื้นฐานแล้ว แต่ผู้ใช้จะมองเห็นได้พอๆ กับส่วนใดๆ ของมุมมอง ที่นี่เรากำลังพูดถึงเพิ่มเติมเกี่ยวกับการแบ่งหน้าที่ งานหลักของอินเทอร์เฟซผู้ใช้คือเพื่อให้แน่ใจว่าผู้ใช้โต้ตอบกับระบบ ซึ่งหมายความว่าอินเทอร์เฟซมีเพียง 2 ฟังก์ชันเท่านั้น:

• แสดงและแสดงข้อมูลเกี่ยวกับระบบแก่ผู้ใช้ได้อย่างสะดวก
• ป้อนข้อมูลและคำสั่งผู้ใช้เข้าสู่ระบบ (ส่งไปยังระบบ)

ฟังก์ชันเหล่านี้กำหนดวิธีการแบ่งอินเทอร์เฟซออกเป็นโมดูล ด้วยเหตุนี้ สถาปัตยกรรมระบบจึงมีลักษณะดังนี้: ดังนั้นเราจึงมีแอปพลิเคชันของสามโมดูลที่เรียกว่า Model, View และ Controller สรุป:

1. ตามหลักการของ MVC ระบบจะต้องแบ่งออกเป็นโมดูล
2. โมดูลที่สำคัญและเป็นอิสระที่สุดควรเป็นโมเดล
3. โมเดลคือแกนหลักของระบบ คุณต้องมีความสามารถในการพัฒนาและทดสอบโดยไม่ขึ้นอยู่กับอินเทอร์เฟซ
4. ในการดำเนินการนี้ ในขั้นตอนแรกของการแยกระบบ คุณจะต้องแบ่งออกเป็นโมเดลและอินเทอร์เฟซ
5. ต่อไป เมื่อใช้รูปแบบ Observer เราจะเสริมความแข็งแกร่งให้กับโมเดลด้วยความเป็นอิสระและได้รับการซิงโครไนซ์อินเทอร์เฟซผู้ใช้
6. ขั้นตอนที่สามคือการแบ่งอินเทอร์เฟซออกเป็นคอนโทรลเลอร์และมุมมอง
7. สิ่งที่จำเป็นในการป้อนข้อมูลจากผู้ใช้เข้าสู่ระบบก็คือเข้าสู่คอนโทรลเลอร์
8. ทุกสิ่งที่ส่งข้อมูลออกจากระบบไปยังผู้ใช้อยู่ในสายตา

ยังมีอีกเรื่องสำคัญที่ต้องหารืออีกเรื่องคือคุณสามารถดื่มโกโก้ได้

เล็กน้อยเกี่ยวกับความสัมพันธ์ระหว่างมุมมองกับตัวควบคุมและโมเดล

เมื่อผู้ใช้ป้อนข้อมูลผ่านตัวควบคุม ผู้ใช้จะทำการเปลี่ยนแปลงโมเดล อย่างน้อยผู้ใช้ก็ทำการเปลี่ยนแปลงข้อมูลโมเดล เมื่อผู้ใช้ได้รับข้อมูลผ่านองค์ประกอบอินเทอร์เฟซ (ผ่านมุมมอง) ผู้ใช้จะได้รับข้อมูลเกี่ยวกับข้อมูลโมเดล สิ่งนี้เกิดขึ้นได้อย่างไร? View และ Controller โต้ตอบกับโมเดลอย่างไร ท้ายที่สุดแล้ว เป็นไปไม่ได้ที่คลาส View จะใช้วิธีการของคลาส Model โดยตรงในการอ่าน/เขียนข้อมูล ไม่เช่นนั้นจะไม่มีคำถามเกี่ยวกับความเป็นอิสระของ Model โมเดลแสดงถึงชุดคลาสที่เชื่อมต่อกันอย่างแน่นหนา ซึ่งในทางที่ดีทั้ง View และ Controller ไม่ควรสามารถเข้าถึงได้ ในการเชื่อมต่อโมเดลกับมุมมองและคอนโทรลเลอร์ จำเป็นต้องใช้รูปแบบการออกแบบ Facade ส่วนหน้าของโมเดลจะเป็นเลเยอร์เดียวกันระหว่างโมเดลและอินเทอร์เฟซ ซึ่ง View รับข้อมูลในรูปแบบที่สะดวก และผู้ควบคุมจะเปลี่ยนข้อมูลโดยการเรียกวิธีการส่วนหน้าที่จำเป็น ในท้ายที่สุดทุกอย่างจะมีลักษณะดังนี้:

MVC: มีประโยชน์อย่างไร?

เป้าหมายหลักของการปฏิบัติตามหลักการ MVC คือการแยกการใช้งานตรรกะทางธุรกิจ (โมเดล) ของแอปพลิเคชันออกจากการแสดงภาพ (มุมมอง) การแยกนี้จะเพิ่มการใช้โค้ดซ้ำ ประโยชน์ของการใช้ MVC จะชัดเจนที่สุดในกรณีที่ผู้ใช้จำเป็นต้องให้ข้อมูลเดียวกันในรูปแบบที่แตกต่างกัน เช่น ในรูปแบบตาราง กราฟ หรือแผนภูมิ (ใช้ประเภทต่างๆ) ในเวลาเดียวกัน คุณสามารถเปลี่ยนปฏิกิริยาต่อการกระทำของผู้ใช้ได้โดยไม่กระทบต่อการใช้งานมุมมอง (คลิกปุ่ม ป้อนข้อมูล) หากคุณปฏิบัติตามหลักการของ MVC คุณสามารถทำให้การเขียนโปรแกรมง่ายขึ้น เพิ่มความสามารถในการอ่านโค้ด และขยายและบำรุงรักษาระบบได้ง่ายขึ้นในอนาคต ในเนื้อหาสุดท้ายของชุด "ข้อมูลเบื้องต้นเกี่ยวกับการพัฒนาองค์กร" เราจะดูการใช้งาน MVC โดยใช้ Spring-MVC เป็นตัวอย่าง ตอนที่ 8. การเขียนแอปพลิเคชั่นขนาดเล็กใน spring-boot