Aurelia 对 JavaScript 框架的全新诠释

最近，有关 JavaScript 框架的对话主要由 React（技术上是一个库）、Next.js、Svelte、Angular 等流行名称主导。

这些都是很棒的工具，但是您听说过 Aurelia 2 吗？
当我第一次遇到 Aurelia 时，我的反应是：“那是什么？”但经过两年的使用，我现在相信它即使不是最好的框架，也是最好的框架之一。

为什么我会这么想？

让我解释一下。我从 React.js 过渡到 Aurelia，最初，我认为它只是另一个 JavaScript 框架。然而，随着我深入研究，我开始意识到它真正的潜力和力量。

本文将介绍 Aurelia 2，我将在其中展示其一些强大的概念以及它为何脱颖而出。

1。事件聚合器

首先是事件聚合器，如果您在 C# 生态系统中工作过，您可能会熟悉这个概念，但它在 Aurelia 中的工作原理如下：

事件聚合器的功能类似于 C# 中常用的基于事件的消息传递模式。它是一个发布/订阅系统，允许您在 Aurelia 应用程序中发布和订阅自定义事件。

这有助于应用程序不同部分之间的解耦通信。就像在 C# 中一样，事件聚合器或中介器用于简化事件处理，框架本身利用 Aurelia 的事件聚合器在应用程序生命周期的各个阶段和特定操作期间发布事件。

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.publish('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 系统，可以简化连接应用程序不同部分的过程。借助 Aurelia 的 DI，管理和注入依赖关系变得无缝，从而产生更干净、更易于维护的代码。

此外，这种方法使测试驱动开发 (TDD) 变得更容易，因为它允许直接模拟和测试各个组件，而不需要复杂的设置或紧密耦合的依赖项。

3。动态构图

Aurelia 的元素可以动态组合视图和视图模型。它的作用类似于自定义元素，但不需要特定的标签名称，从而允许灵活且可重用的 UI 组件。
在与 一起使用的视图模型内，您可以访问 Aurelia 的所有标准生命周期事件，以及可用于初始化或将参数传递给视图模型的附加 activate 方法。

在实践中使用 元素：

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

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

工作原理：

• 动态组合：component.bind 属性动态绑定 DynamicComponent 作为视图模型。

• 传递参数：model.bind 属性将参数传递给动态组合视图模型中的 activate 方法。

关注点分离

我喜欢 Aurelia 2 的原因之一是它通过 MVVM（模型-视图-视图模型）模式实现了清晰的关注点分离。

View：UI结构与逻辑完全解耦。它只是绑定到 ViewModel 来显示数据并捕获用户交互。

ViewModel：这是所有逻辑发生的地方。它控制数据、处理业务规则并更新视图，而无需担心它如何显示。

模型：Aurelia 将核心应用程序数据与 View 和 ViewModel 分开，保持清晰度和焦点。

这种分离使应用程序高度模块化，更易于维护，并且更易于测试，从而允许更灵活、可扩展的代码。

结论

在这篇文章中，我只重点介绍了 Aurelia 2 中的三个强大概念——事件聚合器、依赖注入和动态组合——但这只是该框架所提供功能的一小部分。

Aurelia 2 包含有助于构建干净、可扩展且可维护的应用程序的功能。

为了全面了解并深入了解其功能，我强烈建议您探索 Aurelia 2 文档以获得更全面的理解。

PS：这是我的第一篇文章，希望你喜欢它！

以上是Aurelia 对 JavaScript 框架的全新诠释的详细内容。更多信息请关注PHP中文网其他相关文章！