ES6 Import İfadesi ve Yöntemleri

Bildiğiniz gibi, Javascript'in ES5 standartında, javascript dosyaları arasında import veya export benzeri native bir mekanizma bulunmuyordu.

Bu önemli özellik, yeni standart ES6'daki import-export statement ile kullanılabiliyor.

2 dosya arasında özellikle fonksiyon ve class'ların import edilebiliyor olması, ES6'nin temeldeki mantığı olan, javascript'i daha modüler hale getirme felsefesini destekliyor.

Import Yöntemleri

Klasik kullanımını şöyle özetleyebiliriz;

import {elemanim} from "modulum";

Bu statementın kullanıldığı javascript dosyası içerisinde, modulum.js dosyası içerisindeki export edilmiş olan elemanim elemanı, bu javascript scope'u içerisinde kullanılabilir olacaktır.

Buna ek olarak modulum.js içerisinde;

export elemanim = function()...

Şeklinde, import edilecek dosya içerisinde export edilebilir elemanların export edilebileceğiniz "export" ön eki ile belirtmemiz gerekiyor.

Bunlara ek olarak, bir modül default olarak bir elemanını export da edebilir, bunu;

export default elemanim = function()...

Şeklinde, export ibaresi yanına default vererek yapıyoruz, bu durumda, modülün export ettiği eleman defaut olarak elemanim olacak ve import ederken şu şekilde kullanacağız;

import elemanim from "modulum";

Burada elemanim import edilirken curly bracket kullanılmadığına dikkatinizi çekmek istiyorum.

Default import syntaxında dikkatinizi çekmek istediğim diğer bir konu, elemanın kendi adı ile sayfaya import edilmesi zorunluluğunun bulunmamasıdır. Yani "modulum.js" dosyası içinde default olarak export edilmiş "elemanim" elemanı, kullanılacak javascript dosyasında şu şekilde import edilerek de kullanılabilir.

import elem from "modulum";

Burada elem alias ismi, elemanim çıktısını temsil etmektedir.

Alias olarak kısaltılmış isim kullanımından bahsetmişken, birden çok elemanın export edildiği bir modül dosyasında, import yaparken şu kuralı kullanarak, import edilen dosyadan export edilen elemanların isimlerini değiştirebilir - kısaltabilirsiniz;

import { elemanim1 as elem1 } from "modulum";
import { elemanim1 as elem1, elemanim2 as elem2 } from "modulum";

Tüm bunlara ek olarak sayfaya import ettiğimiz çoklu export'a sahip modül elemanları virgül ile ayırılarak sayfaya inject edilebilir.

Eğer import edilen javascript dosyası fazla export edilen elemana sahipse ve bu elemanların tamamını import etmek istiyorsak şu syntaxı kullanabiliriz;

import * as modulum from "modulum";
modulum.elemanim1 ...
modulum.elemanim2 ...

Yıldız notasyonu ve as ile, dönen elemanları bir taşıyıcı objeye atayabilirsiniz.

Import ile ilgili ayrıntılı bilgiye şu adresten ulaşabilirsiniz; developer.mozilla.org

ecmascript 6

Yorumları Göster veya Yeni Yorum Yaz