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.
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.
Kaynaklar
- https://www.w3schools.com/js/js_modules.asp
- https://www.scaler.com/topics/javascript/import-js-file-in-js/
Yorumunuzu Ekleyin
