الـ Default مقابل الـ Named Exports

جزء من قسم البرمجة كائنية التوجه في رحلة JavaScript على Coddy. الدرس 10 من 56.

في وحدات JavaScript، لديك طريقتان رئيسيتان لتصدير التعليمات البرمجية الخاصة بك: عمليات التصدير المسماة وعمليات التصدير الافتراضية.

تسمح لك Export المسماة بتصدير قيم متعددة من وحدة:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

عند استيراد الصادرات المسماة، يجب استخدام الأسماء نفسها تمامًا داخل الأقواس المعقوفة:

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

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

إذا احتجت إلى إعادة تسمية named import، فاستخدم الكلمة المفتاحية as لإنشاء alias:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

default Exports تتيح لك تصدير قيمة رئيسية واحدة من وحدة:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

عند import default export، يمكنك استخدام أي اسم تريده دون أقواس معقوفة:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

متى تستخدم أيًّا منها؟ استخدم named exports عندما توفّر وحدةٌ ما العديد من الأدوات المساعدة المترابطة (مثل مجموعة من الدوال المساعدة). استخدم default export عندما تكون للوحدة غاية أساسية واحدة أو قيمة رئيسية واحدة (مثل فئة أو مكوّن أو كائن إعدادات).

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

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

واستوردها معًا:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4

التحدي

سهل

لديك ملفان. مهمتك هي إعداد عمليات التصدير في calculator.js وعمليات الاستيراد في main.js.

في calculator.js: صدّر calculate باعتباره default وsquare باعتباره named
في main.js: استورد الدالتين both بشكل صحيح

ستتحقق الاختبارات مما يلي:

استخدام التصدير default مع calculate
استخدام التصدير named مع square
عمل عمليتي الاستيراد both بشكل صحيح

جرّب بنفسك

// TODO: استورد كلتا الدالتين هنا من calculator.js


// اختبار
console.log(calculate(10, 5, '+')); // يجب أن يُخرج 15
console.log(square(4));             // يجب أن يُخرج 16