JavaScript'te Modül Sistemlerine Giriş

JavaScript'te Modül Sistemlerine Giriş

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.





GÜNÜN YAPILAN VİDEOSU

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. Böylece yöntem ( sayname ) yalnızca kamu işlevi aracılığıyla erişilebilir, callSayName .

IIFE'nin bir değişkene kaydedildiğine dikkat edin, ahmak . 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 desen nedeniyle mümkündür JavaScript kapanışları .

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 için oluşturuldu 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 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, CommonJS'de aşağıdakiler kullanılarak içe aktarılır: gerekmek JavaScript dosyasını okuyan, okunan dosyayı yürüten ve ihracat nesne. bu ihracat nesne, modüldeki mevcut tüm 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, adlandırılmış iki işlevi dışa aktarıyorsunuz ( benim İhracatım ve başkaİhracat ) onları bağlayarak ihracat nesne.

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, ihracat adlandırılmış işlevlere nesne. sadece atayabilirsiniz ihracat aracılığıyla yeni bir nesneye itiraz modül nesne.

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 kullanarak bunlara ayrı ayrı erişin. nokta gösterimi .

Örneğin:

dizüstü bilgisayar monitörü nasıl kapatılır 
//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

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

Ö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 bir sınıfı dışa aktarıyorsunuz ( Foo ) yeniden atayarak ihracat buna itiraz et.

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 aktarma Çubuk , ancak istediğiniz herhangi bir ismi 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, belirtmeniz gerekir tip olarak modül komut dosyası içe aktarma etiketinde.

Şöyle:

//index.html 
<script src="./app.js" type="module"></script>

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

Şö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 şu ifade eklenerek dışa aktarılır: ihracat anahtar kelime.

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

  • Gerekli ihracatın yapılandırılması ihracat nesne.
  • 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 ( * ) 'hepsi' anlamına gelir. bu olarak anahtar kelime atar ihracat onu takip eden dizeye itiraz edin, bu durumda, ahmak .

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 aktarmalar, aşağıdakiler eklenerek oluşturulur: varsayılan anahtar kelimeden sonra ihracat anahtar kelime, ardından dışa aktarma adı.

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 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.