Thực tiễn tốt nhất: Xây dựng Dịch vụ góc bằng cách sử dụng mẫu thiết kế Mặt tiền cho các hệ thống phức tạp

Dịch vụ góc

Khái niệm dịch vụ góc luôn nhầm lẫn người mới với dịch vụ REST phía máy chủ. Nếu bạn vẫn không chắc nó là gì, tôi sẽ khuyên bạn nên đọc tài liệu Angular

Angular Services có trách nhiệm cung cấp dữ liệu ứng dụng / logic nghiệp vụ cho các thành phần. Các thành phần nên lấy / cung cấp dữ liệu cho dịch vụ và hoạt động như chất keo giữa chế độ xem và dịch vụ. Đây là dịch vụ có thể quyết định cung cấp dữ liệu giả hoặc đến máy chủ và tìm nạp dữ liệu từ cơ sở dữ liệu / tệp / dịch vụ khác, v.v.

Lý tưởng nhất, các dịch vụ nên được định hướng tính năng. Bạn có thể lựa chọn xây dựng một lớp dịch vụ khổng lồ hoặc các bộ sưu tập dịch vụ vi mô. Theo cách tiếp cận đầu tiên, sẽ chỉ có một dịch vụ chứa tất cả logic nghiệp vụ và sẽ được cung cấp thông qua Tiêm phụ thuộc góc trong tất cả các thành phần trong hệ thống. Vấn đề với cách tiếp cận này là, lớp dịch vụ khổng lồ sẽ trở thành vấn đề hiệu suất hàng đầu cuối cùng. Mọi thành phần sẽ được tiêm dịch vụ và chức năng không cần thiết cho thành phần tiêu dùng. Bạn có nghĩ rằng nó là tốt?

Trong cách tiếp cận thứ hai (theo sau rộng rãi), tính năng dịch vụ vi mô cụ thể được xây dựng. Ví dụ: nếu hệ thống của bạn có các thành phần Đăng nhập, Đăng ký, Bảng điều khiển thì bạn sẽ xây dựng Đăng nhập Dịch vụ, SignUpService, DashboardService, v.v. Mỗi dịch vụ phải chứa chức năng cần thiết cho thành phần được nhắm mục tiêu cụ thể. Bây giờ thiết kế này có vẻ tốt, phải không?

Vấn đề?

Trong khi xây dựng Ứng dụng Trang đơn lớn và phức tạp bằng Angular, bạn sẽ sớm kết thúc với hàng trăm và hàng ngàn lớp thành phần. Như đã nói, bạn sẽ có số lượng dịch vụ Angular tương tự được tiêm. vấn đề ở đây là gì?

Cho dù bạn đã tuân theo quy ước đặt tên tốt như thế nào để xây dựng các thành phần và dịch vụ, sẽ cần có thời gian để tìm ra tên dịch vụ cụ thể cho lớp cụ thể. Ngoài ra, bạn có thể kết thúc việc viết lớp dịch vụ trùng lặp với tên hơi khác cho cùng một thành phần so với nhóm khác được xây dựng. Nếu bạn đang làm việc trong mô hình Lập trình cực đoan, các nhà phát triển lối vào của bạn có nghĩa vụ phải tiếp tục chuyển đổi giữa các mô-đun / thành phần / tính năng. Không cần mất nhiều thời gian để họ tìm ra các thành phần và dịch vụ liên quan.

Dung dịch

Chúng tôi có thể giải quyết vấn đề này bằng cách sử dụng mẫu thiết kế Facade.

Mẫu thiết kế mặt tiền

Facade thảo luận về việc đóng gói một hệ thống con phức tạp trong một đối tượng giao diện duy nhất. Điều này làm giảm đường cong học tập cần thiết để tận dụng thành công hệ thống con. Nó cũng thúc đẩy việc tách rời hệ thống con từ nhiều khách hàng tiềm năng của nó.

Đối tượng Facade nên là một người ủng hộ hoặc người hỗ trợ khá đơn giản. Nó không nên trở thành một đối tượng biết nhiều về thần tiên hay một vị thần.

Dưới đây là chi tiết đọc cho mẫu thiết kế Mặt tiền chi tiết

Mẫu thiết kế mặt tiền

Mặt tiền trong hành động với Angular Services

Tôi muốn giới thiệu các bước sau để xây dựng các dịch vụ Angular bằng mẫu Facade:

Xác định tất cả các dịch vụ Angular của bạn theo yêu cầu kinh doanh của bạn và / hoặc tiếp tục bổ sung thêm khi cần thiết.

Tạo một dịch vụ có tên là Fac FacService Dịch vụ (vui lòng sử dụng bất kỳ tên nào khác tại đây)

Tạo một NgModule được chia sẻ và cung cấp tất cả các dịch vụ Angular

Dịch vụ mặt tiền

Thảo luận chính của chúng tôi sẽ chỉ xoay quanh dịch vụ của Fac FacSService.

Chúng tôi đã thảo luận về hai cách tiếp cận dịch vụ khổng lồ so với dịch vụ vi mô. Chúng tôi đã thấy những ưu và nhược điểm của họ. Giải pháp tốt nhất là hợp nhất cả hai để tạo ra dịch vụ Mặt tiền. Bây giờ, lớp FacadeService sẽ là một lớp Thần nhưng won có chức năng thực sự nhưng là một trình bao bọc cho các dịch vụ thực tế.

FacadeService sẽ tổng hợp tất cả các dịch vụ Angular trong hệ thống nói trên. Một cách tiếp cận dễ dàng là tiêm tất cả các dịch vụ bên trong FacadeService vào hàm tạo. Nhưng nếu chúng ta làm như vậy, chúng ta sẽ gặp vấn đề tương tự như lớp dịch vụ khổng lồ.

Cách thông minh hơn sẽ là tổng hợp tất cả các dịch vụ Angular bên trong FacadeService và giải quyết các trường hợp của chúng từ Angular DI bên trong quyền truy cập của bất động sản.

Hãy cùng thảo luận về việc sử dụng AccountService.

Chúng tôi có một thuộc tính được xác định gọi là accountService bên trong FacadeService. Các hàm getOrderList () và getAddress () của FacadeService hoạt động như các hàm bao cho các phương thức thực sự của accountService.

Bất cứ khi nào thành viên accountService được truy cập, khối thuộc tính get của nó sẽ được thực thi. Bên trong khối get, chúng tôi kiểm tra xem trường sao lưu _accountService có được khởi tạo không. Nếu không, chúng tôi yêu cầu Vòi phụ thuộc góc để giải quyết một trường hợp cho chúng tôi.

Để truy cập công cụ Angular DI, chúng ta cần tiêm dịch vụ tích hợp Inejctor Angular, bên trong hàm tạo FacadeService. Kim phun.get () sẽ truy vấn công cụ Angular Sắp DI để giải quyết trường hợp dịch vụ được yêu cầu nếu nó được cung cấp. (Hãy nhớ SharedModule nơi chúng tôi đã cung cấp tất cả các dịch vụ?)

Nếu bạn đã quan sát cẩn thận, chúng tôi đã triển khai mẫu thiết kế Singleton cũng như bên trong phần lấy thuộc tính của thuộc tính accountService.

Sử dụng FacadeService bên trong (các) thành phần

Chúng tôi có AccountService được tổng hợp bên trong FacadeService và nó đã sẵn sàng để được sử dụng trong OrderComponent và addressComponent.

Hoàn thiện hệ thống còn lại

Trên lưu ý tương tự về triển khai accountService, bạn có thể hoàn thành việc triển khai các dịch vụ Angular khác bên trong FacadeService.

Triển khai mẫu thiết kế Mặt tiền trong Dịch vụ Angular

Bản thử trực tiếp:

Kho lưu trữ GitHub:

Tóm lược

Mẫu thiết kế mặt tiền giúp chúng tôi xây dựng ứng dụng Angular phức tạp bằng cách cung cấp quyền truy cập đơn giản vào nhiều dịch vụ vi mô Angular phức tạp.

Chúc mừng!