Ai làm quen hay đã tiếp cận đến lập trình web thì không thể không biết MVC là gì? Vì MVC đều xuất hiện và áp được ứng dụng vào trong các dự án web
Dưới đây, Vietnix sẽ giới thiệu và mô tả cụ thể chi tiết về mô hình MVC, thành phần và nó mô hình này áp dụng vào lập trình như thế nào?
Tìm hiểu mô hình MVC là gì?
MVC là viết tắt của cụm từ Model-View-Controller. MVC là một mẫu kiến trúc phần mềm để tạo lập giao diện người dùng trên máy tính. MVC chia thành ba phần được kết nối với nhau. Chúng bao gồm Model [dữ liệu], View [giao diện] và Controller [bộ điều khiển].
Đơn giản hơn, là mô hình này được chia thành 3 phần trong soure code. Và mỗi phần đảm nhận vai trò và nhiệm vụ riêng biệt nhau và độc lập.
MVC là gì?
Mô hình MVC [MVC pattern] thường được dùng để phát triển giao diện người dùng. Nó cung cấp các thành phần cơ bản để thiết kế một chương trình cho máy tính hoặc điện thoại di động, cũng như là các ứng dụng web.
Đã tìm hiểu mô hình MVC là gì? Dưới đây mình sẽ đi sâu và giải thích từng thành phần trong mô hình.
Nội dung
- Tìm hiểu mô hình MVC là gì?
- Lịch sử của MVC
- Tìm hiểu các thành phần trong mô hình MVC
- Luồng xử lý trong MVC
- Ưu và nhược điểm của MVC
- Ưu điểm mô hình MVC
- Nhược điểm mô hình MVC
- Vì sao nên sử dụng mô hình MVC?
- Ứng dụng mô hình MVC vào lập trình như thế nào?
- Các kỹ năng cần thiết khi sử dụng mô hình kiến trúc
- Cách sử dụng MVC
- Model [dữ liệu]
- View [Giao diện người dùng]
- Controller
- Lời kết
Lịch sử của MVC
MVC được tiến sĩ Trygve Reenskaug đưa vào ngôn ngữ lập trình Smalltalk-76 khi ông đến trung tâm Nghiên cứu Xerox Palo Alto [PARC] vào giữa năm 1970. Sau đó, việc triển khai trở nên phổ biến trong các phiên bản khác của Small- Talk. Năm 1988, các bài báo The Journal of Object Technology JOT mang lại bước tranh toàn cảnh về MVC mang liệu sự hiệu quả tốt nhất.
Tìm hiểu các thành phần trong mô hình MVC
Thành phần của MVC
Mô hình MVC gồm 3 loại chính là thành phần bên trong không thể thiếu khi áp dụng mô hình này:
- Model: Một model là dữ liệu được sử dụng bởi chương tình. Đây có thể là cơ sở dữ liệu, file hay một đối tượng đơn giản. Chẳng hạn như biểu tượng hay là một nhân vật trong game.
- View: View là phương tiện hiển thị các đối tượng trong một ứng dụng. Chẳng hạn như hiển thị một cửa sổ, nút hay văn bản trong một cửa sổ khác. Nó bao gồm bất cứ thứ gì mà người dùng có thể nhìn thấy được.
- Controller: Một controller bao gồm cả Model lẫn View. Nó nhận input và thực hiện các update tương ứng.
Ví dụ: một Controller có thể cập nhật một Model bằng cách thay đổi các thuộc tính của nhân vật trong game. Và nó có thể sửa đổi view bằng cách hiển thị nhân vật được cập nhật trong game đó.
Luồng xử lý trong MVC
Luồng xử lý trong của mô hình MVC, bạn có thể hình dung cụ thể và chi tiết qua từng bước dưới đây:
- Khi một yêu cầu của từ máy khách [Client] gửi đến Server. Thì bị Controller trong MVC chặn lại để xem đó là URL request hay sự kiện.
- Sau đó, Controller xử lý input của user rồi giao tiếp với Model trong MVC.
- Model chuẩn bị data và gửi lại cho Controller.
- Cuối cùng, khi xử lý xong yêu cầu thì Controller gửi dữ liệu trở lại View và hiển thị cho người dùng trên trình duyệt.
View và Model sẽ được xử lý bởi Controller
Ở đây, View không giao tiếp trực tiếp với Model. Sự tương tác giữa View và Model sẽ chỉ được xử lý bởi Controller.
Ưu và nhược điểm của MVC
Ưu điểm mô hình MVC
- Đầu tiên, nhắc tới ưu điểm mô hình MVC thì đó là băng thông [Bandwidth] nhẹ vì không sử dụng viewstate nên khá tiết kiệm băng thông. Việc giảm băng thông giúp website hoạt động ổn địng hơn.
- Kiểm tra đơn giản và dễ dàng, kiểm tra lỗi phần mềm trước khi bàn giao lại cho người dùng.
- Một lợi thế chính của MVC là nó tách biệt các phần Model, Controller và View với nhau.
- Sử dụng mô hình MVC chức năng controller có vai trò quan trọng và tối ưu trên các nền tảng ngôn ngữ khác nhau
- Ta có thể dễ dàng duy trì ứng dụng vì chúng được tách biệt với nhau.
- Có thể chia nhiều developer làm việc cùng một lúc. Công việc của các developer sẽ không ảnh hưởng đến nhau.
- Hỗ trợ TTD [test-driven development]. Chúng ta có thể tạo một ứng dụng với unit test và viết các won test case.
- Phiên bản mới nhất của MVC hỗ trợ trợ responsive website mặc định và các mẫu cho mobile. Chúng ta có thể tạo công cụ View của riêng mình với cú pháp đơn giản hơn nhiều so với công cụ truyền thống.
Nhược điểm mô hình MVC
MVC đa phần phù hợp với công ty chuyên về website hoặc các dự án lớn thì mô hình này phù hợp hơn so với với các dự án nhỏ, lẻ vì khá là cồng kềnh và mất thời gian.
Nhược điểm mô hình MVC không hỗ trợ Preview như ASP.NET
- Không thể Preview các trang như ASP.NET
- Khó triển khai.
Vì sao nên sử dụng mô hình MVC?
Quy trình develop nhanh hơn
MVC hỗ trợ phát việc develop nhanh chóng và song song. Nếu một mô hình MVC được dùng để develop bất kỳ ứng dụng web cụ thể nào, một developer có thể làm việc trên View và một developer khác có thể làm việc với Controller để tạo logic nghiệp vụ cho ứng dụng web đó.
Do đó, ứng dụng mô hình MVC có thể được hoàn thành nhanh hơn ba lần so với các ứng dụng mô hình khác.
Khả năng cung cấp nhiều chế độ view
Trong mô hình MVC, bạn có thể tạo nhiều View cho chỉ một mô hình. Ngày nay, nhu cầu có thêm nhiều cách mới để truy cập ứng dụng và đang ngày càng tăng. Do đó, việc sử dụng MVC để develop chắc chắn là một giải pháp tuyệt vời.
Hơn nữa, với phương pháp này, việc nhân bản code rất hạn chế. Vì nó tách biệt dữ liệu và logic nghiệp vụ khỏi màn hình.
Các sửa đổi không ảnh hưởng đến toàn bộ mô hình
Đối với bất kỳ ứng dụng web nào, user interface có xu hướng thay đổi thường xuyên. Rõ ràng là bạn rất thường xuyên thay đổi màu sắc, font chữ, bố cục màn hình. Hay là thêm hỗ trợ thiết bị mới cho điện thoại hay máy tính bảng
Sửa đổi giao diện, font, hình ảnh, .. không ảnh hưởng đến toàn bộ mô hình MVC
Việc thêm một kiểu view mới trong MVC rất đơn giản. Vì phần Model không phụ thuộc vào phần View. Do đó, bất kỳ thay đổi nào trong Model sẽ không ảnh hưởng đến toàn bộ kiến trúc.
MVC Model trả về dữ liệu mà không cần định dạng
MVC pattern có thể trả về dữ liệu mà không cần áp dụng bất kỳ định dạng nào. Do đó, các thành phần giống nhau có thể được sử dụng với bất kỳ giao diện nào.
Ví dụ: tất cả loại dữ liệu đều có thể được định dạng bằng HTML. Ngoài ra, nó cũng có thể được định dạng bằng Macromedia Flash hay Dream Viewer.
Hỗ trợ kỹ thuật Asynchronous
Kiến trúc MVC có thể được tích hợp với cả JavaScript Framework. Có nghĩa là, các ứng dụng MVC có thể hoạt động ngay cả với các file PDF, trình duyệt riêng cho web hay các widget trên desktop.
Ngoài ra, MVC cũng hỗ trợ kỹ thuật Asynchronous, giúp các developer phát triển các ứng dụng có thể load rất nhanh.
Nền tảng MVC thân thiện với SEO
Nền tảng MVC hỗ trợ phát triển các trang web thân thiện với SEO. Bằng nền tảng này, bạn có thể dễ dàng phát triển các URL thân thiện với SEO để tạo ra nhiều lượt truy cập hơn.
Nền tảng MVC thân thiện với SEO
Những ngôn ngữ như JavaScript hay jQuery có thể được tích hợp với MVC. Từ đó phát triển nhiều ứng dụng web giàu tính năng, đặc biệt là với mô hình MVC trong Java.
Ứng dụng mô hình MVC vào lập trình như thế nào?
Ngôn ngữ lập trình và framework mà bạn dùng phụ thuộc nhiều hơn vào mục đích nghề nghiệp. Nhưng lập trình MVC dưới dạng kiến trúc sẽ luôn là một lựa chọn khả thi để phát triển nghề nghiệp của bạn.
Ví dụ, mọi người đang dần chuyển từ Dotnet MVC sang Dotnet Core. Nhưng hiện nay, vẫn còn nhu cầu về Django cũng sử dụng MVC.
Các kỹ năng cần thiết khi sử dụng mô hình kiến trúc
Khi bạn đã hiểu MVC là gì, thì nó giúp ích cho bạn có được một kiến thức cần thiết và nó là một trong các kỹ năng cần thiết khi bạn làm lập trình. Để sử dụng tốt mô hình kiến trúc này bạn cần có các kỹ năng và kiến thức dưới đây:
- Hiểu rõ về mô hình kiến trúc phần mềm [MVC].
- Hiểu cách sử dụng framework.
- Có kiến thức cơ bản về lập trình hướng đối tượng.
- Có khả năng logic và hiển thị nội dung, đảm bảo được rằng Model và View độc lập với nhau.
Cách sử dụng MVC
Để minh họa rõ hơn về MVC, Vietnix sẽ minh họa cho bạn một ứng dụng web hiển thị tất cả các khải niệm và hoạt động của MVC là gì?
Ví dụ minh họa: Ứng dụng My Car Clicker là một biến thể của Cat Clicker nổi tiếng. Dưới đây là một số khác biệt chính trong ứng dụng này:
- Nhiều mẫu xe hơi được liệt kê.
- Có nhiều bộ đếm click chuột.
- Nó chỉ hiển thị chiếc xe đã chọn.
Ví dụ minh họa về MVC
Ngay bây giờ, sẽ đi vào chi tiết hơn về 3 thành phần tạo nên mô hình kiến trúc MVC nhé.
Model [dữ liệu]
Nhiệm vụ chính của thành phần này chỉ đơn giản là quản lý dữ liệu. Model sẽ chịu trách nhiệm quản lý dữ liệu từ cơ sở dữ liệu, API hay JSON. Trong ứng dụng Car Clicker, Model chứa các đối tượng [ ô tô] với tất cả thông tin [dữ liệu] cần thiết cho ứng dụng.
Nó cũng quản lý chiếc xe hiện tại đang được hiển thị với biến ban đầu được đặt là 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 [Giao diện người dùng]
Nhiệm vụ của View là quyết định xem người dùng sẽ nhìn thấy gì trên màn hình của họ như thế nào?
Ứng dụng Car Clicker có hai chế độ xem: carListView và CarView. Cả hai chế độ xem đều có 2 chức năng quan trọng là xác định những gì mỗi chế độ xem muốn khởi tạo và hiển thị. Chức năng này sẽ quyết định câu hỏi là người dùng sẽ nhìn gì và như thế nào trên màn hình.
- 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.srx = currentCar.imgSrc; this.carImageElem.style.cursor = 'pointer'; }, };
Controller
Chức năng của controller là lấy, sửa đổi và cung cấp dữ liệu cho người dùng. Về cơ bản, controller là liên kết giữa View và Model.
Thông qua các hàm getter và setter, controller lấy dữ liệu từ model và khởi tạo view. Nếu 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[];
Lời kết
Nếu bạn tiếp xúc hay đang làm lập trình viên thì MVC là gì? bạn nên biết và hiểu sâu về mô hình kiến trúc này, vì nó sẽ giúp ích cho bạn rất nhiều trong công việc lập trình trình viên [Developer].
Mong bài viết này của Vietnix sẽ giúp bạn có thêm những thông tin và kiến thức bổ ích. Chúc bạn thành công !!! 5 / 5 [ 6 bình chọn ]