Jinsi ya Kutumia ES6 Modules kwa Organized JS Code
ES6 Modules hukuwezesha kugawanya JavaScript code kwenye files tofauti, kufanya code iwe readable, reusable na maintainable. Hii ni muhimu kwa projects kubwa.
✅ A. HTML Setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6 Modules Demo</title>
</head>
<body>
<h1>Faulink ES6 Modules Example</h1>
<script type="module" src="main.js"></script>
</body>
</html>
✅ B. Create JS Module
file: mathUtils.js
// Named export
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
✅ C. Import Module in Main JS
file: main.js
import { add, multiply } from './mathUtils.js';
const sum = add(5, 10);
const product = multiply(5, 10);
console.log('Sum:', sum); // 15
console.log('Product:', product); // 50
✅ D. Default Export Example
file: greet.js
export default function greet(name) {
return `Hello, ${name}!`;
}
file: main.js (continue)
import greet from './greet.js';
console.log(greet('Faulink')); // Hello, Faulink!
✅ Jinsi Inavyofanya Kazi
export → inatoa function, variable au class kutoka module
import → inachukua code kutoka module nyingine
type="module" → inaruhusu ES6 imports kwenye HTML
Code inakuwa organized, reusable na easy to maintain
🔗 Links Za Kujifunza Zaidi
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 WhatsApp Msaada:
https://wa.me/255693118509