อะไรคือความแตกต่างระหว่างรูปแบบการออกแบบ MVC, MVP และ MVVM ในแง่ของการเข้ารหัส c #

202

หากเราค้นหา Google โดยใช้วลี "อะไรคือความแตกต่างระหว่าง MVC, MVP และ MVVM รูปแบบการออกแบบ" จากนั้นเราอาจได้ URL ไม่กี่อันที่พูดถึงความแตกต่างระหว่างรูปแบบการออกแบบ MVC MVP และ MVVM ตามหลักเหตุผลเช่น :

MVP

ใช้ในสถานการณ์ที่ไม่สามารถผูกข้อมูลผ่าน datacontext ได้ Windows Forms เป็นตัวอย่างที่สมบูรณ์แบบของสิ่งนี้ ในการแยกมุมมองออกจากแบบจำลองจำเป็นต้องมีผู้นำเสนอ เนื่องจากมุมมองไม่สามารถเชื่อมโยงโดยตรงกับผู้นำเสนอได้จึงต้องส่งข้อมูลไปยังมุมมองผ่านอินเทอร์เฟซ (IView)

MVVM

ใช้ในสถานการณ์ที่ผูกพันผ่าน datacontext ได้ ทำไม? อินเทอร์เฟซ IView ต่าง ๆ สำหรับแต่ละมุมมองจะถูกเอาออกซึ่งหมายถึงรหัสน้อยกว่าเพื่อรักษา ตัวอย่างที่ MVVM มีความเป็นไปได้ ได้แก่ WPF และโปรเจ็กต์ javascript โดยใช้สิ่งที่น่าพิศวง

MVC

ใช้ในสถานการณ์ที่ไม่สามารถเชื่อมต่อระหว่างมุมมองและส่วนที่เหลือของโปรแกรมได้ (และคุณไม่สามารถใช้ MVVM หรือ MVP ได้อย่างมีประสิทธิภาพ) สิ่งนี้อธิบายอย่างชัดเจนถึงสถานการณ์ที่เว็บ API ถูกแยกออกจากข้อมูลที่ส่งไปยังเบราว์เซอร์ไคลเอ็นต์ ASP.NET MVC ของ Microsoft เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการจัดการสถานการณ์ดังกล่าวและให้กรอบ MVC ที่ชัดเจนมาก

แต่ฉันไม่ได้พบบทความเดียวที่พูดถึงความแตกต่างในทางทฤษฎีพร้อมกับรหัสตัวอย่าง

มันจะดีจริงๆถ้าฉันได้รับบทความที่พูดถึงความแตกต่างระหว่างรูปแบบการออกแบบทั้ง 3 (MVC, MVP และ MVVM) พร้อมกับรหัส

ฉันต้องการจับซอร์สโค้ดของแอพCRUD ที่คล้ายกัน 3 ตัวซึ่งได้รับการพัฒนาโดยรูปแบบการออกแบบทั้งสามนี้ (MVC, MVP & MVVM) เพื่อให้ฉันสามารถอ่านโค้ดและเข้าใจว่าควรเขียนโค้ดสำหรับลวดลายการออกแบบทั้งสามนี้อย่างไร (MVC, MVP & MVVM)

ดังนั้นหากบทความใดที่มีอยู่ซึ่งกล่าวถึงว่าโค้ดจะมีลักษณะแตกต่างกันอย่างไรสำหรับรูปแบบการออกแบบทั้งสามนี้ (MVC, MVP & MVVM) โปรดเปลี่ยนเส้นทางฉันไปยังบทความนั้น

— โทมัส
แหล่งที่มา

14

ใน TechEd 2011 มีการนำเสนอที่ดี แต่เรียบง่ายเกี่ยวกับ 3 รูปแบบเหล่านี้ ผู้พูดสร้างและแสดงตัวอย่างในโมเดลธุรกิจเดียวกันโดยใช้ C # และ Visual Studio นี่คือวิดีโอใน channel9 MVC, MVP และ MVVM: การเปรียบเทียบรูปแบบสถาปัตยกรรม

— Marco Medrano

2

นี่คือบทความ: realm.io/news/eric-maxwell-mvc-mvp-and-mvvm-on-android IMO ที่เขียนได้ดีและชัดเจนมาก นอกจากนี้ยังมี repo Github ที่มีสาขาสำหรับแต่ละรูปแบบ

— cuddlecheek

สิ่งนี้น่าสนใจ: cirw.in/blog/time-to-move-on

— Andrew

100

ความแตกต่างพื้นฐานบางอย่างสามารถเขียนได้ในระยะสั้น:

MVC:

MVC ดั้งเดิมคือที่ที่มี

แบบจำลอง: ทำหน้าที่เป็นแบบจำลองสำหรับข้อมูล
ดู: ข้อเสนอพร้อมมุมมองแก่ผู้ใช้ซึ่งสามารถเป็น UI
คอนโทรลเลอร์: ควบคุมการทำงานร่วมกันระหว่าง Model และ View โดยที่ view เรียกคอนโทรลเลอร์เพื่ออัพเดต model มุมมองสามารถเรียกตัวควบคุมหลายตัวถ้าจำเป็น

MVP:

คล้ายกับ MVC แบบดั้งเดิม แต่ Controller ถูกแทนที่ด้วย Presenter แต่ผู้นำเสนอซึ่งแตกต่างจากผู้ควบคุมมีหน้าที่ในการเปลี่ยนมุมมองเช่นกัน มุมมองมักไม่เรียกผู้นำเสนอ

MVVM

ความแตกต่างที่นี่คือการปรากฏตัวของดูแบบ มันเป็นการใช้งานของ Observer Design Pattern ซึ่งการเปลี่ยนแปลงในโมเดลถูกแสดงในมุมมองเช่นกันโดย VM เช่น: หากมีการเปลี่ยนแปลงตัวเลื่อนไม่เพียง แต่ตัวแบบจะได้รับการอัพเดต แต่ข้อมูลซึ่งอาจเป็นข้อความตัวอักษรที่แสดงในมุมมองจะได้รับการอัปเดตเช่นกัน ดังนั้นจึงมีการผูกข้อมูลแบบสองทาง

— Pritam Banerjee
แหล่งที่มา

1

รายละเอียดเล็ก ๆ - คุณสามารถเลือกได้ว่าจะเป็นการผูกข้อมูลแบบสองทางหรือคุณสามารถกำหนดการผูกข้อมูลแบบทางเดียว

— Jviaches

10

"มุมมองมักไม่เรียกผู้นำเสนอ"? คุณอธิบายเพิ่มเติมเกี่ยวกับประโยคนี้ได้ไหม ถ้าดู ui ไม่ได้จะเรียกผู้นำเสนอที่จะไป?

— Amir Ziarati

3

@AmirZiarati ผู้นำเสนอจับตาดูเหตุการณ์ต่างๆ ในกรณีที่มีเหตุการณ์ผู้นำเสนอเข้ามาเล่นและดำเนินการที่จำเป็น

— Pritam Banerjee

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

— Amir Ziarati

1

@PritamBanerjee จากคำอธิบายทั้ง MVP และ MVVM เกือบมีฟังก์ชั่นเดียวกัน P หรือ VM อัพเดตทั้ง M & V

— Manohar Reddy Poreddy

42

MVC, MVP, MVVM

MVC (อันเก่า)

MVP (เป็นแบบแยกส่วนมากกว่าเนื่องจากข้อต่อต่ำ Presenter เป็นสื่อกลางระหว่าง View และ Model)

MVVM (คุณมีการผูกสองทางระหว่างคอมโพเนนต์ VM และ UI ดังนั้นจึงเป็นแบบอัตโนมัติมากกว่า MVP)

ภาพอื่น:

— Uddhav Gautam
แหล่งที่มา

24

โปรดอย่าคัดลอกเฉพาะภาพโดยเฉพาะเมื่อพวกเขาไม่เห็นด้วย ดู MVC (เบราว์เซอร์เก่าที่คุณไม่เห็น) เบราว์เซอร์พูดถึงเพื่อดูในภาพด้านบน แต่พูดกับตัวควบคุมในภาพด้านล่าง

— peter.fr

1

@UddhavGautam มันค่อนข้างสับสนเพราะภาพแรกแสดง View เป็นจุดเริ่มต้นและอันที่สองแสดง Controller

— everlasto

1

ในแผนภาพแรกความแตกต่างระหว่าง MVVM และ MVP คืออะไร? เท่าที่ฉันเห็นมันเป็นเพียงการเชื่อมโยงระหว่าง V และ VM / P ซึ่งในกรณีหนึ่งมีข้อความไปมาเป็นลิงค์สองทิศทางและในอีกกรณีหนึ่งพวกเขาจะแสดงเป็นลิงค์สองทิศทาง ฉันไม่เห็นความแตกต่างการทำงานระหว่างพวกเขา ฉันพลาดอะไรไป

— iCyberPaul

1

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

— Uddhav Gautam

4

เรื่องย่อ: ไม่มีใครรู้จริงว่าเกิดอะไรขึ้น พวกเขาทั้งหมดล้วน แต่เป็นสิ่งเดียวกัน ฮ่าฮ่า ไม่ แต่จริงๆแล้วด้วยภาพเหล่านี้ "มีประโยชน์" มันยากที่จะประมวลผลสิ่งที่เกิดขึ้น ฉันคิดว่านั่นเป็นส่วนหนึ่งของปัญหา / ความสับสน

— แอนดรู

34

คำอธิบายที่ดีจากลิงค์: http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx

ก่อนอื่นมาดู MVC

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

มีความสัมพันธ์แบบตัวต่อตัวระหว่างตัวควบคุมและมุมมอง นั่นเป็นเพราะตัวควบคุมเดียวอาจเลือกมุมมองที่แตกต่างกันที่จะแสดงผลตามการดำเนินการ

มีลูกศรเดียวจาก Controller ไปยัง View นี่เป็นเพราะมุมมองไม่มีความรู้หรือการอ้างอิงถึงคอนโทรลเลอร์

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

MVP - ผู้นำเสนอมุมมองแบบจำลอง

ตอนนี้เรามาดูรูปแบบ MVP ดูเหมือนว่าคล้ายคลึงกับ MVC มากยกเว้นความแตกต่างที่สำคัญบางประการ:

อินพุตเริ่มต้นด้วยมุมมองไม่ใช่ผู้นำเสนอ

มีการแมปแบบหนึ่งต่อหนึ่งระหว่างมุมมองและผู้นำเสนอที่เกี่ยวข้อง

มุมมองมีการอ้างอิงถึงผู้นำเสนอ ผู้นำเสนอยังตอบสนองต่อกิจกรรมที่ถูกเรียกจากมุมมองเพื่อให้ตระหนักถึงมุมมองที่เกี่ยวข้อง

ผู้นำเสนออัปเดตมุมมองตามการดำเนินการที่ร้องขอซึ่งดำเนินการกับโมเดล แต่มุมมองไม่ได้รับรู้ถึงโมเดล

MVVM - รุ่นมุมมองดูรุ่น

ดังนั้นด้วยรูปแบบ MVC และ MVP ต่อหน้าเราลองดูที่รูปแบบ MVVM และดูว่ามีความแตกต่างอะไรบ้าง:

อินพุตเริ่มต้นด้วยมุมมองไม่ใช่โมเดลมุมมอง

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

— taha027
แหล่งที่มา

7

"นี่เป็นเพราะมุมมองไม่มีความรู้หรือการอ้างอิงถึงผู้ควบคุม" นี่ไม่เป็นความจริง

— อดัมวูลสกี้

@AmirZiarati ViewModel ไม่ได้เป็นส่วนหนึ่งของ MVP แต่เป็นรูปแบบ MVVM

— Joe

ฉันจะดีถ้าคุณให้ตัวอย่างเช่นเราสามารถใช้รูปแบบเหล่านี้ได้ที่ไหน

— JKA

3

ภาพด้านล่างมาจากบทความที่เขียนโดย Erwin van der Valk:

ภาพอธิบาย MVC, MVP และ MVVM - โดย Erwin Vandervalk

บทความอธิบายถึงความแตกต่างและให้ตัวอย่างโค้ดบางส่วนใน C #

— Jboy Flaga
แหล่งที่มา

ภาพด้านบนไม่สับสนเช่นเดียวกับใน MVC เหตุใด VIEW จึงเข้าถึงแบบจำลองโดยตรง เหมือนกันสำหรับคนอื่น ๆ ?

— smkrn110

ในแผนภาพเหล่านี้มันไม่ชัดเจนว่าลูกศรหมายถึงอะไร ลูกศรหมายถึงการเข้าถึงหรือการจัดการหรือไม่ ในแผนภาพ MVC ไม่ชัดเจนว่าทำไมไม่มีลูกศรเริ่มจากรุ่น

— Pontios