JavaScript Modülleri

İçindekiler

Modüller

JavaScript modülleri, kodunuzu ayrı dosyalara bölmenize olanak tanır.

Bu, bir kod tabanının korunmasını kolaylaştırır.

Modüller, import deyimiyle harici dosyalardan içe aktarılır.

Modüller ayrıca <script> etiketindeki type="module"'a da güvenir.

Örnek

<script type="module">
import message from "./message.js";
</script>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

İhracat

İşlevlere veya değişkenlere sahip modüller herhangi bir harici dosyada saklanabilir.

İki tür dışa aktarma vardır: Adlandırılmış Dışa Aktarmalar ve Varsayılan Dışa Aktarmalar.

Adlandırılmış Dışa Aktarmalar

person.js adında bir dosya oluşturalım ve dışa aktarmak istediğimiz şeylerle doldurun.

Adlandırılmış dışa aktarmaları iki şekilde oluşturabilirsiniz. Tek tek satır içi veya altta hepsi bir arada.

Bireysel olarak satır içi:

person.js

export const name = "Jesse";
export const age = 40;

Hepsi birden altta:

person.js

const name = "Jesse";
const age = 40;

export {name, age};

Varsayılan Dışa Aktarmalar

message.js adında başka bir dosya oluşturalım ve varsayılan dışa aktarımı göstermek için kullanın.

Bir dosyada yalnızca bir varsayılan dışa aktarma işleminiz olabilir.

Örnek

message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

İçe aktarmak

Modülleri bir dosyaya, adlandırılmış olup olmadıklarına bağlı olarak iki şekilde aktarabilirsiniz. dışa aktarmalar veya varsayılan dışa aktarmalar.

Adlandırılmış dışa aktarmalar küme parantezleri kullanılarak oluşturulur. Varsayılan dışa aktarmalar değildir.

Adlandırılmış dışa aktarmalardan içe aktarma

Person.js dosyasından adlandırılmış dışa aktarmaları içe aktarın:

import { name, age } from "./person.js";

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Varsayılan dışa aktarmalardan içe aktarma

message.js dosyasından varsayılan bir dışa aktarımı içe aktarın:

import message from "./message.js";

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Not

Modüller yalnızca HTTP(ler) protokolüyle çalışır.

File:// protokolü ile açılan bir web sayfası, içe/dışa aktarma özelliğini kullanamaz.