ES6 modules nedir? Nasıl kullanılır?
ES6 modül sistemi, JavaScript bileşenlerinin arasındaki bağı modüler olarak kurmamıza olanak sağlar. Modül sistemlerinin bir amacı bileşenler arası bağı kurmakken, ikinci önemli amaç ise kapsülleme (encapsulation) yapmak. Bu şekilde hangi bileşen görünür olacak hangi bileşen görünmez olacak gibi kısıtlamalar yapılabilir. Temel olarak export, import, default ve as gibi ifadeleri kullanır.
Genellikle aşağıdaki gibi birkaç yöntem kullanılır:
1. Yöntem
Bu yöntemde * ve as yardımı ile math.js dosyası içerisindeki tüm tanımlamaları math nesnesi olarak isimlendirip, aşağıdaki gibi kullanabiliyoruz. İstenirse math yerine başka bir isim de verilebilir.
math.js
|
1 2 3 4 5 6 7 |
export function sum(a, b) { return a+b; } export const PI = 3.14; |
math_client.js
|
1 2 3 4 5 6 7 |
import * as math from "./math"; console.log(math.sum(3,5)); // çıktı: 8 console.log(math.PI); // çıktı: 3.14 |
2. Yöntem
Diğer bir yöntem olarak math.js dosyası içerisinde export edilen sum ve PI‘yi aşağıdaki gibi {} içerisinde tanımlayıp alabiliyoruz.
as parametresi ile süslü parantezler içerisinde tanımladığımız değerleri farklı isimler ile kullanabiliriz.
math.js
|
1 2 3 4 5 6 7 |
export function sum(a, b) { return a+b; } export const PI = 3.14; |
math_client.js
|
1 2 3 4 5 6 7 8 9 10 11 |
import { sum, PI } from "./math"; console.log(sum(3,5)); // çıktı: 8 console.log(PI); // çıktı: 3.14 // ya da import { sum as addAll, PI } from "./math.js"; console.log(addAll(3,5)); // çıktı: 8 |
ya da sadece sum‘ı almak istersek
|
1 2 3 |
import { sum } from "./math"; |
3. Yöntem
Bu yöntemde ise multiply.js dosyası içerisinde isim vermeden default olarak tanımladığımız işlevi multiply_client.js içerisinde import ile çağırırken kendimiz herhangi bir isim vererek tanımlayabiliriz.
multiply.js
|
1 2 3 4 5 6 7 |
export default (x, y) => { return x * y; } export const PI = 3.14; |
Örnek olarak yukarıda export default olarak tanımladığımız işlevi multiply_client.js içerisinde multi ismini vererek çağırıyoruz.
multiply_client.js
|
1 2 3 |
import multi from "./multiply"; |
Yukarıdaki tanıma ek olarak multiply.js dosyası içerisinde default kullanmadan tanımladığımız PI değişkenini de çağırmak istersek aşağıdaki gibi yazabiliriz.
|
1 2 3 |
import multi, { PI } from "./multiply"; |
4. Yöntem
Export ettiğimiz Class içerisinde tanımladığımız değişken ve işlevlerimizi aşağıdaki gibi kullanabiliyoruz.
math_class.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
export default class { constructor() { this.PI = 3.14; } sum(...numbers) { return numbers.reduce((number, total) => total + number); } multiply(...numbers) { return numbers.reduce((number, total) => total * number); } } |
math_class_client.js
|
1 2 3 4 5 6 7 8 |
import myMath from "./multiply_class"; const math = new myMath(); console.log(math.sum(1,2,3)); // çıktı: 6 console.log(math.multiply(2,4,6)); // çıktı: 48 |
