MVC กับ MVVM – ความแตกต่างระหว่างพวกเขา

MVC คืออะไร?

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

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

MVVM คืออะไร?

สถาปัตยกรรม MVVM ช่วยให้สามารถแยกการพัฒนาอินเทอร์เฟซผู้ใช้แบบกราฟิกด้วยความช่วยเหลือของภาษาการมาร์กอัปหรือโค้ด GUI ได้ MVVM ย่อมาจาก Model–View–ViewModel

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

รูปแบบ MVC

MVC ที่สำคัญสามองค์ประกอบคือ:

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

มาดูรายละเอียดแต่ละองค์ประกอบนี้กัน:

รุ่น

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

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

รายละเอียด

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

มุมมองยังแสดงข้อมูลจากแผนภูมิ ไดอะแกรม และตาราง ตัวอย่างเช่น มุมมองลูกค้าจะรวมส่วนประกอบ UI ทั้งหมด เช่น กล่องข้อความ เมนูแบบดรอปดาวน์ เป็นต้น

ตัวควบคุม

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

คอนโทรลเลอร์ส่งคำสั่งไปยังโมเดลเพื่ออัปเดตสถานะ (เช่น การบันทึกเอกสารเฉพาะ) ตัวควบคุมยังส่งคำสั่งไปยังมุมมองที่เกี่ยวข้องเพื่อเปลี่ยนการนำเสนอของมุมมอง (เช่น การเลื่อนเอกสารใดเอกสารหนึ่ง)

รูปแบบ MVVM

นี่คือรูปแบบสำหรับ MVVM:

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

เรามาดูรายละเอียดส่วนประกอบนี้กัน:

รุ่น

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

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

รายละเอียด

มุมมองย่อมาจากส่วนประกอบ UI เช่น HTML, CSS, jQuery เป็นต้น

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

ดูโมเดล

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

ความแตกต่างระหว่าง MVC และ MVVM Archiเทคเจอร์

นี่คือความแตกต่างที่สำคัญระหว่าง MVVM และ MVC

MVC (ตัวควบคุมมุมมองโมเดล)	MVVM (ดูโมเดล ViewModel)
ตัวควบคุมเป็นจุดเริ่มต้นของแอปพลิเคชัน	มุมมองเป็นจุดเริ่มต้นสู่แอปพลิเคชัน
ความสัมพันธ์แบบหนึ่งต่อหลายความสัมพันธ์ระหว่างตัวควบคุมและมุมมอง	ความสัมพันธ์แบบหนึ่งต่อหลายความสัมพันธ์ระหว่าง View & View Model
มุมมองไม่มีการอ้างอิงถึงตัวควบคุม	มุมมองมีการอ้างอิงถึง View-Model
MVC เป็นรุ่นเก่า	MVVM เป็นโมเดลที่ค่อนข้างใหม่
ยากที่จะอ่าน เปลี่ยนแปลง เพื่อทดสอบหน่วย และนำโมเดลนี้กลับมาใช้ใหม่	กระบวนการแก้ไขข้อบกพร่องจะซับซ้อนเมื่อเรามีการผูกข้อมูลที่ซับซ้อน
ส่วนประกอบโมเดล MVC สามารถทดสอบแยกจากผู้ใช้ได้	ง่ายสำหรับการทดสอบหน่วยแยกต่างหากและโค้ดเป็นไปตามเหตุการณ์

คุณสมบัติของ MVC

นี่คือคุณสมบัติที่สำคัญของ MVC:

• ทดสอบได้ง่ายและไม่เสียดสี เฟรมเวิร์กที่ทดสอบได้สูง ขยายได้ และเสียบปลั๊กได้
• นอกจากนี้คุณยังสามารถใช้ประโยชน์จากคุณสมบัติที่มีอยู่ของ ASP.NET, Django, JSP และอื่น ๆ ได้อีกด้วย
• ให้การควบคุม HTML และ URL ของคุณอย่างสมบูรณ์
• รองรับการพัฒนาแบบทดสอบขับเคลื่อน (TDD)
• สถาปัตยกรรมนี้นำเสนอการแยกตรรกะ
• อนุญาตการกำหนดเส้นทางสำหรับ URL ที่เป็นมิตรกับ SEO
• เสนอแผนที่สำหรับ URL ที่เข้าใจและค้นหาได้

คุณสมบัติของ MVVM

นี่คือคุณสมบัติของสถาปัตยกรรม MVVM:

• MVVM เขียนขึ้นสำหรับแอปพลิเคชันเดสก์ท็อปที่มีความสามารถในการผูกข้อมูล - XAML และอินเทอร์เฟซ INotifyPropertyChanged
• หากคุณต้องการแก้ไขใน View-Model นั้น View-Model จะใช้รูปแบบผู้สังเกตการณ์
• รูปแบบ MVVM ส่วนใหญ่จะใช้โดย WPF, Silverlight, nRoute ฯลฯ

ข้อดีของ MVC

นี่คือข้อดี/ข้อดีของ MVC

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

ข้อดีของ MVVM

นี่คือข้อดี/ประโยชน์ของ MVVM

• ตรรกะทางธุรกิจแยกออกจาก Ul
• ง่ายต่อการบำรุงรักษาและทดสอบ
• ง่ายต่อการนำส่วนประกอบกลับมาใช้ใหม่
• สถาปัตยกรรมแบบมีการเชื่อมโยงแบบหลวมๆ: MVVM ทำให้สถาปัตยกรรมแอปพลิเคชันของคุณมีการเชื่อมโยงแบบหลวมๆ
• คุณสามารถเขียนกรณีทดสอบหน่วยสำหรับทั้ง viewmodel และ Model layer โดยไม่จำเป็นต้องอ้างอิง View'

ข้อเสียของ MVC

นี่คือข้อเสีย/ข้อเสียของ MVC

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

ข้อเสียของ MVVM

นี่คือข้อเสีย/ข้อเสียของ MVVM

• การบำรุงรักษาโค้ดจำนวนมากในคอนโทรลเลอร์
• บางคนคิดว่าการใช้ UI ธรรมดาของสถาปัตยกรรม MVVM อาจจะเกินจำเป็น
• ไม่มีการเชื่อมต่อที่แน่นหนาระหว่างมุมมองและโมเดลมุมมอง