Software Engineer : Low Level Design : รูปแบบ MVC

     รูปแบบ MVC เป็นการแยกการทำงานของโปรแกรมออกเป็น 3 ส่วนตามหน้าที่ของมันคือ (1) ส่วนจัดการข้อมูล (model) : จะเป็นส่วนที่เป็นตรรกะของการทำงาน การจัดการและจัดเตรียมข้อมูล การควบคุมและนำเสนอข้อมูล (2) ส่วนแสดงผล (View) : เป็นส่วนติดต่อกับผู้ใช้งานและแสดงผลข้อมูลในรูปแบบที่ผู้ใช้งานต้องการ (3) ส่วนควบคุม (Controller) : เป็นตัวกลางในการเชื่อมต่อระหว่างส่วนจัดการข้อมูลและส่วนแสดงผล โดยจะรับการเปลี่ยนแปลงจากส่วนแสดงผลไปบอกกับส่วนจัดการข้อมูล การแยกส่วนดังกล่าวช่วยให้การทำงานง่ายขึ้นเพราะผู้ดูแลส่วนติดต่อผู้ใช้งานกับส่วนจัดการข้อมูลจะเป็นคนละกลุ่มกัน วิธีการทดสอบของทั้ง 2 ส่วนก็แตกต่างกัน ส่วนติดต่อผู้ใช้งานมักจะเป็นส่วนที่ถูกแก้ไขบ่อยที่สุด การแยกส่วนทำให้การแก้ไขไม่กระทบกับส่วนอื่น และบ่อยครั้งที่ส่วนติดต่อผู้ใช้งานจะใช้ส่วนจัดการข้อมูลเดียวกัน เช่น การแบ่งการแสดงผลออกเป็นกราฟ เป็นตาราง หรือ เป็นวิดเจ็ต เป็นต้น รูปแบบ MVC ช่วยให้เราพัฒนาโปรแกรมแบบโมดูลาร์ บำรุงรักษา และปรับขนาดได้ ด้วยการแยกข้อกังวลของโปรแกรมออกเป็นส่วนประกอบที่แตกต่างกัน ซึ่งแต่ละส่วนสามารถพัฒนา ทดสอบ และบำรุงรักษาโดยอิสระจากส่วนอื่นๆ ซึ่งช่วยให้สามารถแก้ไขและปรับปรุงแอปพลิเคชันได้ง่ายขึ้นเมื่อเวลาผ่านไป ทำให้สามารถปรับให้เข้ากับความต้องการทางธุรกิจที่เปลี่ยนแปลงได้มากขึ้นและง่ายขึ้น

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

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

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

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

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

     ตัวอย่างด้านล่างเป็นการใช้รูปแบบ mvc ในภาษาจาวา สังเกตุส่วนจัดการข้อมูลจะยุ่งกับเรื่องข้อมูลเท่านั้น 

Model

public class Model {

    private String data;

    public void setData(String data) {

        this.data = data;

    }

    public String getData() {

        return data;

    }

}

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

View

import java.util.Scanner;

public class View {

    private Controller controller;

    public void setController(Controller controller) {

        this.controller = controller;

    }

    public void showData(String data) {

        System.out.println(“Data received: ” + data);

    }

    public void getInput() {

        Scanner scanner = new Scanner(System.in);

        System.out.print(“Enter data: “);

        String data = scanner.nextLine();

        controller.setData(data);

    }

}

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

Controller

public class Controller {

    private Model model;

    private View view;

    public Controller(Model model, View view) {

        this.model = model;

        this.view = view;

        this.view.setController(this);

    }

    public void setData(String data) {

        model.setData(data);

        view.showData(data);

    }

    public void getInput() {

        view.getInput();

    }

}

     ในการเรียกใช้งานเราต้องสร้างออบเจกต์ของ mvc ขึ้นมา

Main.java

public class Main {

    public static void main(String[] args) {

        Model model = new Model();

        View view = new View();

        Controller controller = new Controller(model, view);

        view.getInput();

    }

}