[ New ] Tìm Hiểu MVC Pattern: Quản Lý 1 Đơn Hàng với JavaScript

Mô hình Model-View-Controller (MVC) là một mẫu thiết kế phổ biến được sử dụng để chia các bộ phận của một ứng dụng thành các bộ phận riêng biệt, điều này giúp quản lý ứng dụng tốt hơn.

Đây là một ví dụ cơ bản về cách áp dụng mô hình trong JavaScript để quản lý một “Order”.

Mô hình MVC trong source

Dưới đây là toàn bộ các file cần thiết cơ bản của mô hình cũng như cấu trúc thư mục

Cấu trúc thư mục MVC Pattern

project-root/
│
├── index.html
│
├── css/
│   └── styles.css
│
├── js/
│   ├── models/
│   │   └── Order.js
│   │
│   ├── views/
│   │   └── OrderView.js
│   │
│   ├── controllers/
│   │   └── OrderController.js
│   │
│   └── app.js
│
└── assets/
    └── images/
        └── logo.png

index.

html chứa một mô tả chi tiết về tệp và thư mục.

Tệp HTML chính của ứng dụng, trong đó bạn tích hợp các thành phần JavaScript và CSS.

CSS:

Thư mục bao gồm các tệp CSS có thể được sử dụng để thay đổi giao diện người dùng.

StyleSheets.

css: Các kiểu dáng của ứng dụng có trong tệp CSS.

“js/”:

Mọi mã JavaScript của ứng dụng được tìm thấy trong thư mục.

model/:

Các lớp Model.

Order.

js được tìm thấy trong thư mục.

Lớp Order quản lý logic và dữ liệu liên quan đến đơn hàng.

view/:

OrderView.

js là một lớp View được tìm thấy trong thư mục.

Lớp OrderView chịu trách nhiệm hiển thị dữ liệu cho người dùng.

controler/:

OrderController.

js là một lớp điều khiển trong thư mục.

Nó điều phối luồng dữ liệu giữa Model và View.

“app.

js”:

Tệp JavaScript chính để khởi tạo ứng dụng, thiết lập các thành phần Model, View và Controller và kết nối chúng.

assets/:

– Tài nguyên tĩnh như hình ảnh và biểu tượng có trong thư mục.

– Thư mục chứa các tệp hình ảnh.

– Tệp hình ảnh cụ thể là logo.

png.

Model (Order Model)

class Order {
    constructor(id, product, quantity, price) {
        this.id = id;
        this.product = product;
        this.quantity = quantity;
        this.price = price;
    }

    getTotalPrice() {
        return this.quantity * this.price;
    }
}

Đây là Model của class Order có chức năng làm DTO trong c# hay còn gọi là lớp vận chuyển (Data transfer object)

Với class model trên bạn có thể áp dụng hướng đối tượng và tạo ra các phương thức tính toán trên class

View (Order View)

class OrderView {
    constructor() {
        this.app = document.getElementById('app');
        this.orderList = this.createElement('ul', 'order-list');
        this.app.append(this.orderList);
    }

    createElement(tag, className) {
        const element = document.createElement(tag);
        if (className) element.classList.add(className);
        return element;
    }

    displayOrders(orders) {
        while (this.orderList.firstChild) {
            this.orderList.removeChild(this.orderList.firstChild);
        }

        orders.forEach(order => {
            const li = this.createElement('li');
            li.textContent = `Order ${order.id}: ${order.product} x ${order.quantity} - $${order.getTotalPrice().toFixed(2)}`;
            this.orderList.append(li);
        });
    }
}

với class này sẽ hiển thị ra màn hình hoặc bạn có thể viết API để trả về JSON nếu bạn muốn tách riêng fontend và backend

Controller (Order Controller)

class OrderController {
    constructor(model, view) {
        this.model = model;
        this.view = view;

        // Temporary hardcoded orders
        this.orders = [
            new Order(1, 'Apple', 3, 1.00),
            new Order(2, 'Banana', 2, 0.50),
            new Order(3, 'Cherry', 5, 0.20),
        ];

        this.view.displayOrders(this.orders);
    }

    addOrder(id, product, quantity, price) {
        const newOrder = new Order(id, product, quantity, price);
        this.orders.push(newOrder);
        this.view.displayOrders(this.orders);
    }
}

// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
    const app = new OrderController(new Order(), new OrderView());
});

Đảm nhiệm chức năng kết nối giữa view và model

Các logic hay xử lý chức năng sẽ được viết vào đây

Giao diện test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVC Example</title>
</head>
<body>
    <div id="app"></div>
    <script src="mvc_order.js"></script>
</body>
</html>

Nhúng script và run xem kết quả

Giải thích chi tiết về mô hình MVC

Mô hình Model-View-Controller là một mẫu thiết kế phần mềm giúp tổ chức và phân biệt các thành phần của ứng dụng một cách dễ dàng, giúp tăng khả năng bảo trì và mở rộng ứng dụng.

Đây là một giải thích chi tiết về từng thành phần:

Model
Nhiệm vụ: Chịu trách nhiệm quản lý logic nghiệp vụ và dữ liệu của ứng dụng.

Chức năng: Giám sát trạng thái dữ liệu của ứng dụng.

Tiến hành các thao tác CRUD (tạo, đọc, cập nhật và loại bỏ) trên dữ liệu.

Thực hiện logic liên quan đến công việc.

Bất kỳ thay đổi nào trong dữ liệu sẽ được thông báo cho View.

Một ví dụ là một model trong hệ thống quản lý đơn hàng có thể bao gồm các lớp như Đơn hàng, Sản phẩm và Khách hàng, với các thuộc tính và phương thức tương ứng để quản lý đơn hàng, sản phẩm và khách hàng.

View
Nhiệm vụ: Trình bày dữ liệu và giao diện người dùng.

Chức năng: thu thập dữ liệu từ Model và trình bày cho người dùng xem.

xử lý các tương tác của người dùng, chẳng hạn như nhập dữ liệu hoặc nhấp chuột, và sau đó gửi các tương tác đó đến quản lý.

Cập nhật giao diện khi các thông tin thay đổi.

Một ví dụ là hệ thống quản lý đơn hàng có thể sử dụng View để hiển thị danh sách đơn hàng cũng như thông tin liên quan đến các sản phẩm và khách hàng.

View có thể được tạo thành các trang HTML hoặc thành phần giao diện người dùng.

mvc pattern quan ly 1 don hang voi javascript 3 jpeg

Controller
Công việc: xử lý các yêu cầu của người dùng và cân bằng luồng dữ liệu giữa Model và View.

Chức năng: Nhận các yêu cầu từ View (ví dụ: hành động của người dùng).

Xử lý logic nghiệp vụ cần thiết cho Model.

Cập nhật Model nếu người dùng thực hiện thay đổi.

Để hiển thị, hãy lấy dữ liệu từ Model.

Ví dụ, người quản lý trong hệ thống quản lý đơn hàng có thể xử lý yêu cầu thêm một đơn hàng mới, cập nhật thông tin về sản phẩm hoặc xóa khách hàng.

Nó sẽ tương tác với Model để thực hiện các hoạt động này và cập nhật View theo cách phù hợp.

– Ưu điểm
Tách biệt trách nhiệm: chia các thành phần của ứng dụng thành các phần riêng biệt với trách nhiệm rõ ràng để tăng khả năng bảo trì và mở rộng.

Dễ bảo trì: Khi có thay đổi trong giao diện hoặc yêu cầu nghiệp vụ, bạn chỉ cần cập nhật một phần (Model hoặc View) của ứng dụng mà không ảnh hưởng đến các phần khác.

Tái sử dụng: Các thành phần của MVC có thể được sử dụng lại trong các phần khác của ứng dụng hoặc trong các dự án khác.

Giải thích rõ hơn

Giải thích: Model mô tả logic và dữ liệu của đơn hàng.

Nó có các thuộc tính như id, product, quantity và price, cũng như một phương thức để tính giá tổng.

View: OrderView class hiển thị dữ liệu cho người dùng.

Nó tạo các phần tử HTML cần thiết và có một phương thức displayOrders() cho phép giao diện cập nhật danh sách đơn hàng.

Controler: Class OrderController quản lý tương tác giữa Model và View.

Nó tạo dữ liệu đơn hàng, cập nhật View khi có thay đổi và cung cấp phương thức addOrder() để thêm đơn hàng mới.

Bạn có thể xem ứng dụng hoạt động bằng cách mở tệp HTML trong trình duyệt.

Mặc dù đây chỉ là một ví dụ đơn giản, nhưng nó cho thấy cách tổ chức mã JavaScript của bạn bằng cách sử dụng mô hình.

Mở rộng thêm MVC

Tại đây nhá thêm các cách xử lý mô hình khi phát triển lớn hơn MVC 2

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Google Maps: @khuongkara

#Base Code #Souce Code

Npm: @tools.mtips5s.com

Bộ công cụ My Self: @github

Npm: @npm

Docker: @docker

Chúc các bạn thành công!