"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > فهم الصادرات والواردات في جافا سكريبت

فهم الصادرات والواردات في جافا سكريبت

تم النشر بتاريخ 2024-11-09
تصفح:379

Understanding Exports and Imports in JavaScript

في JavaScript، الوحدات هي وحدات قائمة بذاتها من التعليمات البرمجية التي يمكنها كشف الأصول لوحدات أخرى باستخدام تصدير واستهلاك الأصول من وحدات أخرى باستخدام الاستيراد. هذه الآلية ضرورية لبناء تعليمات برمجية معيارية وقابلة لإعادة الاستخدام في تطبيقات JavaScript الحديثة.

الصادرات الافتراضية

  • يمكن أن تحتوي الوحدة على تصدير افتراضي واحد فقط.
  • لتصدير أصل افتراضي، استخدم الكلمة الأساسية الافتراضية قبل الكيان المُصدَّر.
  • لاستيراد تصدير افتراضي، يمكنك تعيينه مباشرة لمتغير دون تحديد الاسم المصدر:
// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

الصادرات المسماة

  • يمكن أن تحتوي الوحدة النمطية على عدة عمليات تصدير مسماة.
  • لتصدير أصل مسمى، استخدم الكلمة الأساسية للتصدير قبل الكيان المصدر وقم بتسميته.
  • لاستيراد عمليات التصدير المسماة، يجب عليك تحديد أسماء الأصول التي تريد استيرادها:
// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

الجمع بين عمليات التصدير الافتراضية والمسماة

يمكنك الحصول على تصدير افتراضي وصادرات مسماة في وحدة واحدة:

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

لاستيراد كل من الصادرات الافتراضية والمسماة:

import greet, { farewell } from './myModule';

النقاط الرئيسية التي يجب تذكرها

  • يتم استخدام التصدير لكشف الأصول من الوحدة النمطية.
  • يتم استخدام الاستيراد لاستهلاك الأصول من الوحدات الأخرى.
  • يمكن أن تحتوي الوحدة على تصدير افتراضي واحد فقط.
  • يمكن استيراد الصادرات المسماة بشكل فردي أو جماعي.
  • الأسماء المستخدمة للاستيراد عشوائية وليس من الضروري أن تتطابق مع الأسماء المستخدمة في الوحدة المصدرة.

مثال عملي

فكر في مكون React:

import React from 'react';

export default function Greeting({ name }) {
  return 

Hello, {name}!

; }

في هذا المثال، يتم تصدير مكون الترحيب باعتباره التصدير الافتراضي. يمكن استيراده واستخدامه في مكونات أخرى:

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

من خلال فهم عمليات التصدير والاستيراد، يمكنك تنظيم التعليمات البرمجية وإعادة استخدامها بشكل فعال في مشاريع JavaScript الخاصة بك.

بيان الافراج تم نشر هذه المقالة على: https://dev.to/shieldstring/understanding-exports-and-imports-in-javascript-3gm?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3