Swift Academy · Pelajaran

Corak MVVM

Pisahkan tanggungjawab view, model view dan model.

Pelajaran 1 daripada 413 langkah

Corak MVVM ialah pelajaran Swift Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Swift Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Swift Academy merangkumi sejumlah 4 pelajaran.

Apakah MVVM?

MVVM ialah singkatan bagi Model-Paparan-ViewModel. Ia ialah corak seni bina yang memisahkan aplikasi anda kepada tiga lapisan, setiap satunya dengan tanggungjawab yang jelas dan tersendiri.

  • Model — data dan peraturan perniagaan
  • Paparan — perkara yang dilihat oleh pengguna
  • ViewModel — jambatan yang menyediakan data Model untuk Paparan

Matlamatnya ialah pengasingan tanggungjawab: setiap lapisan berubah atas sebabnya sendiri, tanpa bergantung pada lapisan lain.

Lapisan Model

Model menyimpan data mentah anda serta peraturan yang mengawalnya. Model tidak mengetahui apa-apa tentang skrin atau cara sesuatu dipaparkan.

Model biasanya berupa struktur biasa atau objek domain. Model mudah diuji kerana tidak mempunyai kebergantungan pada antara muka pengguna.

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

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

Lapisan Paparan

Paparan semata-mata bertujuan untuk persembahan. Dalam SwiftUI, ia ialah struktur View anda; dalam UIKit, ia ialah UIViewController anda dan subpaparannya.

Paparan yang baik tidak mengandungi logik perniagaan. Paparan hanya memaparkan state dan menyampaikan tindakan pengguna kepada ViewModel.

struct ProfileView: View {
    @StateObject var viewModel: ProfileViewModel

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

Lapisan ViewModel

ViewModel berada di antara Model dan Paparan. Ia mengambil data mentah Model dan mengubahnya menjadi nilai yang sedia dipersembahkan secara langsung oleh Paparan.

ViewModel juga mendedahkan niat (kaedah) yang dipanggil oleh Paparan apabila pengguna berinteraksi dengannya.

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

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

Mengapa Mengasingkan Tanggungjawab?

Apabila pemformatan, rangkaian dan pemaparan bercampur-baur dalam pengawal paparan, fail itu menjadi gumpalan besar yang sukar diuji.

Dengan membahagikan tanggungjawab:

  • Model boleh digunakan semula merentas skrin
  • ViewModel boleh diuji secara unit tanpa antara muka pengguna
  • Paparan kekal kecil dan deklaratif

Perkara yang Berada dalam Model

Letakkan dalam Model:

  • Entiti domain (User, Product)
  • Peraturan pengesahan perniagaan
  • Abstraksi penyimpanan kekal dan rangkaian, biasanya melalui perkhidmatan yang dipanggil oleh ViewModel

Jangan sekali-kali letakkan rentetan antara muka pengguna, warna atau pemformatan dalam Model.

Perkara yang Berada dalam ViewModel

ViewModel mengendalikan logik persembahan:

  • Memformat tarikh, mata wang dan nama menjadi rentetan paparan
  • Menentukan keadaan antara muka pengguna yang kelihatan (memuatkan, ralat, kosong)
  • Menyelaraskan panggilan kepada perkhidmatan dan mendedahkan hasilnya
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) ?? "-"
    }
}

Perkara yang Berada dalam Paparan

Paparan hanya sepatutnya:

  • Menyusun atur dan memaparkan elemen antara muka pengguna
  • Membaca state yang diterbitkan daripada ViewModel
  • Menyampaikan ketikan dan gerak isyarat dengan memanggil kaedah ViewModel

Jika anda menemui if yang menentukan peraturan perniagaan dalam Paparan, logik itu mungkin sepatutnya berada dalam ViewModel.

Aliran Data dalam MVVM

Alirannya bergerak dalam satu arah untuk data dan arah bertentangan untuk tindakan:

  • Model -> ViewModel -> Paparan untuk data
  • Paparan -> ViewModel untuk niat pengguna

Paparan tidak pernah berkomunikasi secara langsung dengan Model. Ini memastikan kebergantungan menghala ke dalam, menuju domain anda.

MVVM berbanding MVC

Dalam MVC klasik, pengawal sering menjadi sangat besar kerana mengendalikan pemformatan, rangkaian dan penyambungan paparan secara serentak.

MVVM mengeluarkan logik persembahan itu ke dalam ViewModel, lalu menjadikan pengawal (atau Paparan SwiftUI) ringkas. ViewModel tidak bergantung pada rangka kerja antara muka pengguna, jadi ViewModel jauh lebih mudah diuji.

Satu Bahagian Lengkap

Berikut ialah bahagian MVVM yang kecil tetapi lengkap, yang menghubungkan semua lapisan.

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) }
}

Semakan Pantas

Uji pemahaman anda tentang tanggungjawab MVVM.

Imbas Kembali

Anda telah mempelajari tiga lapisan MVVM serta sempadannya:

  • Model — data mentah dan peraturan perniagaan, tanpa antara muka pengguna
  • ViewModel — logik persembahan dan niat
  • Paparan — pemaparan tulen state ViewModel

Memisahkan tanggungjawab ini menjadikan kod anda mudah diuji, boleh digunakan semula dan mudah difahami. Seterusnya, kita akan menyambungkan ViewModel kepada Paparan dengan pengikatan.

Percuma untuk bermula

Pelajari Swift dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
122
Pelajaran
409

Soalan Lazim

Adakah pelajaran “Corak MVVM” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Swift Academy, termasuk “Corak MVVM”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Swift Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Corak MVVM”?

Pisahkan tanggungjawab view, model view dan model. Anda berlatih Swift Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Swift Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Swift Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Corak MVVM” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Corak MVVM
  2. Mengikat Model View pada View
  3. Corak Coordinator
  4. Menguji Model View
← Kembali ke Swift Academy