Pelaksanaan Penghalaan Bersekutu
Laksanakan penghalaan yang membolehkan setiap Bahagian Hadapan Mikro mengurus laluannya sendiri dan disepadukan ke dalam penghala global.
Pelaksanaan Penghalaan Bersekutu ialah pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation merangkumi sejumlah 4 pelajaran.
Apakah Penghalaan Bersekutu?
Dalam seni bina Micro Frontend (MFE), penghalaan bersekutu bermaksud setiap MFE bertanggungjawab mengurus laluan khususnya sendiri. Daripada satu aplikasi pusat yang menentukan semua laluan, setiap MFE mengisytiharkan laluannya sendiri.
Pendekatan ini memberikan lebih autonomi kepada pasukan, membolehkan mereka membangunkan dan menggunakan logik penghalaan secara bebas tanpa gandingan rapat dengan sistem penghalaan aplikasi hos utama.
Manfaat Laluan Bersekutu
Penghalaan bersekutu menawarkan beberapa kelebihan utama:
- Autonomi: Pasukan MFE mengawal navigasi mereka sendiri.
- Penggunaan Bebas: Perubahan pada laluan MFE tidak memerlukan penggunaan semula keseluruhan aplikasi hos.
- Kebolehskalaan: Logik penghalaan lebih mudah diurus apabila bilangan MFE bertambah.
- Tidak Bergantung pada Teknologi: MFE yang berbeza boleh menggunakan pustaka penghalaan yang berbeza.
Prinsip Teras: Pemilikan Laluan
Idea asas di sebalik penghalaan bersekutu ialah setiap Micro Frontend menerbitkan set laluannya sendiri. Anggaplah ia sebagai aplikasi kecil dalam sistem yang lebih besar, yang bertanggungjawab terhadap struktur navigasi dalamannya.
Aplikasi hos kemudiannya bertindak sebagai pengagregat, menemui dan mengintegrasikan laluan milik MFE ini ke dalam pengalaman penghalaan tunggal yang padu untuk pengguna.
MFE Menentukan Laluan Tempatan
Beginilah cara Micro Frontend (kita namakannya "MFE A") mungkin menentukan laluan dalamannya. Ini ialah laluan khusus yang bertanggungjawab untuk dipaparkan oleh MFE A.
Kita menggunakan struktur tatasusunan ringkas untuk mewakili laluan, dengan setiap laluan mempunyai path serta komponen atau paparan yang perlu dipaparkannya.
// mfe-a-routes.js
// This MFE owns routes starting with '/app-a'
export const mfeARoutes = [
{
path: '/app-a',
component: 'MFE_A_Dashboard'
},
{
path: '/app-a/profile',
component: 'MFE_A_UserProfile'
}
];Laluan MFE yang Lain
Begitu juga, Micro Frontend lain ("MFE B") akan menentukan set laluannya sendiri. Perhatikan bahawa laluannya berbeza dan sering mempunyai awalan untuk mengelakkan konflik serta memastikan pemilikan yang jelas.
Pemisahan ini membolehkan MFE A dan MFE B mengembangkan navigasi masing-masing secara bebas.
// mfe-b-routes.js
// This MFE owns routes starting with '/app-b'
export const mfeBRoutes = [
{
path: '/app-b',
component: 'MFE_B_HomePage'
},
{
path: '/app-b/settings',
component: 'MFE_B_SettingsPage'
}
];Hos Mengagregatkan Laluan MFE
Peranan aplikasi hos adalah untuk bertindak sebagai penyelaras pusat. Aplikasi ini perlu menemui dan mengimport definisi laluan yang disediakan oleh setiap Micro Frontend.
Dengan menggunakan Module Federation, definisi laluan ini boleh didedahkan oleh MFE jauh dan digunakan oleh hos, sekali gus membina peta laluan global daripada sumber yang diedarkan.
Mengintegrasikan ke dalam Penghala Global
Aplikasi hos kemudiannya mengambil semua laluan yang diagregatkan dan mengintegrasikannya ke dalam tika penghala globalnya sendiri. Contoh ini mensimulasikan cara aplikasi hos mungkin memuatkan dan memproses laluan daripada MFE yang berbeza untuk mengendalikan navigasi.
Cuba ubah pemboleh ubah currentPath dalam kod dan jalankannya!
// mfe-a-routes.js (Simulated Remote MFE)
export const mfeARoutes = [
{ path: '/app-a', component: 'MFE_A_Dashboard' },
{ path: '/app-a/profile', component: 'MFE_A_UserProfile' }
];
// mfe-b-routes.js (Simulated Remote MFE)
export const mfeBRoutes = [
{ path: '/app-b', component: 'MFE_B_HomePage' },
{ path: '/app-b/settings', component: 'MFE_B_SettingsPage' }
];
// host-app.js (Main Application Entry Point)
// In a real app, these would be dynamically imported
// via Module Federation.
const allFederatedRoutes = [
...mfeARoutes,
...mfeBRoutes
];
function globalRouter(currentPath) {
console.log(`Attempting to navigate to: ${currentPath}`);
const matchedRoute = allFederatedRoutes.find(
route => route.path === currentPath
);
if (matchedRoute) {
console.log(`Match found! Rendering: ${matchedRoute.component}`);
} else {
console.log(`No route found for: ${currentPath}. Showing 404.`);
}
}
// Simulate user navigation
console.log("--- Global Routing Simulation ---");
globalRouter('/app-a');
globalRouter('/app-b/settings');
globalRouter('/app-a/profile');
globalRouter('/unknown-path');
globalRouter('/app-b');Navigasi Rentas MFE yang Lancar
Setelah penghala global hos mengintegrasikan semua laluan bersekutu, navigasi antara Micro Frontend yang berbeza menjadi lancar. Dari sudut pandangan pengguna, ia kelihatan seperti satu aplikasi yang tunggal dan seragam.
Apabila pengguna mengklik pautan ke /app-b/settings, penghala global mengenal pasti bahawa laluan ini kepunyaan MFE B lalu mewakilkan pemaparan atau pengaktifan MFE B kepadanya.
Mengelakkan Konflik Laluan
Dengan berbilang MFE yang menentukan laluan, konflik boleh berlaku jika dua MFE menentukan laluan yang sama (contohnya, kedua-duanya mempunyai laluan /dashboard).
Strategi umum untuk mencegah perkara ini termasuk:
- Penskopaan Nama: Menambah awalan pada laluan MFE (contohnya,
/mfea/dashboard,/mfeb/dashboard). - Laluan Unik: Memastikan laluan setiap MFE sememangnya unik.
- Pengesampingan Hos: Membenarkan hos mengutamakan atau memetakan semula laluan yang bercanggah.
Semak Pemahaman Anda
Bayangkan anda mempunyai aplikasi hos yang mengintegrasikan laluan daripada dua Micro Frontend, MFE-A dan MFE-B. MFE-A menentukan /products dan /products/:id. MFE-B menentukan /cart dan /checkout.
Antara berikut, yang manakah paling tepat menerangkan peranan aplikasi hos dalam persediaan penghalaan bersekutu ini?
Ulang Kaji: Penghalaan Bersekutu
Anda telah mempelajari tentang penghalaan bersekutu, iaitu setiap Micro Frontend memiliki dan menentukan laluannya sendiri. Kita melihat cara aplikasi hos mengagregatkan laluan ini untuk menghasilkan pengalaman navigasi yang seragam.
- Setiap MFE mengisytiharkan laluannya sendiri.
- Aplikasi hos mengumpulkan dan mengintegrasikan laluan MFE.
- Memastikan autonomi MFE dan penggunaan secara bebas.
- Penskopaan nama membantu mencegah konflik.
Pendekatan ini penting untuk sistem MFE berskala besar kerana mengimbangi kebebasan dengan pengalaman pengguna yang konsisten.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Soalan Lazim
Adakah pelajaran “Pelaksanaan Penghalaan Bersekutu” percuma?
Ya — teks penuh “Pelaksanaan Penghalaan Bersekutu” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation, tingkat taraf kepada CoddyKit PRO. Kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pelaksanaan Penghalaan Bersekutu”?
Laksanakan penghalaan yang membolehkan setiap Bahagian Hadapan Mikro mengurus laluannya sendiri dan disepadukan ke dalam penghala global. Anda berlatih Seni Bina Mikrobahagian Hadapan dengan Module Federation menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Seni Bina Mikrobahagian Hadapan dengan Module Federation?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Pelaksanaan Penghalaan Bersekutu” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation ini?
Ya. Setiap pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Strategi Penghalaan Berpusat
- Pelaksanaan Penghalaan Bersekutu
- Pautan Dalam dan Pengurusan URL
- Mengendalikan Navigasi Bersarang dan Merentas Aplikasi