#

Mô hình MVC là gì? Đặc điểm và ví dụ về mô hình MVC

 06/09/2022 - 12:00 Trịnh Duy Thanh

Mô hình MVC giúp đơn giản hóa quá trình quản lý và cho phép các nhà phát triển có thể thực hiện nhiều công việc trên ứng dụng. Vậy mô hình này có cấu trúc như thế nào? Cách triển khai trên ứng dụng web đơn giản nhất là gì? Hãy cùng BKHOST tìm hiểu ở bài viết dưới đây.

Mô hình MVC là gì?

Mo hinh MVC

MVC – Model View Controller là một cấu trúc bao gồm Model có tác dụng hỗ trợ lưu trữ các logic dữ liệu, View là chế độ xem của GUI và cuối cùng Controller là bộ não của ứng dụng giúp kiểm soát cách các dữ liệu được hiển thị.

Đăng ký dịch vụ Hosting tại BKHOST

BKHOST cung cấp dịch vụ Hosting với nhiều mức giá và cấu hình khác nhau, đáp ứng nhu cầu của tất cả khách hàng.

Cam kết hoàn tiền lên đến 100% nếu Quý khách không hài lòng với chất lượng sản phẩm, dịch vụ.

Rất nhiều chương trình khuyến mãi cực hấp dẫn đang chờ bạn. Đăng ký ngay hôm nay!

mua host

Trygve Reenskaug đã giới thiệu về khái niệm MVC và đề xuất sử dụng nó để phát triển GUI ứng dụng máy tính để bàn. Cho đến hiện nay, một số mẫu MVC được sử dụng trên các ứng dụng web hiện đại cho phép mở rộng và bảo trì dễ dàng hơn.

Tại sao nên sử dụng mô hình MVC?

Các mẫu MVC có khả năng phân chia code frontend và backend thành nhiều phần riêng biệt. Điều này hỗ trợ việc quản lý và thực hiện các thay đổi ở cả 2 bên dễ dàng và linh hoạt hơn.

Hướng dẫn sử dụng mô hình MVC

Mẫu MVC trong ứng dụng web giúp hiển thị cách mà các khái niệm hoạt động. Chẳng hạn như ứng dụng My Car Clicker là một phiên bản cải tiến của Cat Clicker. Dưới đây là một số khác biệt cơ bản bao gồm:

  • Không có hình ảnh con vật mà chỉ có hình ảnh chiếc xe.
  • Có nhiều mẫu xe khác nhau.
  • Xuất hiện nhiều bộ đếm nhấp chuột.
  • Hiển thị các chiếc xe đã được chọn.

Model (dữ liệu)

Mô hình có nhiệm vụ quản lý các loại dữ liệu từ cơ sở dữ liệu API đến đối tượng JSON. Trong ứng dụng Car Clicker, đối tượng mô hình lưu trữ các thông tin dữ liệu quan trọng cần thiết cho ứng dụng. Ngoài ra, nó cũng quản lý Car được hiển thị với một biến ban đầu được đặt thành null:

const model = {
currentCar: null,
cars: [
{
clickCount: 0,
name: 'Coupe Maserati',
imgSrc: 'img/black-convertible-coupe.jpg',
},
{
clickCount: 0,
name: 'Camaro SS 1LE',
imgSrc: 'img/chevrolet-camaro.jpg',
},
{
clickCount: 0,
name: 'Dodger Charger 1970',
imgSrc: 'img/dodge-charger.jpg',
},
{
clickCount: 0,
name: 'Ford Mustang 1966',
imgSrc: 'img/ford-mustang.jpg',
},
{
clickCount: 0,
name: '190 SL Roadster 1962',
imgSrc: 'img/mercedes-benz.jpg',
},
],
};

View (UI)

View có nhiệm vụ quyết định người dùng có thể nhìn thấy gì trên màn hình hiển thị. Ứng dụng Car Clicker có hai chế độ xem là carListView và CarView đều có chức năng xác định những gì mỗi chế độ xem muốn khởi tạo và hiển thị. Các chức năng này sẽ quyết định ứng dụng hiển thị những gì cho người dùng và cách hiển thị.

carListView

const carListView = {
init() {
// store the DOM element for easy access later
this.carListElem = document.getElementById('car-list');

// render this view (update the DOM elements with the right values)
this.render();
},

render() {
let car;
let elem;
let i;
// get the cars to be render from the controller
const cars = controller.getCars();

// to make sure the list is empty before rendering
this.carListElem.innerHTML = '';

// loop over the cars array
for(let i = 0; i < cars.length; i++) {
// this is the car we've currently looping over
car = cars[i];

// make a new car list item and set its text
elem = document.createElement('li');
elem.className = 'list-group-item d-flex justify-content-between lh-condensed';
elem.style.cursor = 'pointer';
elem.textContent = car.name;
elem.addEventListener(
'click',
(function(carCopy) {
return function() {
controller.setCurrentCar(carCopy);
carView.render();
};
})(car)
);
// finally, add the element to the list
this.carListElem.appendChild(elem);
}
},
};

CarView
const carView = {
init() {
// store pointers to the DOM elements for easy access later
this.carElem = document.getElementById('car');
this.carNameElem = document.getElementById('car-name');
this.carImageElem = document.getElementById('car-img');
this.countElem = document.getElementById('car-count');
this.elCount = document.getElementById('elCount');

// on click, increment the current car's counter
this.carImageElem.addEventListener('click', this.handleClick);

// render this view (update the DOM elements with the right values)
this.render();
},

handleClick() {
return controller.incrementCounter();
},

render() {
// update the DOM elements with values from the current car
const currentCar = controller.getCurrentCar();
this.countElem.textContent = currentCar.clickCount;
this.carNameElem.textContent = currentCar.name;
this.carImageElem.src = currentCar.imgSrc;
this.carImageElem.style.cursor = 'pointer';
},
};

Controller (Brain)

Controller có nhiệm vụ thu thập, sửa đổi và cung cấp các dữ liệu cho người dùng. Cụ thể, Controller được sử dụng để liên kết giữa View và Model.

Controller sử dụng các hàm Getter và Setter để lấy dữ liệu từ Model, sau đó tiến hành khởi tạo các View. Nếu như có bất kỳ cập nhật nào từ View, nó sẽ sửa đổi dữ liệu bằng hàm Setter.

const controller = {
init() {
// set the current car to the first one in the list
model.currentCar = model.cars[0];

// tell the views to initialize
carListView.init();
carView.init();
},

getCurrentCar() {
return model.currentCar;
},

getCars() {
return model.cars;
},

// set the currently selected car to the object that's passed in
setCurrentCar(car) {
model.currentCar = car;
},

// increment the counter for the currently-selected car
incrementCounter() {
model.currentCar.clickCount++;
carView.render();
},
};

// Let's goooo!
controller.init();

MVC Framework

Hầu hết các ứng dụng đều sử dụng JavaScript làm công cụ hỗ trợ toàn diện, trong đó có mô hình kiến trúc MVC. Các Framework đến và đi đều không có sự thay đổi về các khái niệm được triển khai dựa trên MVC. Ngoài ra, một số Framework ban đầu áp dụng các khái niệm khác như KnockoutJS, Django và Ruby on Rails.

Tổng kết về mô hình MVC

Các ứng dụng web hiện đại có cấu trúc phức tạp và khó thay đổi. Mô hình kiến trúc giúp quản lý giao diện người dùng và hỗ trợ các thành phần nhỏ cho phép mở rộng và bảo trì ứng dụng. Hy vọng qua bài viết này bạn đã có thể nắm được cái khái niệm về mô hình MVC và cách triển khai nó hiệu quả.

Nếu bạn có thắc mắc về mô hình MVC, hãy để lại ở bên bình luận bên dưới, BKHOST sẽ trả lời bạn trong thời gian sớm nhất.

P/s: Bạn cũng có thể truy cập vào Blog của BKHOST để đọc thêm các bài viết chia sẻ kiến thức về lập trình, quản trị mạng, website, domain, hosting, vps, server, email,… Chúc bạn thành công.


  • mô hình mvc là gì

Đăng ký tên miền tại BKHOST

BKHOST đang có chương trình khuyến mại cực shock dành cho khách hàng đăng ký mới tên miền.

  • Giảm giá lên đến 70%.
  • Bắt đầu chỉ từ 59k/năm đầu.

Rất nhiều tên miền đẹp đang chờ bạn. Nhanh tay sở hữu ngay hôm nay trước khi đối thủ của bạn nhắm tới.

tên miền website

Tôi là Trịnh Duy Thanh, CEO & Founder Công ty Cổ Phần Giải Pháp Mạng Trực Tuyến Việt Nam - BKHOST. Với sứ mệnh mang tới các dịch vụ trên Internet tốt nhất cho các cá nhân và doanh nghiệp trong nước và quốc tế, tôi luôn nỗ lực hết mình nâng cấp đầu tư hệ thống phần cứng, nâng cao chất lượng dịch vụ chăm sóc khách hàng để đem đến những sản phẩm hoàn hảo nhất cho người tiêu dùng. Vì vậy, tôi tin tưởng sẽ đem đến các giải pháp CNTT mới nhất, tối ưu nhất, hiệu quả nhất và chi phí hợp lý nhất cho tất cả các doanh nghiệp.
Bình luận

Thanh toán linh hoạt

Chúng tôi chấp nhận thanh toán như ATM, Visa, Internet Banking, Paypal, Baokim, Ngân lượng

Gọi ĐT tư vấn ngay
Chat ngay qua Zalo
Chat ngay qua Messenger
Góp ý cho chúng tôi