Най-добри практики: Изграждане на ъглови услуги с помощта на фасаден дизайн на сложни системи

Ъглови услуги

Концепцията за ъглови услуги винаги обърква новаците с REST услуги от страна на сървъра. Ако все още не сте сигурни какво е, ще ви препоръчам да прочетете Angular документация

Angular Services носят отговорност за предоставяне на данни за приложения / бизнес логика на компонентите. Компонентите трябва да приемат / предоставят данни за обслужване и да функционират като лепило между изглед и услуга. Служба е тази, която може да реши дали да предостави макетни данни или да отиде на сървър и да вземе данни от база данни / файл / друга услуга (и) и т.н.

В идеалния случай услугите трябва да бъдат ориентирани към функции. Имате избор да създадете гигантски колекции от услуги или колекции от микро услуги. При първия подход има само една услуга, която съдържа цялата бизнес логика и се предоставя чрез инжектиране на ъглова зависимост във всички компоненти в системата. Проблемът с този подход е, че гигантският сервизен клас в крайна сметка ще бъде раздут, водещият проблем с производителността. Всеки компонент трябва да бъде инжектиран с обслужване и функционалност, които изобщо не са необходими на потребителския компонент. Мислите ли, че е добре?

При втория подход (следва се широко) се изгражда специфична за функцията микро услуга. Например, ако вашата система има компоненти за вход, регистрация, табло за управление, тогава ще изградите LoginService, SignUpService, DashboardService и така нататък. Всяка услуга съдържа функционалност, необходима за конкретен насочен компонент. Сега този дизайн изглежда добре, нали?

Проблем?

Докато изграждате големи и сложни приложения за една страница, използвайки Angular, скоро ще свършите със стотици и хиляди класове от компоненти. След като сте казали това, ще имате инжектиран подобен брой ъглови услуги. Какъв е проблемът тук?

Независимо от това колко добри правила за именуване сте спазвали за изграждането на компоненти и услуги, ще има време, за да се определи конкретно име на услуга за конкретен клас. Също така можете да напишете дублиран сервизен клас с малко по-различно име за същия компонент от другия екип. Ако работите в модел за екстремно програмиране, вашите разработчици на фронтални устройства трябва да продължат да превключват между модули / компоненти / функции. Не трябва да отнеме много време, за да разберат свързани компоненти и услуги.

Решение

Можем да разрешим този проблем, използвайки модел на фасаден дизайн.

Модел на фасаден дизайн

Фасада обсъжда капсулирането на сложна подсистема в рамките на един интерфейсен обект. Това намалява кривата на обучение, необходима за успешното използване на подсистемата. Той също така насърчава отделянето на подсистемата от потенциално много клиенти.

Обектът на фасадата трябва да е доста прост адвокат или фасилитатор. Тя не трябва да се превръща в всезнаещ оракул или „бог“ обект.

Ето и доброто четене за модела на фасаден дизайн в детайли

Модел на фасаден дизайн

Фасада в действие с ъгловите услуги

Бих препоръчал следните стъпки за изграждане на ъглови услуги с помощта на фасаден модел:

Определете всичките си ъглови услуги според вашите бизнес изисквания и / или продължете да добавяте повече, ако е необходимо.

Създайте услуга, наречена „FacadeService“ (не се колебайте да използвате всяко друго име тук)

Създайте споделен NgModule и предоставете всички Angular услуги

Въвеждане на фасадна услуга

Основната ни дискусия ще бъде само за услугата „FacadeService“.

Обсъдихме за два подхода гигантска услуга срещу микросервиз. Видяхме техните плюсове и минуси. Най-доброто решение е да се слеят и двете, за да се създаде услуга Фасада. Сега класът на FacadeService ще бъде богов клас, но няма да има действителна функционалност, а обвивка за реалните услуги.

FacadeService обединява всички ъглови услуги в рамките на споменатата система. Един лесен подход е да инжектирате всички услуги в FacadeService в конструктор. Но ако го направим, ще стигнем до подобен проблем като при гигантския сервизен клас.

По-интелигентният начин би бил да се обединят всички ъглови услуги вътре в FacadeService и да се разрешат техните екземпляри от Angular DI вътре в „собствеността“.

Нека обсъдим използването на AccountService.

Имаме дефинирано свойство, наречено accountService вътре в FacadeService. getOrderList () и getAddress () функциите на FacadeService работят като опаковки за действителните методи на accountService.

Всеки път, когато има достъп до accountService члена, се изпълнява неговият блок get свойство. Вътре в get block, ние проверяваме дали резервното поле _accountService е екземпляр. Ако не, ние молим Angular Dependency Injector да разреши инстанция за нас.

За да получите достъп до Angular DI двигател, трябва да поставим вградената услуга на Inejctor Angular в конструктора на FacadeService. injector.get () ще запитва DI двигателя на Angular, за да разреши заявения потребителски случай, ако е предоставен. (Спомняте ли си SharedModule, където сме предоставили всички услуги?)

Ако сте наблюдавали внимателно, ние внедрихме Singleton модел на дизайн, както и вътре, вземете раздел за собственост на accountService собственост.

Консумиране на фасадаУслуга в компонент (и)

Имаме AccountService, обобщена във FacadeService и тя е готова за консумация в OrderComponent и AddressComponent.

Довършване на останалата система

На подобна бележка за изпълнение на accountService можете да завършите внедряването на други ъглови услуги в FacadeService.

Внедряване на модел на фасаден дизайн в ъгловите услуги

Демонстрация на живо:

GitHub хранилище:

резюме

Моделът на фасаден дизайн ни помага да изградим сложно ъглово приложение, като предоставяме опростен достъп до много сложни ъглови микро услуги.

Наздраве!