]

в последнее время в разговорах о рамках JavaScript доминировали популярные имена, такие как React (технически библиотека), Next.js, Svelte, Angular и многое другое.

]

это все отличные инструменты, но вы слышали о Aurelia 2?
] Когда я впервые наткнулся на Аурелию, моя реакция была: «Что это?» Но после 2 лет работы с этим я теперь считаю, что это одна из лучших рамок, если не лучшая.

]

] почему я так думаю?

]

позвольте мне объяснить. Я перешел в Aurelia из React.js, и изначально я предположил, что это была просто еще одна структура JavaScript. Однако, когда я углубился глубже, я начал осознавать его истинный потенциал и силу.

]

Эта статья послужит введением в Aurelia 2, где я продемонстрирую некоторые из ее мощных концепций и почему она выделяется.

]

1. Агрегатор событий

сначала - это агрегатор событий, концепция, с которой вы можете быть знакомы, если вы работали в экосистеме C, но вот как это работает в Aurelia:

]

] Агрегатор событий функционирует аналогично моделям обмена сообщениями на основе событий, обычно используемых в C#. Это паб/суб -система, которая позволяет вам публиковать и подписаться на пользовательские события в ваших приложениях Aurelia.

]

Это облегчает отдельное общение между различными частями вашего приложения. Как и в C#, где агрегаторы событий или посредники используются для оптимизации обработки событий, агрегатор событий Aurelia используется самой структурой для публикации событий на различных этапах жизненного цикла приложения и во время конкретных действий.

]
]

import {ieventaggregator, Resolve} от 'aurelia'; Экспортный класс FirstComponent { readonly ea: ieventaggregator = Resolve (ieventaggreator); граница() { this.ea.publish ('ea_channel', «полезная нагрузка») } }

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.publish('ea_channel', ‘PAYLOAD’)
    }
 }

import {ieventaggregator, Resolve} от 'aurelia'; Экспортный класс SecondComponent { readonly ea: ieventaggregator = Resolve (ieventaggreator); граница() { this.ea.subscribe ('ea_channel', payload => { // делать вещи внутри этого обратного вызова }); } }

import { IEventAggregator, resolve } from 'aurelia';

export class SecondComponent {

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.subscribe('ea_channel', payload => {
            // Do stuff inside of this callback
        });
    }
 }

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

]

2. Инъекция зависимости

Инъекция зависимости (DI) - это шаблон проектирования, который облегчает создание объектов с их необходимыми зависимостями, без самих объектов несут ответственность за создание этих зависимостей. Это способствует свободной связи между классами и их зависимостями, улучшая модульность и тестируемость.

]

Aurelia предлагает мощную и гибкую систему DI, которая упрощает процесс подключения различных частей вашего приложения. С DI Aurelia управление и инъекцию зависимостей становится плавным, что приводит к более чистому, более обслуживаемому коду.

]

Кроме того, этот подход облегчает разработку тестирования (TDD), поскольку он позволяет простым насмешкам и тестированию отдельных компонентов без необходимости сложной настройки или тесно связанных зависимостей.

3. Динамическая композиция

Элемент Aurelia позволяет динамическому составу представлений и моделей представления. Он действует как пользовательский элемент, но не требует определенного имени тега, позволяя гибко и многоразовый пользовательский компонент.

] Внутри модели представления, используемой, у вас есть доступ ко всем стандартным событиям жизненного цикла Aurelia, а также дополнительный метод активации, который можно использовать для инициализации или передачи параметров в модель представления.

использование

на практике: ]
]

Основное приложение

шаблон>

import { IEventAggregator, resolve } from 'aurelia';

export class SecondComponent {

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.subscribe('ea_channel', payload => {
            // Do stuff inside of this callback
        });
    }
 }

Как это работает:

]

• Dynamic Composition : атрибут component.bind Динамически связывает динамиккомпонент как модель представления.

• прохождение параметров : атрибут модели. ]

разделение проблем

] Одной из причин, по которой я люблю Aurelia 2, является ее чистое разделение проблем с помощью шаблона MVVM (Model-ViewModel). ]

view

: Структура пользовательского интерфейса полностью отделена из логики. Он просто связывается с ViewModel для отображения данных и захвата взаимодействий пользователей.

] viewmodel

: это где происходит вся логика. Он управляет данными, обрабатывает бизнес -правила и обновляет представление, не беспокоясь о том, как они отображаются.

] model

: Aurelia сохраняет основные данные приложения отдельными как от View, так и от ViewModel, поддерживая ясность и фокусировку.

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

Заключение

в этом посте я сосредоточился только на трех мощных концепциях из Aurelia 2 - агрегатор, инъекции зависимости и динамической композиции - но это лишь небольшая часть того, что может предложить структура. ]

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

]

, чтобы получить полную картину и глубже погрузиться в свои возможности, я настоятельно рекомендую вам исследовать документацию Aurelia 2 для более полного понимания.

]

ps: это мой первый пост, и я надеюсь, что вам понравилось!

] ]