Aurelia Pandangan Baru tentang Rangka Kerja JavaScript

Kebelakangan ini, perbualan tentang rangka kerja JavaScript telah dikuasai oleh nama popular seperti React (secara teknikalnya perpustakaan), Next.js, Svelte, Angular dan banyak lagi.

Ini semua alat yang hebat, tetapi pernahkah anda mendengar tentang Aurelia 2?
Apabila saya mula-mula terserempak dengan Aurelia, reaksi saya ialah, "Apa itu?" Tetapi selepas 2 tahun bekerja dengannya, saya kini percaya ia adalah salah satu rangka kerja terbaik di luar sana, jika bukan yang terbaik.

Kenapa saya rasa begitu?

Biar saya jelaskan. Saya beralih kepada Aurelia daripada React.js, dan pada mulanya, saya menganggap ia hanyalah satu lagi rangka kerja JavaScript. Walau bagaimanapun, apabila saya menyelidiki lebih mendalam, saya mula menyedari potensi dan kekuatannya yang sebenar.

Artikel ini akan menjadi pengenalan kepada Aurelia 2, di mana saya akan mempamerkan beberapa konsepnya yang hebat dan sebab ia menonjol.

1. Pengagregat Acara

Pertama sekali ialah Pengagregat Acara, konsep yang mungkin anda kenali jika anda pernah bekerja dalam ekosistem C#, tetapi berikut ialah cara ia berfungsi di Aurelia:

Agregator Acara berfungsi sama dengan corak pemesejan berasaskan acara yang biasa digunakan dalam C#. Ia adalah sistem pub/sub yang membolehkan anda menerbitkan dan melanggan acara tersuai dalam aplikasi Aurelia anda.

Ini memudahkan komunikasi yang dipisahkan antara bahagian berlainan apl anda. Sama seperti dalam C#, di mana pengagregat peristiwa atau pengantara digunakan untuk menyelaraskan pengendalian acara, Pengagregat Acara Aurelia dimanfaatkan oleh rangka kerja itu sendiri untuk menerbitkan acara pada pelbagai peringkat kitaran hayat aplikasi dan semasa tindakan tertentu.

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
        });
    }
 }

Dengan ini, kami boleh melaksanakan seni bina dipacu peristiwa dengan mudah, menangani dan menyelesaikan masalah gandingan yang sering dihadapi dengan React dan rangka kerja yang serupa.

2. Suntikan Ketergantungan

Dependency Injection (DI) ialah corak reka bentuk yang memudahkan penciptaan objek dengan kebergantungan yang diperlukan, tanpa objek itu sendiri bertanggungjawab untuk mencipta kebergantungan tersebut. Ini menggalakkan gandingan longgar antara kelas dan kebergantungan mereka, meningkatkan modulariti dan kebolehujian.

Aurelia menawarkan sistem DI yang berkuasa dan fleksibel yang memudahkan proses pendawaian bahagian berlainan aplikasi anda. Dengan DI Aurelia, mengurus dan menyuntik kebergantungan menjadi lancar, menghasilkan kod yang lebih bersih dan boleh diselenggara.

Selain itu, pendekatan ini menjadikan Pembangunan Dipacu Ujian (TDD) lebih mudah, kerana ia membolehkan mengejek dan menguji komponen individu secara langsung tanpa memerlukan persediaan yang rumit atau kebergantungan yang digandingkan dengan ketat.

3. Komposisi Dinamik

Elemen Aurelia membolehkan komposisi dinamik pandangan dan model paparan. Ia bertindak seperti elemen tersuai tetapi tanpa memerlukan nama teg tertentu, membenarkan komponen UI yang fleksibel dan boleh digunakan semula.
Di dalam model paparan yang digunakan dengan , anda mempunyai akses kepada semua peristiwa kitaran hayat standard Aurelia, bersama-sama dengan kaedah pengaktifan tambahan yang boleh digunakan untuk memulakan atau menghantar parameter kepada model paparan.

Menggunakan elemen dalam amalan:

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

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

Cara Ia Berfungsi:

• Komposisi Dinamik: Atribut component.bind secara dinamik mengikat DynamicComponent sebagai model paparan.

• Melalui Parameter: Atribut model.bind menghantar parameter kepada kaedah aktifkan dalam model paparan yang digubah secara dinamik.

Pemisahan Kebimbangan

Salah satu sebab saya suka Aurelia 2 ialah Pemisahan Kebimbangan yang bersih melalui corak MVVM (Model-View-ViewModel).

Paparan: Struktur UI dipisahkan sepenuhnya daripada logik. Ia hanya terikat pada ViewModel untuk memaparkan data dan menangkap interaksi pengguna.

ViewModel: Di sinilah semua logik berlaku. Ia mengawal data, mengendalikan peraturan perniagaan dan mengemas kini View, tanpa perlu risau tentang cara ia dipaparkan.

Model: Aurelia memastikan data aplikasi teras berasingan daripada View dan ViewModel, mengekalkan kejelasan dan fokus.

Pemisahan ini menjadikan aplikasi sangat modular, lebih mudah diselenggara dan lebih mudah untuk diuji, membolehkan kod yang lebih fleksibel dan berskala.

Kesimpulan

Dalam siaran ini, saya hanya memfokuskan pada tiga konsep berkuasa daripada Aurelia 2—Pengagregat Peristiwa, Suntikan Ketergantungan dan Komposisi Dinamik—tetapi ini hanyalah sebahagian kecil daripada apa yang ditawarkan oleh rangka kerja itu.

Aurelia 2 padat dengan ciri yang membantu membina aplikasi yang bersih, berskala dan boleh diselenggara.

Untuk mendapatkan gambaran penuh dan menyelami lebih mendalam keupayaannya, saya amat menggalakkan anda untuk menerokai dokumentasi Aurelia 2 untuk pemahaman yang lebih komprehensif.

PS: Ini adalah siaran pertama saya, dan saya harap anda menyukainya!

Atas ialah kandungan terperinci Aurelia Pandangan Baru tentang Rangka Kerja JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!