PlusMagi's Blog By Pitt Phunsanit
Plus emotional magic to the knowledge of logic.
เพื่อให้เห็นภาพการทำงานของ MVP ชัดเจนที่สุด เขียนตัวอย่างด้วย JavaScript โดยทำระบบ “เครื่องนับเลข ” แบบง่าย ๆ ครับ
หัวใจสำคัญของ MVP คือ View และ Model จะไม่รู้จักกันเลย ทุกอย่างต้องวิ่งผ่าน Presenter ทั้งหมด
มีหน้าที่แค่เก็บข้อมูลและจัดการตรรกะ ไม่สนว่าหน้าจอเป็นยังไง
JavaScript
class CounterModel { constructor () { this.count = 0; } // ตรรกะทางธุรกิจ: การเพิ่มค่า increment () { this.count++; } // ส่งคืนข้อมูลปัจจุบัน getCount () { return this.count; }
}
มีหน้าที่จัดการ HTML รับการคลิกจากผู้ใช้ และมีฟังก์ชันเตรียมไว้ให้ Presenter มาสั่งงาน
JavaScript
class CounterView { constructor () { // สมมติว่าใน HTML มี <h1 id="counter-display">0</h1> และ <button id="add-btn">Add</button> this.displayElement = document.getElementById ('counter-display') ; this.buttonElement = document.getElementById ('add-btn') ; } // เปิดช่องทางให้ Presenter เอาฟังก์ชันมาผูกกับปุ่ม bindIncrementEvent (handler) { this.buttonElement.addEventListener ('click', () => { handler () ; // เมื่อถูกคลิก จะเรียกฟังก์ชันที่ Presenter ส่งมาให้ }) ; } // เปิดช่องทางให้ Presenter สั่งอัปเดตหน้าจอ render (count) { this.displayElement.innerText = `จำนวนปัจจุบัน: ${count}`; }
}
เป็นตัวกลางที่จับ Model และ View มาคุยกัน ควบคุม Flow การทำงานทั้งหมด แทน Controller
JavaScript
class CounterPresenter { constructor (model, view) { this.model = model; this.view = view; // 1. นำฟังก์ชัน handleIncrement ไปผูกกับปุ่มใน View this.view.bindIncrementEvent ( () => this.handleIncrement ()) ; // 2. สั่งแสดงผลครั้งแรกตอนเริ่มต้น this.updateView () ; } // ทำงานเมื่อ View แจ้งว่ามีการคลิก handleIncrement () { this.model.increment () ; // สั่ง Model ให้อัปเดตข้อมูล this.updateView () ; // สั่งหน้าจอให้อัปเดต } // ดึงข้อมูลจาก Model แล้วเอาไปสั่ง View ให้เรนเดอร์ updateView () { const currentCount = this.model.getCount () ; this.view.render (currentCount) ; }
}
ในหน้าหลักของเรา เราจะสร้างทั้ง 3 ส่วนขึ้นมาประกอบร่างกัน
JavaScript
// จำลองการเริ่มทำงานของระบบ
document.addEventListener ('DOMContentLoaded', () => { const model = new CounterModel () ; const view = new CounterView () ; // Presenter จะเป็นตัวจับ Model และ View เข้าด้วยกัน const presenter = new CounterPresenter (model, view) ;
}) ;
จะเห็นว่าในฝั่ง CounterView ไม่มีการเรียกใช้ this.model.getCount () เลย หน้าจอทำงานโง่ ๆ แค่รอให้ผู้ใช้กดปุ่มแล้วตะโกนบอก Presenter จากนั้นก็รอ Presenter โยนข้อมูลที่เสร็จแล้วกลับมาให้ผ่านฟังก์ชัน render () อย่างเดียวครับ ทำให้เราสามารถเอา View ตัวอื่นมาเสียบแทนได้ง่ายมาก
ความแตกต่างระหว่าง Controller กับ Presenter เป็นเส้นบาง ๆ ที่ทำให้นักพัฒนาหลายคนสับสน จุดที่ทำให้สองตัวนี้แตกต่างกันอย่างชัดเจนที่สุดคือ “วิธีการที่พวกมันจัดการกับ View และ Model” ครับ
| คุณสมบัติ | Controller | Presenter |
| View รู้จัก Model ไหม? | ✅ รู้จัก | ❌ ไม่รู้จักเด็ดขาด |
| ตรรกะของ View | มีบ้าง | ไม่มีเลย รอรับคำสั่งอย่างเดียว |
| คนอัปเดตหน้าจอ | View อัปเดตตัวเองเมื่อ Model เปลี่ยน | Presenter เป็นคนสั่งอัปเดตหน้าจอ |
| ความสัมพันธ์ (โดยทั่วไป) | 1 Controller : หลาย Views | 1 Presenter : 1 View |
| การเขียน Unit Test | ทำได้ แต่อาจจะยากกว่า | ทำได้ง่ายมาก |
สรุปง่าย ๆ คือ Presenter คือ Controller ที่มีความเป็นเผด็จการสูงกว่า ควบคุมทุกอย่างเบ็ดเสร็จ และไม่ยอมให้ลูกน้อง แอบคุยกันเองข้ามหัวมันครับ
อ่านเพิ่มเติม
อ่านเพิ่มเติม