Trong quá trình phát triển của lập trình hướng đối tượng , model-view-controller (MVC) là một phương pháp luận hoặc mẫu thiết kế giúp bạn liên kết giao diện người dùng với các mô hình dữ liệu cơ bản một cách hiệu quả và thành công. Trong bài viết này, chúng ta sẽ tìm hiểu về Kiến trúc MVC theo trình tự sau:
Kiến trúc JavaScript MVC
Trong thời gian gần đây, mẫu MVC được áp dụng cho một loạt các ngôn ngữ lập trình, bao gồm . JavaScript bao gồm một số khuôn khổ để hỗ trợ kiến trúc MVC hoặc các biến thể trên đó. Nó cho phép các nhà phát triển thêm cấu trúc vào ứng dụng của họ một cách dễ dàng và không tốn nhiều công sức.
MVC bao gồm ba thành phần:
- Mô hình
- Lượt xem
- Bộ điều khiển
Bây giờ, hãy tiếp tục và đi sâu vào ba thành phần JavaScript MVC này.
Mô hình
Mô hình được sử dụng để quản lý dữ liệu cho một ứng dụng. Họ không quan tâm đến giao diện người dùng hoặc các lớp trình bày. Thay vào đó, chúng đại diện cho các dạng dữ liệu duy nhất mà ứng dụng có thể yêu cầu. Khi một mô hình được thay đổi hoặc cập nhật, nó thường sẽ thông báo cho những người quan sát về sự thay đổi đã xảy ra để họ có thể hành động tương ứng.
lớp pojo trong java là gì với ví dụ
Hãy lấy một ví dụ về một mô hình đơn giản được triển khai bằng cách sử dụng Backbone:
var Photo = Backbone.Model.extend ({// Thuộc tính mặc định cho ảnh mặc định: {src: 'placeholder.jpg', caption: 'A default image', watching: false}, // Đảm bảo rằng mỗi ảnh được tạo có một `src`. khởi tạo: function () {this.set ({'src': this.defaults.src})}})Trong một thư viện ảnh, khái niệm về một bức ảnh sẽ xứng đáng với mô hình của chính nó, vì nó đại diện cho một loại dữ liệu miền cụ thể duy nhất. Một mô hình như vậy có thể chứa các thuộc tính liên quan như chú thích, nguồn hình ảnh và siêu dữ liệu bổ sung. Trong ví dụ trên, một bức ảnh cụ thể sẽ được lưu trữ trong một phiên bản của mô hình.
Lượt xem
Chế độ xem là một đại diện trực quan của các mô hình cung cấp chế độ xem được lọc về trạng thái hiện tại của chúng. Các khung nhìn JavaScript được sử dụng để xây dựng và duy trì một phần tử DOM. Một khung nhìn thường quan sát một mô hình và được thông báo khi mô hình thay đổi, cho phép khung nhìn tự cập nhật cho phù hợp. Ví dụ:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Chúng tôi sử dụng thư viện tạo khuôn mẫu chẳng hạn như Dấu gạch dưới // tạo mẫu tạo HTML cho // mục nhập ảnh photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('click', function () {photoController.handleEvent ('click', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView: show, hideView: hide}}Lợi ích của kiến trúc này là mỗi thành phần đóng một vai trò riêng biệt trong việc làm cho ứng dụng hoạt động khi cần thiết.
Bộ điều khiển
Bộ điều khiển hoạt động giống như trung gian giữa các mô hình và khung nhìn, chịu trách nhiệm cập nhật mô hình khi người dùng thao tác với khung nhìn. Trong ví dụ trên về ứng dụng thư viện ảnh của chúng tôi, một bộ điều khiển sẽ chịu trách nhiệm xử lý các thay đổi mà người dùng thực hiện đối với chế độ xem chỉnh sửa cho một bức ảnh cụ thể, cập nhật một mẫu ảnh cụ thể khi người dùng đã chỉnh sửa xong.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('tiêu diệt', this.proxy (this .remove))}, render: function () {// Xử lý templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remove: function () {this.el.remove () this.release ()}})Ví dụ này sẽ cung cấp cho bạn một cách rất nhẹ, đơn giản để quản lý các thay đổi giữa mô hình và chế độ xem.
Khung JavaScript MVC
Trong vài năm qua, một loạt JavaScript MVC đã được phát triển. Mỗi một trong số các khuôn khổ này tuân theo một số dạng mẫu MVC với mục tiêu khuyến khích các nhà phát triển viết mã JavaScript có cấu trúc hơn. Một số Khung là:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Giao diện người dùng Kendo
Với điều này, chúng ta đã đến phần cuối của bài viết JavaScript MVC. Tôi hy vọng bạn đã hiểu ba thành phần liên quan đến kiến trúc MVC.
Bây giờ bạn đã biết về JavaScript MVC, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của “JavaScript MVC” và chúng tôi sẽ liên hệ lại với bạn.
lý tưởng java tốt nhất cho người mới bắt đầu