JavaScript topluluğu, kodu modüller halinde düzenlemenin çeşitli yollarını buldu. JavaScript ekosisteminde modül sisteminin nasıl geliştiğini öğrenin.
Modül kavramı, modüler programlama paradigmasından gelir. Bu paradigma, program işlevlerini ayrı ayrı veya bir uygulamada birleştirilmiş olarak çalışabilen bağımsız dosyalara bölerek yazılımın “modüller” adı verilen ayrı, değiştirilebilir bileşenlerden oluşması gerektiğini önerir.
Modül, belirli işlevleri uygulamak ve yeniden kullanılabilirliği ve organizasyonu teşvik etmek için kodu içine alan bağımsız bir dosyadır.
Burada modül kalıbı, ç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 dosyada kapsamak için bir modül sistemi olarak kullanıldı.
Bu, yaygın olarak IIFE’ler olarak bilinen hemen çağrılan işlev ifadeleri kullanılarak uygulandı. IIFE, oluşturulduktan hemen sonra çalışan yeniden kullanılamaz bir işlevdir.
İşte bir IIFE’nin temel yapısı:
(function () {
//code here
})();
(() => {
//code here
})();
(async () => {
//code here
})();
Yukarıdaki kod bloğu, üç farklı bağlamda kullanılan IIFE’leri açıklar.
IIFE’ler, bir işlevin içinde bildirilen değişkenler işlevin kapsamına alındığından, yalnızca işlev içinde erişilebilir olduklarından ve işlevler verileri döndürmenize izin verdiğinden (bunları herkesin erişimine açık hale getirdiğinden) kullanıldı.
Örneğin:
const foo = (function () {
const sayName = (name) => {
console.log(`Hey, my name is ${name}`);
};
//Exposing the variables
return {
callSayName: (name) => sayName(name),
};
})();
//Accessing exposed methods
foo.callSayName(“Bar”);
Yukarıdaki kod bloğu, yerel JavaScript modüllerinin tanıtımından önce modüllerin nasıl oluşturulduğunu gösteren bir örnektir.
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 global kapsamdan korunur. Bu nedenle, ( sayName ) yöntemine yalnızca genel işlev olan callSayName aracılığıyla erişilebilir .
IIFE’nin foo değişkenine kaydedildiğine dikkat edin . Bunun nedeni, bellekteki konumunu gösteren bir değişken olmadan, komut dosyası çalıştıktan sonra değişkenlere erişilemez olacaktır. Bu model, JavaScript kapanışları nedeniyle mümkündür .
CommonJS Modül Sistemi
CommonJS modül sistemi, her modülü kendi ad alanında yürüterek JavaScript kapsam sorunlarını çözmek için CommonJS grubu tarafından 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) için oluşturulmuştur 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 init -y
CommonJS modül sistemini takiben dışa aktarılan değişkenler şu şekilde içe aktarılabilir:
//randomModule.js
//installed package
const installedImport = require(“package-name”);
//local module
const localImport = require(“/path-to-module”);
Modüller, bir JavaScript dosyasını okuyan, okuma dosyasını yürüten ve dışa aktarma nesnesini döndüren require ifadesi kullanılarak CommonJS’ye içe aktarılır . Dışa aktarma nesnesi, modüldeki tüm kullanılabilir dışa aktarmaları içerir.
Adlandırılmış dışa aktarmaları veya varsayılan dışa aktarmaları kullanarak CommonJS modül sistemini izleyerek bir değişkeni dışa aktarabilirsiniz.
Adlandırılmış İhracat
Adlandırılmış dışa aktarmalar, atandıkları adlarla tanımlanan dışa aktarmalardır. Adlandırılmış dışa aktarma, varsayılan dışa aktarmaların aksine modül başına birden çok dışa aktarmaya izin verir.
Örneğin:
//main.js
exports.myExport = function () {
console.log(“This is an example of a named export”);
};
exports.anotherExport = function () {
console.log(“This is another example of a named export”);
};
Yukarıdaki kod bloğunda, iki adlandırılmış işlevi ( myExport ve otherExport ) dışa aktarma nesnesine ekleyerek dışa aktarıyorsunuz .
Benzer şekilde, aşağıdaki gibi işlevleri dışa aktarabilirsiniz:
const myExport = function () {
console.log(“This is an example of a named export”);
};
const anotherExport = function () {
console.log(“This is another example of a named export”);
};
module.exports = {
myExport,
anotherExport,
};
Yukarıdaki kod bloğunda, dışa aktarma nesnesini adlandırılmış işlevlere ayarlarsınız. Dışa aktarılan nesneyi yalnızca modül nesnesi aracılığıyla yeni bir nesneye atayabilirsiniz .
Bu şekilde yapmaya çalışırsanız kodunuz hata verir:
//wrong way
exports = {
myExport,
anotherExport,
};
Adlandırılmış dışa aktarmaları içe aktarmanın iki yolu vardır:
1. Tüm dışa aktarmaları tek bir nesne olarak içe aktarın ve nokta gösterimini kullanarak bunlara ayrı ayrı erişin .
Örneğin:
//otherModule.js
const foo = require(“./main”);
foo.myExport();
foo.anotherExport();
2. Dışa aktarma nesnesinden dışa aktarımların yapısını bozun.
Örneğin:
//otherModule.js
const { myExport, anotherExport } = require(“./main”);
myExport();
anotherExport();
Tüm içe aktarma yöntemlerinde ortak olan bir şey, dışa aktarıldıkları adlarla aynı adlar kullanılarak içe aktarılmaları 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 aktarma işleminiz olabilir.
Örneğin:
//main.js
class Foo {
bar() {
console.log(“This is an example of a default export”);
}
}
module.exports = Foo;
Yukarıdaki kod bloğunda, dışa aktarma nesnesini yeniden atayarak bir sınıfı ( Foo ) dışa aktarıyorsunuz .
Varsayılan dışa aktarmaları içe aktarmak, içe aktarmak için istediğiniz herhangi bir adı kullanabilmeniz dışında, adlandırılmış dışa aktarmaları içe aktarmaya benzer.
Örneğin:
//otherModule.js
const Bar = require(“./main”);
const object = new Bar();
object.bar();
Yukarıdaki kod bloğunda, varsayılan dışa aktarmanın adı Bar idi , ancak istediğiniz herhangi bir adı kullanabilirsiniz.
ES6 Modül Sistemi
Halk arasında ES6 modülleri olarak bilinen ECMAScript Harmony modül sistemi, resmi JavaScript modül sistemidir.
ES6 modülleri tarayıcılar ve sunucular tarafından desteklenir, ancak bunları kullanmadan önce biraz yapılandırmanız gerekir.
Tarayıcılarda, komut dosyası içe aktarma etiketinde türü modül olarak belirtmeniz gerekir .
Şöyle:
//index.html
<script src=”./app.js” type=”module”></script>
Node.js’de, package.json dosyanızdaki modülü modül olarak ayarlamanız gerekir .
Şöyle:
//package.json
“type”:”module”
Ayrıca, 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
export const myExport = function () {
console.log(“This is an example of a named export”);
};
export const anotherExport = function () {
console.log(“This is another example of a named export”);
};
ES6 modül sisteminde, adlandırılmış dışa aktarmalar, değişkenin önüne dışa aktarma anahtar sözcüğü getirilerek dışa aktarılır.
Adlandırılmış dışa aktarma, CommonJS ile aynı yöntemlerle ES6’daki başka bir modüle aktarılabilir:
Dışa aktarma nesnesinden gerekli dışa aktarmaların yapısının kaldırılması.
Tüm dışa aktarmaları tek bir nesne olarak içe aktarma ve nokta gösterimini kullanarak bunlara ayrı ayrı erişme.
İşte bir de-yapılandırma örneği:
//otherModule.js
import { myExport, anotherExport } from “./main.js”;
myExport()
anotherExport()
İşte tüm nesneyi içe aktarma örneği:
import * as foo from ‘./main.js’
foo.myExport()
foo.anotherExport()
Yukarıdaki kod bloğunda yıldız işareti ( * ) “tümü” anlamına gelir. as anahtar sözcüğü, dışa aktarma nesnesini onu izleyen dizeye atar , 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 aktarmanız olabilir.
Örneğin:
//main.js
class Foo {
bar() {
console.log(“This is an example of a default export”);
}
}
export default Foo;
Varsayılan dışa aktarma, dışa aktarma anahtar sözcüğünden sonra varsayılan anahtar sözcüğün ardından dışa aktarmanın adının eklenmesiyle oluşturulur .
Varsayılan dışa aktarmaları içe aktarmak, içe aktarmak için istediğiniz herhangi bir adı kullanabilmeniz dışında, adlandırılmış dışa aktarmaları içe aktarmaya benzer.
Örneğin:
//otherModule.js
import Bar from “./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
export const myExport = function () {
console.log(“This is another example of a named export”);
};
class Foo {
bar() {
console.log(“This is an example of a default export”);
}
}
export default Foo;
Modüllerin Önemi
Kodunuzu modüllere bölmek, yalnızca onların okunmasını kolaylaştırmakla kalmaz, aynı zamanda daha fazla yeniden 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.