Swift Academy · บทเรียน

รูปแบบ MVVM

แยกหน้าที่ของมุมมอง โมเดลมุมมอง และโมเดล

รูปแบบ MVVM เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

MVVM คืออะไร

MVVM ย่อมาจาก โมเดล-มุมมอง-ViewModel เป็นรูปแบบสถาปัตยกรรมที่แยกแอปของคุณออกเป็นสามชั้น โดยแต่ละชั้นมีหน้าที่ชัดเจนเพียงอย่างเดียว.

โมเดล — ข้อมูลและกฎทางธุรกิจ
มุมมอง — สิ่งที่ผู้ใช้เห็น
ViewModel — ตัวเชื่อมที่เตรียมข้อมูลจากโมเดลให้มุมมอง

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

ชั้นโมเดล

โมเดล เก็บข้อมูลดิบและกฎที่กำกับข้อมูลนั้น โมเดลไม่รู้เกี่ยวกับหน้าจอหรือวิธีแสดงผล.

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

struct User {
    let id: UUID
    let firstName: String
    let lastName: String
    let isPremium: Bool
}

struct Order {
    let items: [String]
    let total: Decimal
}

ชั้นมุมมอง

มุมมอง มีหน้าที่นำเสนอเพียงอย่างเดียว ใน SwiftUI มุมมองคือสตรักต์ View ของคุณ ส่วนในยูไอคิทคือ UIViewController และมุมมองย่อยของมัน.

มุมมองที่ดีต้องไม่มี ตรรกะทางธุรกิจ แต่ทำหน้าที่แสดงผล state และส่งต่อแอ็กชันของผู้ใช้ให้ ViewModel เท่านั้น.

struct ProfileView: View {
    @StateObject var viewModel: ProfileViewModel

    var body: some View {
        VStack {
            Text(viewModel.displayName)
            if viewModel.showBadge {
                Text("Premium")
            }
        }
    }
}

ชั้น ViewModel

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

นอกจากนี้ยังเปิดเผยเจตนาการทำงาน (เมธอด) ที่มุมมองเรียกใช้เมื่อผู้ใช้โต้ตอบ.

final class ProfileViewModel: ObservableObject {
    @Published var displayName: String
    @Published var showBadge: Bool

    init(user: User) {
        displayName = user.firstName + " " + user.lastName
        showBadge = user.isPremium
    }
}

เหตุใดจึงควรแยกความรับผิดชอบ

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

การแบ่งความรับผิดชอบออกจากกันช่วยให้:

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

สิ่งที่ควรอยู่ในโมเดล

สิ่งที่ควรใส่ไว้ในโมเดล:

เอนทิตีของโดเมน (User, Product)
กฎตรวจสอบความถูกต้องทางธุรกิจ
นามธรรมสำหรับการจัดเก็บข้อมูลถาวรและเครือข่าย ซึ่งมักเรียกใช้ผ่านบริการโดย ViewModel

อย่าใส่ข้อความสำหรับส่วนติดต่อผู้ใช้ สี หรือการจัดรูปแบบไว้ในโมเดล.

สิ่งที่ควรอยู่ใน ViewModel

ViewModel จัดการ ตรรกะการนำเสนอ:

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

final class CartViewModel: ObservableObject {
    @Published var totalText: String = ""

    func update(with order: Order) {
        let formatter = NumberFormatter()
        formatter.numberStyle = .currency
        totalText = formatter.string(from: order.total as NSNumber) ?? "-"
    }
}

สิ่งที่ควรอยู่ในมุมมอง

มุมมองควรทำเพียง:

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

หากคุณพบ if ที่ใช้ตัดสินกฎทางธุรกิจอยู่ภายในมุมมอง ตรรกะนั้นน่าจะควรอยู่ใน ViewModel.

การไหลของข้อมูลใน MVVM

ข้อมูลจะไหลไปในทิศทางหนึ่ง ส่วนแอ็กชันจะไหลย้อนกลับ:

โมเดล -> ViewModel -> มุมมอง สำหรับข้อมูล
มุมมอง -> ViewModel สำหรับเจตนาของผู้ใช้

มุมมองจะไม่ติดต่อกับโมเดลโดยตรง วิธีนี้ช่วยให้การพึ่งพาชี้เข้าด้านในสู่โดเมนของคุณ.

MVVM เทียบกับเอ็มวีซี

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

MVVM แยกตรรกะการนำเสนอนั้นออกมาไว้ใน ViewModel ทำให้ตัวควบคุม (หรือมุมมองของ SwiftUI) มีขนาดเล็กและเรียบง่าย ViewModel ไม่ขึ้นกับเฟรมเวิร์กส่วนติดต่อผู้ใช้ จึงทดสอบได้ง่ายกว่ามาก.

ส่วนประกอบหนึ่งชุดที่สมบูรณ์

ต่อไปนี้คือส่วนประกอบ MVVM ขนาดเล็กแต่สมบูรณ์ ซึ่งเชื่อมชั้นต่าง ๆ เข้าด้วยกัน.

struct Account { let balance: Decimal }

final class AccountViewModel: ObservableObject {
    @Published var balanceText: String
    init(account: Account) {
        balanceText = "$" + "\(account.balance)"
    }
}

struct AccountView: View {
    @StateObject var viewModel: AccountViewModel
    var body: some View { Text(viewModel.balanceText) }
}

ตรวจสอบอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับความรับผิดชอบของ MVVM.

สรุป

คุณได้เรียนรู้สามชั้นของ MVVM และขอบเขตของแต่ละชั้น:

โมเดล — ข้อมูลดิบและกฎทางธุรกิจ ไม่มีส่วนติดต่อผู้ใช้
ViewModel — ตรรกะการนำเสนอและเจตนาการทำงาน
มุมมอง — การแสดงผล state จาก ViewModel เพียงอย่างเดียว

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

คำถามที่พบบ่อย

บทเรียน “รูปแบบ MVVM” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รูปแบบ MVVM” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบ MVVM”

แยกหน้าที่ของมุมมอง โมเดลมุมมอง และโมเดล คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “รูปแบบ MVVM” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Swift Academy