JavaScript Modülleri

Bu eğiticide, örnekler yardımıyla JavaScript modülleri hakkında bilgi edineceksiniz.

Programımız büyüdükçe birçok satır kod içerebilir. Her şeyi tek bir dosyaya koymak yerine, kodları işlevlerine göre ayrı dosyalarda ayırmak için modülleri kullanabilirsiniz. Bu, kodumuzu organize eder ve bakımı daha kolay hale getirir.

Modül, belirli bir görevi gerçekleştirmek için kod içeren bir dosyadır. Bir modül değişkenler, işlevler, sınıflar vb. İçerebilir. Bir örnek görelim,

Greet.js adlı bir dosyanın aşağıdaki kodu içerdiğini varsayalım :

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Şimdi, başka bir dosyada greet.js kodunu kullanmak için aşağıdaki kodu kullanabilirsiniz:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Buraya,

• Greet.js içindeki greetPerson()işlev , anahtar kelime kullanılarak dışa aktarılırexport

   export function greetPerson(name) (… )

• Ardından, anahtar kelimeyi greetPerson()kullanarak başka bir dosyaya içe aktardık import. İşlevleri, nesneleri vb. İçe aktarmak için bunları etrafına sarmalısınız ( ).

   import ( greet ) from '/.greet.js';

Not : Modülden yalnızca dışa aktarılan işlevlere, nesnelere vb. Erişebilirsiniz. Bunları exportiçe aktarmak ve başka dosyalarda kullanmak için belirli işlev, nesneler vb. İçin anahtar sözcük kullanmanız gerekir.

Birden Çok Nesneyi Dışa Aktar

Bir modülden birden fazla nesneyi dışa aktarmak da mümkündür. Örneğin,

Module.js dosyasında

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

Ana dosyada,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Buraya,

 import ( name, sum ) from './module.js';

Bu hem name değişkenini hem de sum()işlevi module.js dosyasından içe aktarır .

İçe ve dışa aktarımları yeniden adlandırma

İçe aktarmak istediğiniz nesneler (değişkenler, işlevler vb.) Ana dosyanızda zaten mevcutsa, program istediğiniz gibi davranmayabilir. Bu durumda program, değeri içe aktarılan dosya yerine ana dosyadan alır.

Adlandırma çakışmalarını önlemek için, dışa aktarma sırasında veya içe aktarma sırasında bu işlevleri, nesneleri vb. Yeniden adlandırabilirsiniz.

1. Modülde yeniden adlandırın (dışa aktarma dosyası)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Burada, işlevi module.js dosyasından dışa aktarırken, işleve yeni adlar (burada, yeniAdı1 & yeniAdı2) verilir. Bu nedenle, bu işlevi içe aktarırken, bu işleve başvurmak için yeni ad kullanılır.

2. İçe aktarma dosyasında yeniden adlandırın

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Burada, işlevi içe aktarırken, işlev adı için yeni adlar (burada, yeniAdı1 & yeniAdı2) kullanılır. Şimdi bu işlevlere başvurmak için yeni isimleri kullanıyorsunuz.

Varsayılan Dışa Aktarma

Ayrıca, modülün varsayılan olarak dışa aktarımını da gerçekleştirebilirsiniz. Örneğin,

Greet.js dosyasında :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Ardından içe aktarırken şunları kullanabilirsiniz:

 import random_name from './greet.js';

Varsayılan dışa aktarım gerçekleştirilirken,

• random_name, kaynağından içe aktarılır greet.js. , random_nameİçinde olmadığından greet.js, varsayılan dışa aktarma ( greet()bu durumda) olarak dışa aktarılır random_name.
• Varsayılan dışa aktarmayı küme parantezlerini eklemeden doğrudan kullanabilirsiniz ().

Not : Bir dosya birden çok dışa aktarım içerebilir. Ancak bir dosyada yalnızca bir varsayılan dışa aktarmanız olabilir.

Modüller Her Zaman Katı Modu kullanır

Varsayılan olarak, modüller katı moddadır. Örneğin,

 // in greet.js function greet() ( // strict by default ) export greet();

Modülü Kullanmanın Faydası

• Kod tabanının bakımı daha kolaydır, çünkü farklı işlevlere sahip farklı kodlar farklı dosyalarda bulunur.
• Kodu yeniden kullanılabilir hale getirir. Bir modül tanımlayabilir ve ihtiyaçlarınıza göre defalarca kullanabilirsiniz.

İçe / dışa aktarımın kullanımı bazı tarayıcılarda desteklenmeyebilir. Daha fazla bilgi edinmek için JavaScript içe aktarma / dışa aktarma Desteği sayfasını ziyaret edin.