Cấu Trúc Khung Bọc Module Trong Tapato

Tổng quan

Trong Tapato, mỗi module được xây dựng theo kiến trúc 3 lớp khung bọc lồng nhau. Thiết kế này giúp hệ thống linh hoạt hơn trong việc hiển thị trên nhiều thiết bị, đồng thời cho phép tùy biến giao diện mà không ảnh hưởng đến nội dung bên trong.

Khác với nhiều nền tảng chỉ sử dụng một lớp chứa nội dung, Tapato tách riêng trách nhiệm của từng lớp để tối ưu khả năng responsive, mở rộng tính năng và nâng cao hiệu suất hiển thị.

---

Mô hình cấu trúc       

Sơ đồ lớp

tp-module-outer

└── tp-module-wrapper

    └── tp-module-inner

---

1. tp-module-outer

Lớp Responsive

Đây là lớp ngoài cùng và luôn tồn tại trong mọi module.

Nhiệm vụ chính:

- Bao bọc toàn bộ module.

- Chịu trách nhiệm responsive trên Desktop, Tablet và Mobile.

- Điều khiển chiều rộng hiển thị của module.

- Quản lý margin và khoảng cách với các module khác.

- Thiết lập background, border hoặc shadow cho toàn bộ module.

- Thay đổi layout theo từng breakpoint màn hình.

Có thể hiểu đây là lớp giúp module thích nghi với mọi kích thước thiết bị.

---

2. tp-module-wrapper

Lớp Cấu Trúc Động (Dynamic Structure Layer)

Đây là lớp trung gian giữa phần responsive và phần nội dung.

Nhiệm vụ chính:

- Gom các thuộc tính cấu trúc chung.

- Thiết lập padding.

- Căn chỉnh nội dung.

- Hỗ trợ các thiết lập trình bày đặc biệt.

Điểm đặc biệt:

- Lớp này không bắt buộc phải tồn tại.

- Hệ thống có thể tự động sinh ra hoặc loại bỏ theo cấu hình module.

- Khi không cần thiết, Tapato có thể bỏ qua lớp này để giảm số lượng phần tử HTML và tăng hiệu suất tải trang.

---

3. tp-module-inner

Lớp Nội Dung Động (Dynamic Content Layer)

Đây là lớp chứa nội dung thực tế mà người dùng nhìn thấy.

Có thể chứa:

- Text

- Image

- Button

- Form

- Video

- Icon

- Danh sách sản phẩm

- Banner

- Các thành phần tùy chỉnh khác

Điểm đặc biệt:

 

- Có thể được sinh tự động theo cấu hình của từng module.

- Có thể mở rộng hoặc thu gọn linh hoạt.

- Cho phép các loại module khác nhau sử dụng chung một kiến trúc nền tảng.

---

Cơ Chế Đóng / Mở Linh Hoạt

Tapato không bắt buộc mọi module phải luôn có đủ 3 lớp.

Tùy theo nhu cầu sử dụng, hệ thống có thể:

Trường hợp 1: Đầy đủ 3 lớp

outer

└── wrapper

    └── inner

Trường hợp 2: Bỏ lớp wrapper

outer

└── inner

Trường hợp 3: Module tối giản

outer

Nhờ cơ chế này, Tapato vừa đảm bảo tính linh hoạt vừa tối ưu hiệu năng hiển thị.

---

Lợi Ích Của Kiến Trúc 3 Lớp

Responsive tối ưu

Mọi xử lý responsive được tập trung tại lớp ngoài cùng, giúp dễ quản lý và bảo trì.

Tùy biến linh hoạt

Có thể thay đổi cấu trúc hoặc giao diện mà không ảnh hưởng đến nội dung bên trong.

Hiệu suất cao

Các lớp không cần thiết có thể được loại bỏ tự động để giảm DOM và tăng tốc độ tải trang.

Dễ mở rộng

Các module mới có thể kế thừa cùng một kiến trúc mà không cần xây dựng lại từ đầu.

Dễ bảo trì

Mỗi lớp đảm nhận một vai trò riêng biệt, giúp việc nâng cấp và phát triển hệ thống đơn giản hơn.

---

Nguyên Tắc Cốt Lõi

tp-module-outer luôn tồn tại và chịu trách nhiệm responsive.

tp-module-wrapper và tp-module-inner là các lớp động, có thể được hệ thống tự động sinh ra hoặc loại bỏ tùy theo cấu hình của từng module.

Chính kiến trúc này giúp Tapato đạt được sự cân bằng giữa tính linh hoạt, khả năng mở rộng và hiệu suất vận hành.