Aurelia - Plugin

Khi bạn bắt đầu xây dựng ứng dụng của mình, hầu hết thời gian bạn sẽ muốn sử dụng một số plugin bổ sung. Trong chương này, bạn sẽ học cách sử dụng các plugin trong Aurelia framework.

Plugin tiêu chuẩn

Trong chương trước, chúng ta đã biết cách sử dụng cấu hình mặc định trong khung công tác Aurelia. Nếu bạn đang sử dụng cấu hình mặc định, bộ plugin tiêu chuẩn sẽ có sẵn.

defaultBindingLanguage() - Plugin này cung cấp một cách dễ dàng để kết nối view-model với view. Bạn đã thấy cú pháp liên kết dữ liệu một chiều(${someValue}). Mặc dù bạn có thể sử dụng một số ngôn ngữ ràng buộc khác, nhưng bạn nên sử dụng ngôn ngữ ràng buộc mặc định.
defaultResources() - Tài nguyên mặc định cung cấp cho chúng ta một số cấu trúc nguyên thủy như if, repeat, compose, v.v. Bạn thậm chí có thể tự mình xây dựng các cấu trúc này, nhưng vì chúng được sử dụng rất phổ biến nên Aurelia đã tạo nó bên trong thư viện này.
Router()- Hầu hết các ứng dụng sử dụng một số loại định tuyến. Vì thế,Routerlà một phần của các plugin tiêu chuẩn. Bạn có thể kiểm tra thêm về định tuyến trong chương tiếp theo.
History() - Plugin lịch sử thường được sử dụng cùng với router.
eventAggregator()- Plugin này được sử dụng để giao tiếp giữa các thành phần. Nó xử lý việc xuất bản và đăng ký các tin nhắn hoặc kênh bên trong ứng dụng của bạn.

Plugin chính thức

Các plugin này không phải là một phần của cấu hình mặc định nhưng thường được sử dụng.

fetch()- Plugin tìm nạp được sử dụng để xử lý các yêu cầu HTTP. Bạn có thể sử dụng một số thư viện AJAX khác nếu muốn.
animatorCSS() - Plugin này cung cấp một cách xử lý hoạt ảnh CSS.
animator-velocity()- Thay vì hoạt ảnh CSS, bạn có thể sử dụng thư viện hoạt ảnh Velocity. Các plugin này cho phép chúng tôi sử dụng Velocity bên trong các ứng dụng Aurelia.
dialog() - Plugin hộp thoại cung cấp một cửa sổ phương thức có thể tùy chỉnh cao.
i18n() - Đây là plugin để nội bộ hóa và bản địa hóa.
ui-virtualization() - Ảo hóa là một thư viện hữu ích để xử lý các tác vụ UI nặng hiệu suất lớn.
validation() - Sử dụng plugin này khi bạn cần xác thực dữ liệu của mình.

Tất cả các plugin được giải thích ở trên đều được Nhóm Aurelia Core chính thức duy trì tại thời điểm viết hướng dẫn này. Sẽ có một số plugin hữu ích khác được bổ sung trong tương lai. Ví dụ sau đây cho thấy cách định cấu hình ứng dụng của bạn để sử dụng các plugin.

Cài đặt plugin

Ví dụ: nếu chúng tôi muốn sử dụng animator-css và animator-velocity, chúng ta cần cài đặt nó trước.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

Trong chương trước, bạn đã học cách sử dụng cấu hình thủ công. Chúng tôi có thể thêm các plugin của mình vàomain.js tập tin.

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}