รุ่น-View-ViewModel (MVVM)

Mar 26 2023
Model-View-ViewModel (MVVM) เป็นรูปแบบการออกแบบสถาปัตยกรรมที่กำลังได้รับความนิยมอย่างมากในการพัฒนา iOS เป็นอนุพันธ์ของรูปแบบ Model-View-Controller (MVC) ยอดนิยม ซึ่งใช้ในการพัฒนา iOS มาเป็นเวลานาน

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

MVVM คืออะไร?

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

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

แบบอย่าง:

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

ดู:

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

ดูรุ่น:

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

การใช้งาน MVVM ใน Swift:

ในการติดตั้ง MVVM ใน Swift เราจะใช้ขั้นตอนต่อไปนี้:

สร้างแบบจำลอง

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

นี่คือตัวอย่างของแบบจำลอง:

struct User {
    let name: String
    let email: String
    let age: Int
}

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

นี่คือตัวอย่างของมุมมอง:

import UIKit

class UserView: UIView {

    let nameLabel = UILabel()
    let emailLabel = UILabel()
    let ageLabel = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupSubviews()
    }

    private func setupSubviews() {
        // add subviews to the view
        addSubview(nameLabel)
        addSubview(emailLabel)
        addSubview(ageLabel)
    }

    func configure(with user: User) {
        nameLabel.text = user.name
        emailLabel.text = user.email
        ageLabel.text = "\(user.age)"
    }
}

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

นี่คือตัวอย่างโมเดลมุมมอง:

class UserViewModel {
init(user: User) {
    self.user = user
}

func configure(view: UserView) {
    view.configure(with: user)
}
}

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

class UserViewController: UIViewController {

    let userView = UserView()
    let userViewModel: UserViewModel

    init(user: User) {
        self.userViewModel = UserViewModel(user: user)
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        userViewModel.configure(view: userView)
        view.addSubview(userView)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        userView.frame = view.bounds
    }
}

บทสรุป

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