İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

Modüler JavaScript Nedir?

Modüler JavaScript Nedir?
moduler-javascript
+ - 0

Modüler javascript nedir ve nasıl kullanılır?

Modüler Javascript, basitçe, büyük bir uygulama oluşturabileceğimiz verilerin yapı taşlarıdır. Modüllerin arkasındaki temel fikir, kodun bir kısmını dışa aktarabilmemiz ve ardından bunu kullanılacak diğer dosyalara aktarabilmemizdir.

Modülleri kullanarak, büyük bir betiği diğer dosyalarda da kullanılabilen daha küçük modüllere bölebiliriz.

Bunu bir resim yardımıyla anlayalım;

modüler javascript

İlk resimde tüm fonksiyonların veya kodun tek bir dosyada olduğunu ve böylece onu büyüttüğünü görebilirsiniz. Şimdi diğer kodlarla birlikte böyle 20-30 işleve sahip olduğunuzu hayal edin; bu dosya ne kadar büyüyecek. Bu kadar büyük bir dosyayı anlamayı ve yönetmeyi zorlaştıracaktır.

ES6 Modülleri şunlardır:

export: function,classes, etc. dışarı aktarmak için kullanılır.
import: dışa aktarılan modüllerin içeri aktarılması için kullanılır.

Bir örnek ile daha fazla anlamaya çalışalım. Burada üc dosyamız var index.html, func.js ve main.js.

<!-- 📂 index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>modules</title>
    <script type="module" src="./main.js"></script>
  </head>
  <body></body>
</html>

// 📂 func.js

export const sayHi = (user) => {
  console.log(`Hi!!! ${user}`);
};

// 📂 main.js

import { sayHi } from "./func.js";

sayHi("Webolog"); // Hi!!! Webolog


Yukarıdaki örnekte gördüğünüz gibi func.js içerisinde sayHi() adında bir fonksiyonumuz var ve solunda export sözdizimi ile dışarı aktarılmış

sayHi() fonksiyonu Main.js içerisinde import sözdizimi ile içeri alınmış ve kullanılmış konsolda çıktısı “Merhaba Webolog” olarak görünmektedir.

Not: Modülleri kullanmak için type=”module” niteliğini kullanarak scriptimizin bir modül olduğunu belirtmeliyiz yukarıdaki index.html’de yaptığımız gibi :

<script type="module" src="main.js"></script>

Modüllere giriş niteliğindeki bu yazımızda genel hatlarını ele aldık . Konu hakkında detaylı bilgilere buradan ulaşabilirsiniz!

Yazar Hakkında

Bu Yazıyı Yorumla