EcmaScript Modüler Programlama

Modül Tanımlamada Temeller

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="module" src="index.js"></script>
</head>
<body>
</body>
</html>

Modül Tanımlama ve Dışa Aktarma

const formattedDateTime = () => {
return new Date().toJSON().slice(0,10) + " " + new Date(new Date()).toString().split(' ')[4];
}
export { formattedDateTime };
export const formattedDateTime = () => {
//..
}

Modül Yükleme

import { formattedDateTime } from './date/getDateTimeString.js';
console.log( formattedDateTime() );
document.querySelector('body').innerHTML = `<h1>${formattedDateTime()}</h1>`;
import * as getDateTimeString from './date/getDateTimeString.js';
getDateTimeString.formattedDateTime()
import './date/getDateTimeString.js';
import formattedDateTime './date/getDateTimeString.js';
export formattedDateTime;

Çoklu Modül Metotları ve Değişkenleri İçe Aktarma

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="module" src="index.js"></script>
</head>
<body>
</body>
</html>
// 1-100 arası rastgele sayı üret
const randomNumber = (maxNumber) => {
return Math.floor(Math.random() * maxNumber) + 1;
}
// Artan sıralama
const arrayASC = (array) => {
return array.sort( (a, b) => {
return a - b;
});
}
// Azalan sıralama
const arrayDESC = (array) => {
return array.sort( (a, b) => {
return b - a;
});
}
export { randomNumber, arrayASC, arrayDESC };
import { randomNumber, arrayASC, arrayDESC }
from './modules/arraySort.js';
const random10Numbers = [];for (let i = 0; i <= 10; i++) {
random10Numbers.push(randomNumber(100));
}
console.log("Rastgele sayılar :", random10Numbers );
console.log("Artan sayılar :", arrayASC(random10Numbers) );
console.log("Azalan sayılar :", arrayDESC(random10Numbers) );

Toplu İçe Aktarma

import * as arraySort from './modules/arraySort.js';const random10Numbers = [];for (let i = 0; i <= 10; i++) {
random10Numbers.push(arraySort.randomNumber(100));
}
console.log("Rastgele sayılar:",random10Numbers );
console.log("Artan sayılar:", arraySort.arrayASC(random10Numbers));
console.log("Azalan sayılar:", arraySort.arrayDESC(random10Numbers));

Varsayılan Metod

const sampleNumber = 5;const init = () => {
console.log("Faktöryel hesaplama modül başlatıldı");
console.log("Örnek hesaplama: calculateFactorial (5) gibidir");
}
const calculateFactorial = number => {
if (number === 0 || number === 1)
return 1;
for (let i = number - 1; i >= 1; i--) {
number *= i;
}
return number;
}
const factorialExample = calculateFactorial(sampleNumber);export { calculateFactorial, factorialExample, sampleNumber };
export default init;
export default init = () => { ... }
import init, { calculateFactorial, factorialExample } from './modules/factorial.js';

init();

console.log("Örnek hesap (5!): ", factorialExample);
console.log("10! çözümü: ", calculateFactorial(10));

İçe Aktarılan Metotları Yeniden Adlandırma

import init, { 
calculateFactorial as faktoryelHesapla,
factorialExample as faktoryelOrnegi
} from './modules/factorial.js';

init();

console.log("Örnek hesap (5!): ", faktoryelOrnegi);
console.log("10! çözümü: ", faktoryelHesapla(10));

Dinamik Modül Yükleme (layz-load)

Dinamik Modül Yükleme (then(), await)

const factorial_module = './modules/factorial.js';

import(factorial_module)
.then((module) => {

console.log("Modül yüklendi...");

module.default();

console.log(module.factorialExample);

console.log("10! çözümü: ", module.calculateFactorial(10));

}).catch(error => {
console.log("Hata: ", error);
});
const module = await import("./modules/factorial.js");

HTML Sayfalarında Gömülü Olarak Modül Yükleme

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
const factorial_module = './modules/factorial.js';
import(factorial_module)
.then((module) => {
document.write("<p>Modül yüklendi...</p>");
module.default();
document.write(`<p>${module.factorialExample}`);
document.write(`<p>10! çözümü: ${module.calculateFactorial(10)}</p>`);
}).catch(error => {
console.log("Hata: ", error);
});
</script>
</head>
<body>
</body>
</html>

--

--

Full-stack Developer [ UI / UX | JAM Stack | ME(A,R,V)N | LAMP ], Author, Pro Gamer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store