Modül kavramı, modüler programlama paradigmasından gelir. Bu paradigma, yazılımın ayrı, değiştirilebilir bileşenlerden oluşması gerektiğini önermektedir. program fonksiyonlarını ayrı ayrı veya bir arada çalışabilen bağımsız dosyalara bölerek "modüller" başvuru.

Modül, belirli işlevleri uygulamak ve yeniden kullanılabilirliği ve organizasyonu desteklemek için kodu kapsayan bağımsız bir dosyadır.

Burada, modül deseni, çoğu Node.js uygulamasında kullanılan CommonJS modül sistemi ve ES6 Modül sistemi dahil olmak üzere JavaScript uygulamalarında kullanılan modül sistemlerini ele alacaksınız.

Modül Kalıbı

Yerel JavaScript modüllerinin tanıtılmasından önce, modül tasarım deseni, değişkenleri ve işlevleri tek bir dosyaya dahil etmek için bir modül sistemi olarak kullanılıyordu.

Bu, popüler olarak IIFE'ler olarak bilinen hemen çağrılan işlev ifadeleri kullanılarak uygulandı. IIFE, yaratıldığı anda çalışan yeniden kullanılamaz bir işlevdir.

İşte bir IIFE'nin temel yapısı:

(işlev () {
//buraya kod
})();
(() => {
//buraya kod
})();
(zaman uyumsuz () => {
//buraya kod
})();
instagram viewer

Yukarıdaki kod bloğu, üç farklı bağlamda kullanılan IIFE'leri açıklar.

IIFE'ler kullanıldı çünkü bir işlev içinde bildirilen değişkenler işlevin kapsamına alındı, bu da onları yalnızca işlev içinde erişilebilir ve işlevler veri döndürmenize izin verdiği için (bunları genel olarak erişilebilir).

Örneğin:

sabit fo = (işlev () {
sabit sayName = (isim) => {
konsol.kayıt(Hey, benim adım ${isim}`);
 };
//değişkenleri açığa çıkarmak
geri dönmek {
 callSayName: (isim) => isim söyle (isim),
 };
})();
//Açıkta kalan yöntemlere erişme
foo.callSayName("Çubuk");

Yukarıdaki kod bloğu, yerel JavaScript modüllerinin tanıtılmasından önce modüllerin nasıl oluşturulduğunun bir örneğidir.

Yukarıdaki kod bloğu bir IIFE içerir. IIFE, döndürerek erişilebilir hale getirdiği bir işlev içerir. IIFE'de bildirilen tüm değişkenler, genel kapsamdan korunur. Böylece yöntem (adı söyle) yalnızca genel işlev aracılığıyla erişilebilir, callSayName.

IIFE'nin bir değişkene kaydedildiğine dikkat edin, foo. Bunun nedeni, bellekteki konumuna işaret eden bir değişken olmadan, komut dosyası çalıştırıldıktan sonra değişkenlere erişilememesidir. Bu model nedeniyle mümkündür JavaScript kapanışları.

CommonJS Modül Sistemi

CommonJS modül sistemi, CommonJS grubu tarafından, her bir modülü kendi ad alanında yürüterek JavaScript kapsam sorunlarını çözmek için tanımlanan bir modül biçimidir.

CommonJS modül sistemi, modülleri diğer modüllere göstermek istedikleri değişkenleri açıkça dışa aktarmaya zorlayarak çalışır.

Bu modül sistemi, sunucu tarafı JavaScript (Node.js) ve bu nedenle tarayıcılarda varsayılan olarak desteklenmez.

CommonJS modüllerini projenize uygulamak için, önce aşağıdakileri çalıştırarak uygulamanızda NPM'yi başlatmanız gerekir:

npm başlatma -y

CommonJS modül sistemini takiben dışa aktarılan değişkenler şu şekilde içe aktarılabilir:

//randomModule.js
// kurulu paket
sabit kuruluIçe aktarma = gerekmek("paket ismi");
// yerel modül
sabit yerelImport = gerekmek("/path-to-module");

Modüller, CommonJS kullanılarak içe aktarılır. gerekmek bir JavaScript dosyasını okuyan, okunan dosyayı yürüten ve ihracat nesne. bu ihracat nesne, modüldeki mevcut tüm dışa aktarımları içerir.

Bir değişkeni, adlandırılmış dışa aktarmaları veya varsayılan dışa aktarmaları kullanarak CommonJS modül sistemini izleyerek dışa aktarabilirsiniz.

Adlandırılmış İhracat

Adlandırılmış ihracatlar, atandıkları adlarla tanımlanan ihracatlardır. Adlandırılmış dışa aktarmalar, varsayılan dışa aktarmaların aksine modül başına birden çok dışa aktarmaya izin verir.

Örneğin:

//main.js
export.myExport = işlev () {
konsol.log("Bu bir örnektir. ile ilgili adlı ihracat");
};
export.anotherExport = işlev () {
konsol.log("Bu başka bir örnektir. ile ilgili adlı ihracat");
};

Yukarıdaki kod bloğunda, adlandırılmış iki işlevi dışa aktarıyorsunuz (myExport Ve başka bir İhracat)'e bağlayarak ihracat nesne.

Benzer şekilde, şu şekilde işlevleri dışa aktarabilirsiniz:

sabit dışa aktarımım = işlev () {
konsol.log("Bu bir örnektir. ile ilgili adlı ihracat");
};
sabit başka bir Dışa Aktarma = işlev () {
konsol.log("Bu başka bir örnektir. ile ilgili adlı ihracat");
};
modül.ihracat = {
 benim İhracat,
 başkaİhracat,
};

Yukarıdaki kod bloğunda, ihracat adlandırılmış işlevlere nesne. yalnızca atayabilirsiniz ihracat aracılığıyla yeni bir nesneye nesne modül nesne.

Bu şekilde yapmaya çalışırsanız kodunuz bir hata atar:

//Ters Yön
ihracat = {
 benim İhracat,
 başkaİhracat,
};

Adlandırılmış dışa aktarımları içe aktarmanın iki yolu vardır:

1. Tüm dışa aktarmaları tek bir nesne olarak içe aktarın ve kullanarak bunlara ayrı ayrı erişin. nokta gösterimi.

Örneğin:

//otherModule.js
sabit foo = gerekmek("./ana");
foo.myExport();
foo.başka Dışa Aktarma();

2. İhracatın yapısını bozun ihracat nesne.

Örneğin:

//otherModule.js
sabit { myExport, başka birExport } = gerekmek("./ana");
myExport();
başkaDışa aktar();

Tüm ithalat yöntemlerinde ortak olan bir şey, bunların ihraç edildikleri adlar kullanılarak ithal edilmeleri gerektiğidir.

Varsayılan Dışa Aktarmalar

Varsayılan dışa aktarma, seçtiğiniz herhangi bir adla tanımlanan bir dışa aktarmadır. Modül başına yalnızca bir varsayılan dışa aktarımınız olabilir.

Örneğin:

//main.js
sınıffoo{
 çubuk() {
konsol.log("Bu bir örnektir. ile ilgili A varsayılanihracat");
 }
}
modül.ihracat = Foo;

Yukarıdaki kod bloğunda, bir sınıfı dışa aktarıyorsunuz (foo) yeniden atanarak ihracat itiraz edin.

Varsayılan dışa aktarmaları içe aktarma, adlandırılmış dışa aktarmaları içe aktarmaya benzer, ancak bunları içe aktarmak için istediğiniz herhangi bir adı kullanabilirsiniz.

Örneğin:

//otherModule.js
sabit Çubuk = gerekmek("./ana");
sabit nesne = yeni Çubuk();
nesne.çubuk();

Yukarıdaki kod bloğunda, varsayılan dışa aktarma, Çubuk, ancak istediğiniz herhangi bir adı kullanabilirsiniz.

ES6 Modül Sistemi

Popüler olarak ES6 modülleri olarak bilinen ECMAScript Harmony modül sistemi, resmi JavaScript modül sistemidir.

ES6 modülleri, kullanmadan önce biraz yapılandırma gerektirmesine rağmen, tarayıcılar ve sunucular tarafından desteklenir.

Tarayıcılarda, belirtmeniz gerekir tip gibi modül komut dosyası içe aktarma etiketinde.

Şöyle:

//index.html
<komut dosyası kaynağı="./app.js" tür="modül"></script>

Node.js'de ayarlamanız gerekir tip ile modül senin içinde paket.json dosya.

Şöyle:

//package.json
"tip":"modül"

Adlandırılmış dışa aktarmaları veya varsayılan dışa aktarmaları kullanarak ES6 modül sistemini kullanarak değişkenleri dışa aktarabilirsiniz.

Adlandırılmış İhracat

CommonJS modüllerindeki adlandırılmış içe aktarmalara benzer şekilde, atandıkları adlarla tanımlanırlar ve modül başına birden çok dışa aktarmaya izin verirler.

Örneğin:

//main.js
ihracatsabit dışa aktarımım = işlev () {
konsol.log("Bu bir örnektir. ile ilgili adlı ihracat");
};
ihracatsabit başka bir Dışa Aktarma = işlev () {
konsol.log("Bu başka bir örnektir. ile ilgili adlı ihracat");
};

ES6 modül sisteminde, adlandırılmış dışa aktarmalar, değişkenin önüne ihracat anahtar kelime.

Adlandırılmış dışa aktarımlar, CommonJS ile aynı yöntemlerle ES6'daki başka bir modüle aktarılabilir:

  • gerekli ihracatın yeniden yapılandırılması ihracat nesne.
  • Tüm dışa aktarmaları tek bir nesne olarak içe aktarma ve bunlara nokta gösterimi kullanarak ayrı ayrı erişme.

İşte bir yapı bozma örneği:

//otherModule.js
içe aktarmak { myExport, başka birExport } itibaren "./main.js";
myExport()
başka bir Dışa Aktarma()

İşte tüm nesneyi içe aktarmanın bir örneği:

içe aktarmak * gibi foo itibaren './main.js'
foo.myExport()
foo.başka Dışa Aktarma()

Yukarıdaki kod bloğunda, yıldız işareti (*) "hepsi" anlamına gelir. bu gibi anahtar kelime atar ihracat onu takip eden dizeye itiraz edin, bu durumda, foo.

Varsayılan Dışa Aktarmalar

CommonJS'deki varsayılan dışa aktarmalara benzer şekilde, seçtiğiniz herhangi bir adla tanımlanırlar ve modül başına yalnızca bir varsayılan dışa aktarma işlemine sahip olabilirsiniz.

Örneğin:

//main.js
sınıffoo{
 çubuk() {
konsol.log("Bu bir örnektir. ile ilgili A varsayılanihracat");
 }
}
ihracatvarsayılan foo;

Varsayılan dışa aktarmalar, varsayılan anahtar kelimeden sonra ihracat anahtar kelime, ardından dışa aktarmanın adı.

Varsayılan dışa aktarmaları içe aktarma, adlandırılmış dışa aktarmaları içe aktarmaya benzer, ancak bunları içe aktarmak için istediğiniz herhangi bir adı kullanabilirsiniz.

Örneğin:

//otherModule.js
içe aktarmak Çubuk itibaren "./main.js";

Karma İhracat

ES6 modül standardı, CommonJS'den farklı olarak, tek bir modülde hem varsayılan dışa aktarmalara hem de adlandırılmış dışa aktarmalara sahip olmanızı sağlar.

Örneğin:

//main.js
ihracatsabit dışa aktarımım = işlev () {
konsol.log("Bu başka bir örnektir. ile ilgili adlı ihracat");
};
sınıffoo{
 çubuk() {
konsol.log("Bu bir örnektir. ile ilgili A varsayılanihracat");
 }
}
ihracatvarsayılan foo;

Modüllerin Önemi

Kodunuzu modüllere bölmek, yalnızca onların okunmasını kolaylaştırmakla kalmaz, aynı zamanda daha tekrar kullanılabilir ve bakımı yapılabilir hale getirir. JavaScript'teki modüller, tüm modüller varsayılan olarak katı modda yürütüldüğünden, kodunuzu daha az hataya açık hale getirir.