JavaScript Modül Mantığı
JavaScript modülleri kodunuzu ayrı dosyalara bölmenize olanak tanır. Modüller dış dosyalardan importifadesi ile içe aktarılır. Modüller ayrıca <script> etiketiiçine type="module" yazarakta kullanılabilir.
Modüller, fonksiyonları ve değerleri dışa aktarabilen ve /veya içe aktarabilen kod bloklarıdır .
- Modüller, kodunuzu ayrı dosyalara bölmenizi sağlar .
- Modüller, modern JavaScript'in temel bir özelliğidir .
- Modülleri bir dosyaya iki şekilde aktarabilirsiniz; bunlar, modüllerin dışa aktarma veya varsayılan dışa aktarma olarak adlandırılmasına bağlıdır.
- Adlandırılmış çıkışlar (exports) süslü parantezler kullanılarak oluşturulur. Varsayılan çıkışlar ise kullanılmaz.
- Modüller , modüller arasında işlevsellik alışverişi yapmak için exportkullanılır .import
- Kullanılan bir HTML betiği type="module"modül olarak ele alınır
- Modül dosyaları bir sunucuda saklanmalıdır .
- Modüller yalnızca HTTP(s) protokolüyle çalışır .
- File:// protokolü üzerinden açılan bir web sayfası içe/dışa aktarma işlemlerini kullanamaz.
scriptA.js
export function greet(name) {
return `Hello, ${name}`;
}
export const message = "How you doing?";
return `Hello, ${name}`;
}
export const message = "How you doing?";
scriptB.js
import * as scriptA from './scriptA.js';
function Test() {
alert(scriptA.greet("Scaler"));
}
Test();
function Test() {
alert(scriptA.greet("Scaler"));
}
Test();
veya belirli fonksiyonları alabiliriz
import {greet} from './scriptA.js';
function Test() {
alert(greet("Scaler"));
}
Test();
function Test() {
alert(greet("Scaler"));
}
Test();
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<script type="module" src="scriptB.js"></script>
<body>
</body>
</html>
<html lang="en">
<head>
</head>
<script type="module" src="scriptB.js"></script>
<body>
</body>
</html>
Yukardıdaki örnekte export ile dışa aktıracak değerleri (fonksiyon, değişken..) belirtiyoruz. Import * yazarak tüm import edilen değerleri (fonksiyon, değişken..) alıyoruz. Dikkat edilmesi gereken nokta hmtl script kısmındaki module kelimesini kullanmak.
Not: Bu modules mantığının çalışması için http(s) bağlantısı şarttır, yani local bilgisayarda çalışmayacaktır.
Default Nedir?
export default message;
ifadesindeki default, bu dosyadan varsayılan (ana) olarak dışa aktarılan şeyin message fonksiyonu olduğunu belirtir.
Bir dosyada:
export default message;
dediğinde, başka bir dosya bunu istediğin isimle import edebilir.
import benimFonksiyonum from "./message.js";
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + ' years old.';
};
export default message;
console.log(benimFonksiyonum());
Örnek
js.js içeriği:
export function stilUygula() { //sayfadaki tüm inputlara uygular
const inputlar = document.querySelectorAll("input[type='text']");
/*inputlar.forEach(function (input) {
});*/
inputlar.forEach(GirisKutusu => {
/*GirisKutusu.style.border = "2px solid #333";
GirisKutusu.style.padding = "15px";
GirisKutusu.style.borderRadius = "6px";
GirisKutusu.style.outline = "none";
GirisKutusu.style.lineHeight="16px";*/
GirisKutusu.style = `
border:2px solid #333;
padding:15px;
border-radius:6px;
outline:none;
line-height:16px;
transition: all 0.3s ease;
background: #fafafa;
margin:10px;`;
GirisKutusu.addEventListener("focus", () => {
GirisKutusu.style.borderColor='#4f46e5';
GirisKutusu.style.background='#00ffff';
GirisKutusu.style.boxShadow='0 0 0 4px rgba(79, 70, 229, 0.15)';
});
GirisKutusu.addEventListener("blur", () => {
GirisKutusu.style.borderColor = "#333";
GirisKutusu.style.backgroundColor ="";
});
});
}
index.html
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<script type="module">
import * as Fonksiyonlar from "./js.js";
//import stilUygula from "./js.js";
//import {stilUygula} from "./js.js";
Fonksiyonlar.stilUygula();
</script>
Varsayılan + Adlandırılmış'ın Birleştirilmesi
Bir modül, bir ana işlevin yanı sıra bazı yardımcı işlevler de sağlayabilir:Modül Dosyası
export default function parse() { ... }
export function validate() { ... }
export function format() { ... }
Modül Betiği
import parse, { validate, format } from './parser.js';
Adlandırılmış İçe Aktarma Kuralları
import { add as addition } from './math.js';
//export default function message() {
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
Tümünü İçe Aktarma
* sözdizimini kullanarak bir modüldeki tüm adlandırılmış dışa aktarımları tek bir nesne olarak içe aktarabilirsiniz.
// Import all named exports from person.js
import * as person from "./person.js";
Örnek:
import * as math from "./math_module.js";
// Now you can use the math namespace object:
let myPi = math.PI
let result1 = math.add(2, 3));
let result2 = math.multiply(2, 3));
Asenkron Dosya Yükleme
js.js
export function topla(a, b) {
return a + b;
}
export function carp(a, b) {
return a * b;
}
//function Bol(a, b) {
const Bol=(a,b)=> {
return a/b;
};
export default Bol;
<input type="button" value="Düğme" />
<script type="module">
document.querySelectorAll("input[type='button']").forEach(Eleman => {
Eleman.addEventListener("click", async () => {
//const { topla } = await import('./js.js');
const Bol = await import('./js.js');
alert(topla(10, 20));
});
});
import Bol, {topla, carp} from "./js.js";
alert(topla(10, 20));
alert(Bol(20, 10));
</script>
Export Kullanımı
//tek export fonksiyonu varsa
import Fonksiyonlar from "./js2.js";
alert(Fonksiyonlar(10,5));
//birden fazla export edilen fonksiyon ve default varsa
import Bol, {topla,carp} from "./js2.js";
alert(Bol(10,5));
//birden fazla export edilen fonksiyon ve bunlardan biri defaultsa
import * as Fonksiyonlar from "./js2.js";
alert(Fonksiyonlar.default(10,5));
//await ile cagrilirsa default fonksiyonu default ile cagiriyoruz
const Fonksiyonlar = await import('./js.js');
alert(Fonksiyonlar.default(10, 20));
Kaynaklar
- https://www.w3schools.com/js/js_modules.asp
- https://www.scaler.com/topics/javascript/import-js-file-in-js/
- https://www.w3schools.com/js/js_modules_export.asp
