javaScript modules nedir? Nasıl kullanılır?

JavaScript'te modüller, kodun modüler ve yeniden kullanılabilir olmasını sağlamak için kullanılır. Modüller, bir veya daha fazla işlevi veya değişkeni birleştirerek kapsüller ve başka yerlerde yeniden kullanılabilir hale getirir. Bu, kodu daha okunaklı, daha kolay yönetilebilir ve daha az hata veren bir hale getirir.

HTML Dosyasını Ayarlanması

HTML dosyanızda <script> etiketini kullanarak JavaScript dosyasını bağlantıya eklerken, modül çalışması için type="module" niteliğini eklemeniz gerekmektedir. İşte bir örnek:

  

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Modül Çalışması için HTML</title>
  </head>
  <body>
    <!-- Sayfa içeriği -->
    
    <script src="main.js" type="module"></script>
  </body>
</html>

Yukarıdaki örnekte, <script> etiketinin type niteliği module olarak ayarlanmıştır. Bu, main.js dosyasının bir modül olduğunu belirtir. Bu şekilde, main.js dosyası modül olarak çalıştırılacak ve içe aktarma (import) ve dışa aktarma (export) gibi modül özelliklerini kullanabileceksiniz.

Not: Modüller yerel olarak değil, yalnızca HTTP(ler) aracılığıyla çalışır. Yerel olarak bir web sayfasını protokol aracılığıyla açmaya çalışırsanız , yönergelerin çalışmadığını file:// göreceksiniz . Modülleri test etmek için static-serverimport/ export gibi yerel bir web sunucusu kullanın veya düzenleyicinizin VS Code Live Server Extension gibi "canlı sunucu" özelliğini kullanın. Php proğramının çalışma ortamı localhost serverından da faydalanabilirsiniz

type="module" niteliği eklenmeden bağlantı yapılırsa, varsayılan olarak JavaScript dosyası bir "klasik" script olarak değerlendirilir ve modül özellikleri kullanılamaz. Bu nedenle, modül kullanmak istediğinizde <script> etiketine type="module" niteliğini eklemeyi unutmamalısınız.

JavaScript'te modüller, ES6 (ECMAScript 2015) standartlarıyla birlikte resmi olarak tanıtılmıştır. ES6'da, modüller "import" ve "export" anahtar kelimeleri kullanılarak tanımlanır. Örneğin, aşağıdaki gibi bir modül dosyası oluşturabilirsiniz:


// myModule.js dosyası

export function hello() {
  console.log("Merhaba dünya!");
}

export const message = "Bu bir mesajdır.";

Daha sonra, bu modülü başka bir dosyada "import" anahtar kelimesi kullanarak içe aktarabilirsiniz:


// app.js dosyası

import { hello, message } from './myModule.js';

hello(); // "Merhaba dünya!" çıktısı verecek
console.log(message); // "Bu bir mesajdır." çıktısı verecek

"myModule.js" dosyasındaki "hello" fonksiyonu ve "message" değişkenini "app.js" dosyasına içe aktarmak için kullanılır.

JavaScript'te modüller, kodun yeniden kullanılabilirliğini artırırken, aynı zamanda güvenliği de artırır. Modüller, kodda istenmeyen yan etkileri azaltarak, hataları tespit etmek ve çözmek için daha kolay bir şekilde yapılmasını sağlar.

ES6'daki modüller, CommonJS ve AMD (Asynchronous Module Definition) gibi diğer modül sistemlerine kıyasla daha gelişmiş özellikler sunar. ES6 modülleri, tarayıcılar ve Node.js gibi JavaScript çalıştırma ortamları tarafından desteklenir.

Modüller, büyük ölçekli JavaScript uygulamaları için önemlidir. Modüller, uygulamanın parçalarını ayrı ayrı tasarlamak, test etmek ve geliştirmek için kullanılabilir. Ayrıca, modüller, uygulamanın boyutunu azaltarak performansı artırabilir.


JavaScript modüllerinin bazı özellikleri şunlardır:


Modüller, kodun yeniden kullanılabilirliğini artırır ve kodun okunaklığını ve yönetilebilirliğini artırır.

Modüller, kodda istenmeyen yan etkileri azaltarak, hataları tespit etmek ve çözmek için daha kolay bir şekilde yapılmasını sağlar.

Modüller, kodun güvenliğini artırır ve çakışan isimlerden kaçınır.

ES6'daki modüller, tarayıcılar ve Node.js gibi JavaScript çalıştırma ortamları tarafından desteklenir.

Modüller, büyük ölçekli JavaScript uygulamaları için önemlidir ve uygulamanın parçalarını ayrı ayrı tasarlamak, test etmek ve geliştirmek için kullanılabilir.

JavaScript modülleri, uygulamanızın daha sürdürülebilir, yönetilebilir ve ölçeklenebilir olmasına yardımcı olabilir.

JavaScript modüllerinin kullanımı, birkaç farklı yöntemle gerçekleştirilebilir:

Named exports (İsimlendirilmiş İhracat): İhracat edilecek fonksiyon veya değişkenlerin isimleri belirtilir. İçe aktarırken bu isimler kullanılır.


  
// myModule.js dosyası

export const message = "Bu bir mesajdır.";

export function hello() {
  console.log("Merhaba dünya!");
}
  


// app.js dosyası

import { hello, message } from './myModule.js';

hello(); // "Merhaba dünya!" çıktısı verecek
console.log(message); // "Bu bir mesajdır." çıktısı verecek
  

Default exports (Varsayılan İhracat): Dosya içindeki ana işlev veya sınıf, varsayılan olarak ihracat edilir. İsim belirtilmeden doğrudan içe aktarılabilir.


// myModule.js dosyası

export default function() {
  console.log("Merhaba dünya!");
}



// app.js dosyası

import hello from './myModule.js';

hello(); // "Merhaba dünya!" çıktısı verecek
 

Mixed exports (Karma İhracat): Hem named hem de default ihracat kullanılabilir.


// myModule.js dosyası

const message = "Bu bir mesajdır.";

function hello() {
  console.log("Merhaba dünya!");
}

export { hello as default, message };



// app.js dosyası

import hello, { message } from './myModule.js';

hello(); // "Merhaba dünya!" çıktısı verecek
console.log(message); // "Bu bir mesajdır." çıktısı verecek

JavaScript modülleri, uygulamanızın daha sürdürülebilir, yönetilebilir ve ölçeklenebilir olmasına yardımcı olabilir. Modüllerin kullanımı, kodun yeniden kullanılabilirliğini artırırken aynı zamanda daha güvenli ve hataların tespit edilmesi ve çözülmesi daha kolay hale getirir.

Modüllerin kullanımı, büyük ölçekli uygulamaların tasarlanması ve geliştirilmesinde önemli bir rol oynar. Modüller, uygulamanın parçalarını ayrı ayrı tasarlamak ve geliştirmek için kullanılabilir. Ayrıca, modüller, uygulamanın boyutunu azaltarak performansı artırabilir.

ES6 modülleri, tarayıcılar ve Node.js gibi JavaScript çalıştırma ortamları tarafından desteklenir. Bu nedenle, modüllerin kullanımı, uygulamanın taşınabilirliğini de artırabilir.

Modüller aynı zamanda çakışan isimlerden kaçınmanıza ve kodun güvenliğini artırmanıza yardımcı olur. İçe aktarılan modülün değiştirilmesi, uygulamada beklenmedik sonuçlara neden olabilir. Bu nedenle, modüller, kodun kontrolünü sağlamanıza ve hataları tespit etmek ve çözmek için daha kolay bir şekilde yapılmasını sağlar.

Sonuç olarak, JavaScript modülleri, büyük ölçekli JavaScript uygulamalarının tasarlanması, geliştirilmesi ve yönetilmesi için vazgeçilmez bir araçtır. Modüller, kodun yeniden kullanılabilirliğini artırır, kodun güvenliğini artırır ve çakışan isimlerden kaçınır. Ayrıca, modüller, uygulamanın boyutunu azaltarak performansı artırır ve hataları tespit etmek ve çözmek için daha kolay bir şekilde yapılmasını sağlar.

Örnek Denedim tarayıcı şöyle hata veriyor "not use import statement outside a module"

Bu hata, JavaScript modüllerinin tarayıcı tarafından desteklenmediğini ve bu nedenle modülleri doğrudan tarayıcıda çalıştıramayacağınızı gösterir. Tarayıcılar genellikle ES6 modülleri desteklemese de, bunu destekleyen bazı modern tarayıcılar var.

Bir çözüm olarak, modüllerinizi bir derleyiciye (webpack, rollup vb.) veya Node.js gibi bir JavaScript çalıştırma ortamına taşıyabilirsiniz. Derleyiciler, modülleri birleştirerek tek bir JavaScript dosyası oluşturabilir ve bu dosya, tarayıcıda çalıştırılabilir. Node.js, ES6 modüllerini doğrudan destekleyen bir JavaScript çalıştırma ortamıdır.

Alternatif olarak, CommonJS veya AMD gibi başka modül sistemlerini kullanabilirsiniz. Bu modül sistemleri, tarayıcıda çalıştırılabilecek JavaScript koduna dönüştürülerek, modüllerin doğrudan tarayıcıda çalışmasını sağlar.

Özetle, doğrudan tarayıcıda çalıştıramayacağınız JavaScript modüllerini, derleyiciler veya farklı modül sistemleri kullanarak tarayıcıda çalıştırılabilir hale getirebilirsiniz.


export ile default export içe aktarırken import kısmında farklılıkları


export ve default export ifadeleri, içe aktarma (import) yaparken farklılıklar gösterir. İşte bu farklılıkların nasıl olduğu:

export İfadesiyle İçe Aktarma: export ifadesi kullanılarak dışa aktarılan öğeleri içe aktarmak için, içe aktarırken aynı isimleri kullanmanız gerekmektedir. İçe aktarmada süslü parantezler ({}) kullanılır ve dışa aktarılan öğelerin isimleri belirtilir.

Örneğin, aşağıdaki gibi bir modül dosyasında (myModule.js) sayHello fonksiyonunu ve message değişkenini dışa aktardığımızı düşünelim:

  

// myModule.js

export function sayHello() {
  console.log("Merhaba!");
}

export const message = "Bu bir mesajdır.";

Bu modül dosyasında bulunan öğeleri başka bir dosyada içe aktarırken, aynı isimleri kullanarak süslü parantezler içinde belirtmeniz gerekmektedir:



// main.js

import { sayHello, message } from "./myModule.js";

sayHello(); // "Merhaba!" çıktısını verir
console.log(message); // "Bu bir mesajdır." çıktısını verir

Default Export İle İçe Aktarma: default export ifadesi kullanılarak dışa aktarılan bir öğeyi içe aktarırken, herhangi bir isim belirtmeden doğrudan öğeyi kullanabilirsiniz. İçe aktarmada süslü parantezler kullanılmaz.

Örneğin, aşağıdaki gibi bir modül dosyasında (myModule.js) sayHello fonksiyonunu default export olarak dışa aktardığımızı düşünelim:

  

// myModule.js

export default function sayHello() {
  console.log("Merhaba!");
}

Bu durumda, içe aktarma yaparken herhangi bir isim belirtmeden doğrudan fonksiyonu kullanabilirsiniz:



// main.js

import sayHello from "./myModule.js";

sayHello(); // "Merhaba!" çıktısını verir

Bu şekilde, export ve default export ifadeleriyle dışa aktarılan öğeleri içe aktarırken farklılıklar ortaya çıkar. export ile içe aktarırken süslü parantezlerle öğelerin isimlerini belirtirken, default export ile içe aktarırken doğrudan öğeyi kullanabilirsiniz.

Modülleri node.js'de nasıl kullanırım?

Node.js, JavaScript modüllerini doğrudan destekleyen bir çalışma zamanı ortamıdır. Node.js'de, modülleri require() fonksiyonunu kullanarak yükleyebilirsiniz.

Öncelikle, modül dosyanızı oluşturun. Örneğin, example.js adlı bir dosya oluşturun ve bu dosyada bir fonksiyon tanımlayın:

  
// example.js
function sayHello() {
  console.log('Hello, world!');
}

module.exports = {
  sayHello: sayHello
};

Ardından, require() fonksiyonunu kullanarak modülü yükleyin ve içeriğini bir değişkene atayın:

  
// index.js
const exampleModule = require('./example');

exampleModule.sayHello(); // "Hello, world!" yazdırır

Yukarıdaki örnekte, example.js dosyasındaki sayHello fonksiyonu exampleModule adlı bir değişkene atanır. Daha sonra, exampleModule.sayHello() çağrısıyla, modüldeki sayHello fonksiyonu çağrılır ve konsola "Hello, world!" yazdırılır.

Not: Node.js, ES6 modüllerini de destekler. ES6 modülleri, import ve export anahtar kelimelerini kullanarak yüklenir ve kullanılır. Ancak, ES6 modülleri, CommonJS modüllerine kıyasla henüz tam olarak desteklenmemektedir.

React ortamında nasıl kullanırım? React, bir JavaScript kütüphanesi olduğu için, Node.js'de olduğu gibi require() fonksiyonunu kullanarak modülleri yüklemek yerine, import ve export anahtar kelimelerini kullanarak modülleri yükleyebilirsiniz. React uygulamaları genellikle Webpack gibi araçlar kullanarak paketlenir ve böylece import ve export anahtar kelimelerini kullanabilirsiniz.

Örneğin, aşağıdaki adımları izleyerek bir React bileşeni oluşturabilirsiniz:

Öncelikle, React ve ReactDOM modüllerini yükleyin:

  
npm install react react-dom

Ardından, bir React bileşeni oluşturmak için aşağıdaki kodu App.js dosyanıza ekleyin:

  
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

index.js dosyanıza aşağıdaki kodu ekleyerek, App.js dosyanızı kullanarak bir React uygulaması oluşturun:


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Bu kod, ReactDOM.render() fonksiyonunu kullanarak App bileşenini index.html dosyanızda belirtilen root adlı bir DOM öğesine ekler. React.StrictMode, uygulamanızda potansiyel sorunları yakalamak için kullanılır.

index.html dosyanıza aşağıdaki kodu ekleyerek, React uygulamanızı tarayıcınızda görüntüleyin:

  
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

Bu örnek, App.js dosyasında bir bileşen tanımlar ve index.js dosyasında ReactDOM.render() fonksiyonunu kullanarak bileşeni index.htmldosyanızdaki bir DOM öğesine ekler. npm start komutunu çalıştırarak, React uygulamanızı tarayıcınızda görüntüleyebilirsiniz.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

3743

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.