نظام التصدير والاستيراد (Export/Import) لترتيب ملفات مشروعك

أهلاً بكم أيها المطورون! اليوم سنتعمق في فهم كيفية استخدام نظام التصدير والاستيراد (Export/Import) في JavaScript، والذي يعد حجر الزاوية في تنظيم المشاريع الحديثة وتسهيل إعادة استخدام الكود.

الخطوة 1: فهم أساسيات التصدير (Export)

التصدير يسمح لنا بجعل الدوال، الكائنات، أو المتغيرات متاحة للاستخدام في ملفات JavaScript أخرى. هناك نوعان رئيسيان للتصدير: التصدير المسمى (Named Export) والتصدير الافتراضي (Default Export).

التصدير المسمى يسمح بتصدير عدة عناصر من ملف واحد، بينما التصدير الافتراضي يسمح بتصدير عنصر واحد فقط كـ "افتراضي".

مثال على التصدير المسمى (Named Export)

لنقم بإنشاء ملف باسم utils.js يحتوي على دالتين لتصديرهما:

// utils.js

// تصدير دالة مضافة لجمع عددين
export const add = (a, b) => a + b;

// تصدير دالة طرح لعددين
export const subtract = (a, b) => a - b;

// يمكن تصدير المتغيرات أيضًا
export const PI = 3.14159;

الخطوة 2: فهم أساسيات الاستيراد (Import)

بعد تصدير العناصر من ملف، نحتاج إلى استيرادها في ملف آخر لاستخدامها. يتم ذلك باستخدام كلمة المفتاح import.

مثال على استيراد العناصر المسمّاة

في ملف app.js، سنستورد الدوال والمتغيرات التي قمنا بتصديرها من utils.js.

// app.js

// استيراد الدوال والمتغيرات المسمّاة من ملف utils.js
import { add, subtract, PI } from './utils.js';

console.log("الجمع:", add(5, 3)); // النتيجة: الجمع: 8
console.log("الطرح:", subtract(10, 4)); // النتيجة: الطرح: 6
console.log("قيمة PI:", PI); // النتيجة: قيمة PI: 3.14159

الخطوة 3: التصدير والاستيراد الافتراضي (Default Export/Import)

التصدير الافتراضي مفيد عندما تريد تصدير عنصر واحد رئيسي من ملفك، ويمكن استيراده بأي اسم تريده.

يمكن أن يكون هناك تصدير افتراضي واحد فقط لكل ملف.

مثال على التصدير الافتراضي

لنقم بإنشاء ملف calculator.js يحتوي على دالة افتراضية تقوم بعملية حسابية معينة.

// calculator.js

// دالة افتراضية تقوم بضرب عددين
const multiply = (a, b) => a * b;

// تصدير الدالة كعنصر افتراضي
export default multiply;

مثال على استيراد العنصر الافتراضي

الآن، في ملف app.js، يمكننا استيراد الدالة multiply باستخدام اسم من اختيارنا.

// app.js (تكملة أو ملف جديد)

// استيراد الدالة الافتراضية من calculator.js. يمكن تسميتها بأي اسم هنا (مثلاً: calculateProduct)
import calculateProduct from './calculator.js';

console.log("الضرب:", calculateProduct(7, 2)); // النتيجة: الضرب: 14

الكود النهائي الكامل (React.js (JSX))

الآن، دعونا نجمع كل ما تعلمناه في مثال React.js بسيط يوضح كيفية استخدام export و import لتقسيم مكونات وتوابع المشروع.

src/components/Button.jsx

// src/components/Button.jsx
import React from 'react';

// تصدير مكون React باسم "Button" (تصدير مسمى)
export const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick} style={{ padding: '10px 20px', margin: '5px', cursor: 'pointer' }}>
      {children}
    </button>
  );
};

// تصدير دالة مساعدة (تصدير مسمى)
export const logMessage = (message) => {
  console.log(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">[LOG]: ${message}</code>);
};

src/utils/math.js

// src/utils/math.js

// تصدير دالة جمع (تصدير مسمى)
export const sum = (a, b) => a + b;

// تصدير دالة طرح (تصدير مسمى)
export const difference = (a, b) => a - b;

// تصدير دالة افتراضية للضرب
const multiply = (a, b) => a * b;
export default multiply; // تصدير افتراضي

src/App.js

// src/App.js
import React from 'react';
import './App.css'; // افتراض وجود ملف تنسيق

// استيراد المكون والدالة المسمّاة من Button.jsx
import { Button, logMessage } from './components/Button';

// استيراد الدوال المسمّاة من math.js
import { sum, difference } from './utils/math';

// استيراد الدالة الافتراضية من math.js (يمكن تسميتها بأي اسم، هنا product)
import product from './utils/math';

function App() {
  const handleButtonClick = () => {
    const resultSum = sum(10, 5);
    const resultDiff = difference(10, 5);
    const resultProd = product(10, 5);

    logMessage(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">عملية الجمع: ${resultSum}</code>); // [LOG]: عملية الجمع: 15
    logMessage(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">عملية الطرح: ${resultDiff}</code>); // [LOG]: عملية الطرح: 5
    logMessage(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">عملية الضرب: ${resultProd}</code>); // [LOG]: عملية الضرب: 50
    alert(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">النتائج: الجمع ${resultSum}, الطرح ${resultDiff}, الضرب ${resultProd}</code>);
  };

  return (
    <div className="App" style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>درس Export/Import في React</h1>
      <Button onClick={handleButtonClick}>
        احسب واعرض النتائج
      </Button>
      <p>افتح console المتصفح لمشاهدة رسائل الـ log.</p>
    </div>
  );
}

export default App; // تصدير المكون الرئيسي للتطبيق

النتيجة المتوقعة

عند تشغيل تطبيق React هذا، ستظهر صفحة ويب بسيطة تحتوي على عنوان وزر. عند النقر على الزر "احسب واعرض النتائج":

• سيتم تنفيذ الدوال sum، difference، و product المستوردة من ملف math.js.
• سيتم استدعاء دالة logMessage المستوردة من Button.jsx لطباعة النتائج في وحدة تحكم المتصفح (Console).
• ستظهر نافذة تنبيه (alert) في المتصفح تعرض ملخصًا للنتائج المحسوبة.
• رسائل الـ log في المتصفح ستكون كالتالي:
  • [LOG]: عملية الجمع: 15
  • [LOG]: عملية الطرح: 5
  • [LOG]: عملية الضرب: 50

← السابقالفهرسالتالي →