Концепция внедрения зависимостей

Цель. В этой статье вы познакомитесь с концепцией внедрения зависимостей.

Необходимые условия Перед тем, как приступить к выполнению этой статьи, вы уже должны были установить все необходимые инструменты, включая: Visual Studio Code, Node Package Manager (NPM), Node.

Добавьте файл app.ts в любую папку

Просто собираюсь создать очень простое приложение

Создайте класс экспорта MainPage, затем мы просто создадим новый экземпляр MainPage.

export class MainPage {
}
var page = new MainPage();

2. Теперь хотим создать конструктор. А в этом конструкторе мы собираемся просто получить список элементов.

export class MainPage {
    constructor(){
        var items = ['Apple', 'Mango', 'Miew'];
        console.log('[Item shows]'  + items );
    }
}
var page = new MainPage();

3. Откройте это в нашей командной строке и просто запустите компилятор TypeScript, используя app.ts.

tsc app.ts

Затем создайте в этой папке файл app.js.

4. Запустите это как приложение узла, поэтому узел app.js.

node app.js

Тогда показ выглядит так. Выход: [Элемент показывает] Apple, Mango, Miew

5. Создайте класс ItemService

export class ItemService {
    public getItems(): string[]{
        return ['Apple', 'Mango', 'Miew']
    }
}

6. обновить класс MainPage

export class MainPage {
    public items: string[];
    constructor(private _itemService: ItemService){
        this.items = _itemService.getItems();;
        console.log('[Item shows]'  + this.items );
    }
}

7. TypeScript скомпилируйте это снова

tsc app.ts

8. Запустите приложение еще раз

node app.js

Функциональных изменений в приложении нет, но мы изменили структуру приложения.

Теперь мы хотим создать собственный класс logger. Мы можем войти, экспортировать класс logger, и здесь мы просто создадим метод с именем log message.

Мы знаем, что нам нужен наш заголовок, и нам нужно наше сообщение

9. Создайте класс Logger

export class Logger {
    public logMessage(title: string, message: any){
        console.log('[' + title + ']' + message);
    }
}

10. Обновите класс главной страницы

export class MainPage {
    public items: string[];
    constructor(private _logger : Logger, private _itemService: ItemService){
        this.items = _itemService.getItems();;
        _logger.logMessage('Items shows ', this.items)
        // console.log('[Item shows] '  + this.items );
    }
}

11. TypeScript, скомпилируйте еще раз. Запустите приложение снова

tsc app.ts then node app.js

Таким образом, мы не изменили функциональное приложение, мы просто реструктурировали его, чтобы было немного легче понять, каковы наши зависимости.

Мы разделили все на блоки для работы. Немного упростите управление этим приложением, но мы все же можем пойти еще дальше.

12. Мы можем приступить к реализации интерфейсов, поэтому здесь мы можем сказать, что реализует интерфейс ILogger

export interface ILogger {
    logMessage(title: string, message: any);
}

Также обновите класс Logger

export class Logger implements ILogger {
    public logMessage(title: string, message: any){
        console.log('[' + title + ']' + message);
    }
}

13. Также мы можем приступить к реализации интерфейсов, поэтому мы можем сказать, что реализует здесь интерфейс IItemService

export interface IItemService {
    getItems(): string[]
}

Также обновите класс ItemService

export class ItemService implements IItemService{
    public getItems(): string[]{
        return ['Apple', 'Mango', 'Miew']
    }
}

14. Также обновите класс MainPage

export class MainPage {
    public items: string[];
    constructor(private _logger : ILogger, private _itemService: IItemService){
        this.items = _itemService.getItems();;
        _logger.logMessage('Items shows ', this.items)
        // console.log('[Item shows] '  + this.items );
    }
}

Итак, теперь мы не зависим напрямую от этих реализаций или службы элементов журнала, мы зависим только от всего, что реализует интерфейс.

15. Итак, снова tsc app.ts, node app.js

tsc app.ts then node app.js

Функционал до сих пор не изменился.

Так что, если я хочу создать новый сервис элементов, то Apple Mango Miew, я могу сказать, альтернативный сервис элементов.

16. Нам не нужно менять класс MainPage. Нам не нужно менять интерфейс. Единственная разница здесь в том, что мы передаем сервис alt item

export class AltItemService implements IItemService{
    public getItems(): string[]{
        return ['Panda', 'Fox', 'Dog']
    }
}
var page = new MainPage( new Logger(), new AltItemService());

Итак, снова tsc app.ts, node app.js

tsc app.ts then node app.js

И мы видим, что теперь мы использовали новый сервис элементов без изменения нашего приложения на главной странице. Таким образом, используя внедрение зависимостей, мы можем сделать нашу структуру приложения намного более сложной, намного более простой в использовании для разработчиков, которые могут понимать различные компоненты нашего приложения.

Концепция внедрения зависимостей

Концепция внедрения зависимостей

Похожие вопросы