İmport Export kullanımı örnek

JavaScript
1

Merhabalar,
Konuyla alakalı bir çok makale okumama rağmen yine de bir türlü herhangi bir js dosyasındaki fonksiyonu başka bir sayfaya import edemiyorum. Bana bununla alakalı örnek kod verebilir misiniz?

2

JavaScript ile çok uğraşım yok, baktığım kaynağa göre şöyle açıklayabilirim;
.
.
JAVASCRIPT’TE MODÜLLER
Kodlarını ayrı dosyalarda bölmeni sağlar (diğer dillerde olduğu gibi). Böylece projen daha kolay yönetilebilir küçük parçalardan oluşur. Özellikle çeşitli fonksiyonlarını ve değişkenlerini ayrı dosyalarda bir modül olarak saklayabilirsin.
Bir modül import ifadesi ile o anki çalışma dosyanıza dahil edilir. export ifadesi ise -modül dosyanızın içine- yazılır. Yani d1.html içine d2.js modülü eklenecek ise, d1’in içinde import, d2’nin içinde export ifadesi kullanılacaktır.

Örnek 1: d2.js modülünün d1.html içerisine eklenmesi (d1.html içeriği)

<script type="module">
    import message from "./d2.js";
</script>

Şimdi import (içe aktarma/dahil etme) ve export (dışa aktarma) mevzularını biraz daha inceleyelim.
.
.
A. EXPORT
İki tür export yöntemi var;

  1. Named (Adlandırılmış) Export
  2. Defalut (Varsayılan) Export

A.1-Named Export
Göndereceğin değişkenlere isim verip başında export ifadesini kullanacaksın. Aşağıda iki farklı şekilde bu yöntemin uygulanışı gösterilmiş.

Named Export Örnekleri: (d2.js dosyası)

export const name = "Jesse";
export const age = 40;

ya da

const name = "Jesse";
const age = 40;

export {name, age};

A.2- Defalut Export
Sadece 1 tane export ifadesi kullanıyorsun. Export ifadesinin yanında tek bir değişken gönderiyorsun. (Ben öyle anladım)

Default Export Örneği (d2.js dosyası)

const message = () => {
    const name = "Jesse";
    const age = 40;
    return name + ' is ' + age + 'years old.';
};

export default message;

.
.

B. IMPORT
Export ederken 2 yöndem vardı, adlandırılmış ve varsayılan yöntem. Dolayısıyla bu yöntemlerle hazırlanmış modülleri 2 yöntemle içe aktarabiliriz.

B.1-Adlandırılmış Yöntemle Export Edilen Modülün Import Edilmesi (d1.html dosyası)

<script type="module">
    import { name, age } from "./d2.js";
</script>

B.2.-Varsayılan Yöntemle Export Edilen Modülün Import Edilmesi

<script type="module">
    import message from "./d2.js";
</script>

Kaynak:

3

hocam bu şekilde yaptığımda şöyle bir hata alıyorum

from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

4

Hatanı internette biraz araştırdım. Sunucu kullanmadan komut dosyalarını modül olarak kullanamayacağınızı belirtiyorlar. Apache (Php & MySql projeler geliştireceksen…) gibi bir sunucu üzerinde çalışmanı tavsiye edebilirim. Önerilerde Visual Studio Code editörünün canlı sunucu eklentisini de kullanabileceğini belirtmişler.

Aşağıda ilgili kaynaktan bir kesit (Google Translate çevirisi)

" Modüller yerel olarak değil, yalnızca HTTP (ler) üzerinden çalışır

Bir web sayfasını file:// protokolü aracılığıyla yerel olarak açmaya çalışırsanız, içe/dışa aktarma yönergelerinin çalışmadığını göreceksiniz. Modülleri test etmek için statik sunucu gibi yerel bir web sunucusu kullanın veya düzenleyicinizin VS Code Live Server Extension gibi “canlı sunucu” özelliğini kullanın."

Kaynak: Modules, introduction

VS Code Live Server Extension - Çalışma Görüntüsü

5

Çok teşekkür ederim mükemmel bir cevap :blush:

1 Beğeni