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ü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.
Örnek
js.js içeriği:
export function stilUygula() { //sayfadaki tüm inputlara uygular const inputlar = document.querySelectorAll("input[type='text']"); inputlar.forEach(input => { input.style.border = "2px solid #333"; input.style.padding = "15px"; input.style.borderRadius = "6px"; input.style.outline = "none"; input.style.lineHeight="16px"; input.addEventListener("focus", () => { input.style.borderColor = "blue"; input.style.backgroundColor ="yellow"; }); input.addEventListener("blur", () => { input.style.borderColor = "#333"; input.style.backgroundColor =""; }); }); }index.html <input type="text"/> <input type="text"/> <input type="text"/> <script type="module"> import {stilUygula} from "./js.js"; stilUygula(); </script>
Kaynaklar
- https://www.w3schools.com/js/js_modules.asp
- https://www.scaler.com/topics/javascript/import-js-file-in-js/
