परिचय

ES6 (ईसीएमएस्क्रिप्ट 2015) ने जावास्क्रिप्ट के लिए एक मानकीकृत मॉड्यूल सिस्टम पेश किया, जिससे हमारे कोड को व्यवस्थित करने और साझा करने के तरीके में क्रांति आ गई। इस लेख में, हम ES6 आयात के अंदर और बाहर का पता लगाएंगे, वास्तविक दुनिया के उदाहरण प्रदान करेंगे और उनकी शक्ति और लचीलेपन को दर्शाने के लिए एक डेमो प्रोजेक्ट प्रदान करेंगे।

विषयसूची

1. बुनियादी आयात सिंटैक्स
2. नामित निर्यात और आयात
3. डिफ़ॉल्ट निर्यात और आयात
4. नामांकित और डिफ़ॉल्ट निर्यात का मिश्रण
5. आयात का नाम बदलना
6. सभी निर्यातों को एक वस्तु के रूप में आयात करना
7. गतिशील आयात
8. वास्तविक दुनिया के उदाहरण
9. डेमो प्रोजेक्ट: कार्य प्रबंधक
10. सर्वोत्तम अभ्यास और युक्तियाँ
11. निष्कर्ष

मूल आयात सिंटैक्स

ES6 में आयात करने का मूल सिंटैक्स है:

import { something } from './module-file.js';

यह उसी निर्देशिका में फ़ाइल मॉड्यूल-फ़ाइल.जेएस से कुछ नामक नामित निर्यात आयात करता है।

निर्यात और आयात नाम दिया गया

नामांकित निर्यात आपको एक मॉड्यूल से कई मान निर्यात करने की अनुमति देते हैं:

// math.js
export const add = (a, b) => a   b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // Output: 8
console.log(subtract(10, 4)); // Output: 6

डिफ़ॉल्ट निर्यात और आयात

डिफ़ॉल्ट निर्यात एक मॉड्यूल के लिए मुख्य निर्यातित मूल्य प्रदान करता है:

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import greet from './greet.js';

console.log(greet('Alice')); // Output: Hello, Alice!

नामांकित और डिफ़ॉल्ट निर्यात का मिश्रण

आप नामित और डिफ़ॉल्ट निर्यात को एक ही मॉड्यूल में जोड़ सकते हैं:

// utils.js
export const VERSION = '1.0.0';
export function helper() { /* ... */ }

export default class MainUtil { /* ... */ }

// main.js
import MainUtil, { VERSION, helper } from './utils.js';

console.log(VERSION);  // Output: 1.0.0
const util = new MainUtil();
helper();

आयात का नाम बदलना

नामकरण विवादों से बचने के लिए आप आयात का नाम बदल सकते हैं:

// module.js
export const someFunction = () => { /* ... */ };

// main.js
import { someFunction as myFunction } from './module.js';

myFunction();

सभी निर्यातों को एक वस्तु के रूप में आयात करना

आप एक मॉड्यूल से सभी निर्यातों को एक ही ऑब्जेक्ट के रूप में आयात कर सकते हैं:

// module.js
export const a = 1;
export const b = 2;
export function c() { /* ... */ }

// main.js
import * as myModule from './module.js';

console.log(myModule.a);  // Output: 1
console.log(myModule.b);  // Output: 2
myModule.c();

गतिशील आयात

गतिशील आयात आपको मांग पर मॉड्यूल लोड करने की अनुमति देता है:

async function loadModule() {
  const module = await import('./dynamicModule.js');
  module.doSomething();
}

loadModule();

वास्तविक दुनिया के उदाहरण

1. प्रतिक्रिया घटक:

// Button.js
import React from 'react';

export default function Button({ text, onClick }) {
  return {text};
}

// App.js
import React from 'react';
import Button from './Button';

function App() {
  return  alert('Clicked!')} />;
}

1. Node.js मॉड्यूल:

// database.js
import mongoose from 'mongoose';

export async function connect() {
  await mongoose.connect('mongodb://localhost:27017/myapp');
}

// server.js
import express from 'express';
import { connect } from './database.js';

const app = express();

connect().then(() => {
  app.listen(3000, () => console.log('Server running'));
});

डेमो प्रोजेक्ट: कार्य प्रबंधक

आइए ईएस6 आयात को क्रियान्वित रूप से प्रदर्शित करने के लिए एक सरल कार्य प्रबंधक बनाएं:

// task.js
export class Task {
  constructor(id, title, completed = false) {
    this.id = id;
    this.title = title;
    this.completed = completed;
  }

  toggle() {
    this.completed = !this.completed;
  }
}

// taskManager.js
import { Task } from './task.js';

export class TaskManager {
  constructor() {
    this.tasks = [];
  }

  addTask(title) {
    const id = this.tasks.length   1;
    const task = new Task(id, title);
    this.tasks.push(task);
    return task;
  }

  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.toggle();
    }
  }

  getTasks() {
    return this.tasks;
  }
}

// app.js
import { TaskManager } from './taskManager.js';

const manager = new TaskManager();

manager.addTask('Learn ES6 imports');
manager.addTask('Build a demo project');

console.log(manager.getTasks());

manager.toggleTask(1);

console.log(manager.getTasks());

इस डेमो को चलाने के लिए, आपको एक जावास्क्रिप्ट वातावरण का उपयोग करना होगा जो ईएस6 मॉड्यूल का समर्थन करता है, जैसे कि नोड.जेएस - प्रायोगिक-मॉड्यूल ध्वज के साथ या वेबपैक या रोलअप जैसे बंडलर के साथ एक आधुनिक ब्राउज़र।

सर्वोत्तम अभ्यास और युक्तियाँ

1. कई कार्यों/मूल्यों के लिए नामित निर्यात का उपयोग करें, और मुख्य कार्यक्षमता के लिए डिफ़ॉल्ट निर्यात का उपयोग करें।
2. अपने मॉड्यूल को केंद्रित और एकल-उद्देश्यीय रखें।
3. अपनी फ़ाइलों और निर्यातों के लिए सुसंगत नामकरण परंपराओं का उपयोग करें।
4. मॉड्यूल के बीच परिपत्र निर्भरता से बचें।
5. ब्राउज़र-आधारित परियोजनाओं के लिए वेबपैक या रोलअप जैसे बंडलर का उपयोग करने पर विचार करें।
6. बड़े अनुप्रयोगों में कोड-विभाजन और प्रदर्शन अनुकूलन के लिए गतिशील आयात का उपयोग करें।

निष्कर्ष

ES6 आयात जावास्क्रिप्ट कोड को व्यवस्थित करने का एक शक्तिशाली और लचीला तरीका प्रदान करता है। विभिन्न आयात और निर्यात सिंटैक्स को समझकर, आप अधिक मॉड्यूलर, रखरखाव योग्य और कुशल एप्लिकेशन बना सकते हैं। यहां दिए गए डेमो प्रोजेक्ट और वास्तविक दुनिया के उदाहरण आपको अपनी परियोजनाओं में ईएस6 आयात का उपयोग करने के लिए एक ठोस आधार देंगे।

अपने मॉड्यूल और आयात की संरचना कैसे करें, यह तय करते समय हमेशा अपने प्रोजेक्ट की विशिष्ट आवश्यकताओं पर विचार करना याद रखें। हैप्पी कोडिंग!