BackboneJS - Ứng dụng

BackboneJS cung cấp một cấu trúc cho các ứng dụng web cho phép tách biệt logic nghiệp vụ và logic giao diện người dùng. Trong chương này, chúng ta sẽ thảo luận về phong cách kiến trúc của ứng dụng BackboneJS để triển khai các giao diện người dùng. Sơ đồ sau đây cho thấy kiến trúc của BackboneJS:

Kiến trúc của BackboneJS chứa các mô-đun sau:

Yêu cầu HTTP
Router
View
Events
Model
Collection
Nguồn dữ liệu

Bây giờ chúng ta hãy thảo luận chi tiết về tất cả các mô-đun.

Yêu cầu HTTP

Máy khách HTTP gửi một yêu cầu HTTP đến một máy chủ dưới dạng thông báo yêu cầu trong đó trình duyệt web, công cụ tìm kiếm, v.v., hoạt động giống như máy khách HTTP. Người dùng yêu cầu một tệp như tài liệu, hình ảnh, v.v. bằng giao thức yêu cầu HTTP. Trong sơ đồ trên, bạn có thể thấy rằng máy khách HTTP sử dụng bộ định tuyến để gửi yêu cầu máy khách.

Bộ định tuyến

Nó được sử dụng để định tuyến các ứng dụng phía máy khách và kết nối chúng với các hành động và sự kiện bằng cách sử dụng URL. Nó là một đại diện URL của các đối tượng của ứng dụng. URL này được thay đổi theo cách thủ công bởi người dùng. URL được xương sống sử dụng để nó có thể hiểu trạng thái ứng dụng nào sẽ được gửi hoặc hiển thị cho người dùng.

Bộ định tuyến là một cơ chế có thể sao chép URL để truy cập chế độ xem. Bộ định tuyến là bắt buộc khi các ứng dụng web cung cấp URL có thể liên kết, đánh dấu trang và có thể chia sẻ cho các vị trí quan trọng trong ứng dụng.

Trong kiến trúc trên, bộ định tuyến gửi một yêu cầu HTTP đến Chế độ xem. Nó là một tính năng hữu ích khi một ứng dụng cần khả năng định tuyến.

Lượt xem

Các khung nhìn BackboneJS chịu trách nhiệm về cách thức và nội dung hiển thị từ ứng dụng của chúng tôi và chúng không chứa đánh dấu HTML cho ứng dụng. Nó chỉ định một ý tưởng đằng sau việc trình bày dữ liệu của mô hình cho người dùng. Chế độ xem được sử dụng để phản ánh "mô hình dữ liệu của bạn trông như thế nào".

Các lớp chế độ xem không biết gì về HTML và CSS và mỗi chế độ xem có thể được cập nhật độc lập khi mô hình thay đổi mà không cần tải lại toàn bộ trang. Nó đại diện cho phần logic của giao diện người dùng trong DOM.

Như thể hiện trong kiến trúc trên, View đại diện cho giao diện người dùng, giao diện người dùng chịu trách nhiệm hiển thị phản hồi cho yêu cầu người dùng được thực hiện bằng cách sử dụng Router.

Sự kiện

Sự kiện là phần chính của bất kỳ ứng dụng nào. Nó liên kết các sự kiện tùy chỉnh của người dùng với một ứng dụng. Chúng có thể được trộn vào bất kỳ đối tượng nào và có khả năng ràng buộc và kích hoạt các sự kiện tùy chỉnh. Bạn có thể liên kết các sự kiện tùy chỉnh bằng cách sử dụng tên mong muốn mà bạn chọn.

Thông thường, các sự kiện được xử lý đồng bộ với luồng chương trình của chúng. Trong kiến trúc trên, bạn có thể thấy khi một sự kiện xảy ra, nó đại diện cho dữ liệu của mô hình bằng cách sử dụng Chế độ xem.

Mô hình

Nó là trung tâm của ứng dụng JavaScript lấy và điền dữ liệu. Mô hình chứa dữ liệu của một ứng dụng, logic của dữ liệu và đại diện cho đối tượng dữ liệu cơ bản trong khuôn khổ.

Mô hình đại diện cho các thực thể kinh doanh với một số logic kinh doanh và xác nhận kinh doanh. Chúng chủ yếu được sử dụng để lưu trữ dữ liệu và logic nghiệp vụ. Mô hình có thể được truy xuất từ và lưu vào bộ nhớ dữ liệu. Một Mô hình lấy yêu cầu HTTP từ các Sự kiện do Chế độ xem truyền qua Bộ định tuyến và đồng bộ hóa dữ liệu từ cơ sở dữ liệu và gửi phản hồi trở lại máy khách.

Bộ sưu tập

Bộ sưu tập là một tập hợp các mô hình liên kết các sự kiện, khi mô hình đã được sửa đổi trong bộ sưu tập. Bộ sưu tập chứa danh sách các mô hình có thể được xử lý trong vòng lặp và hỗ trợ sắp xếp và lọc. Khi tạo một bộ sưu tập, chúng ta có thể xác định loại mô hình mà bộ sưu tập đó sẽ có cùng với thể hiện của các thuộc tính. Bất kỳ sự kiện nào được kích hoạt trên một mô hình cũng sẽ kích hoạt trên bộ sưu tập trong mô hình.

Nó cũng nhận yêu cầu từ chế độ xem, liên kết các sự kiện và đồng bộ hóa dữ liệu với dữ liệu được yêu cầu và gửi phản hồi trở lại máy khách HTTP.

Nguồn dữ liệu

Nó là kết nối được thiết lập với cơ sở dữ liệu từ máy chủ và chứa thông tin được yêu cầu từ máy khách. Luồng của kiến trúc BackboneJS có thể được mô tả như thể hiện trong các bước sau:

Người dùng yêu cầu dữ liệu bằng cách sử dụng bộ định tuyến, định tuyến các ứng dụng đến các sự kiện bằng cách sử dụng URL.
Chế độ xem đại diện cho dữ liệu của mô hình cho người dùng.
Mô hình và bộ sưu tập truy xuất và điền dữ liệu từ cơ sở dữ liệu bằng cách ràng buộc các sự kiện tùy chỉnh.

Trong chương tiếp theo, chúng ta sẽ hiểu tầm quan trọng của Sự kiện trong BackboneJS.