Menu
Coddy logo textTech

ייצוא ברירת מחדל לעומת ייצוא בשם

חלק מהיחידה תכנות מונחה עצמים במסלול ה-JavaScript של Coddy. שיעור 10 מתוך 56.

במודולים של JavaScript יש לך שתי דרכים עיקריות לייצא את הקוד שלך: ייצואים בעלי שם וייצוא ברירת מחדל.

ייצואים בעלי שם מאפשרים לך לייצא כמה ערכים ממודול:

// 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

אם עליך לשנות את השם של ייבוא בעל שם, השתמש במילת המפתח as כדי ליצור כינוי:

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

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

ייצוא ברירת מחדל מאפשר לייצא ערך ראשי יחיד ממודול:

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

export default user;

בעת ייבוא של ייצוא ברירת מחדל, אפשר להשתמש בכל שם שרוצים בלי סוגריים מסולסלים:

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

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

מתי להשתמש בכל אחד מהם? השתמש בייצואים בעלי שם כאשר מודול מספק כמה כלי עזר קשורים (למשל, אוסף של פונקציות עזר). השתמש בייצוא ברירת מחדל כאשר למודול יש מטרה עיקרית אחת או ערך מרכזי אחד (למשל, מחלקה, רכיב או אובייקט תצורה).

אפשר לשלב את שני סוגי הייצוא במודול אחד:

// 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
challenge icon

אתגר

קל

יש לך שני קבצים. המשימה שלך היא להגדיר את הייצוא ב-calculator.js ואת הייבוא ב-main.js.

  1. ב-calculator.js: ייצא את calculate כ-ברירת מחדל ואת square כ-ייצוא בשם
  2. ב-main.js: ייבא את שתי הפונקציות בצורה נכונה

הבדיקות יבדקו:

  • נעשה שימוש בייצוא ברירת מחדל עבור calculate
  • נעשה שימוש בייצוא בשם עבור square
  • שני הייבואים פועלים בצורה נכונה

נסו בעצמכם

// TODO: ייבא כאן את שתי הפונקציות מתוך calculator.js


// בדיקה
console.log(calculate(10, 5, '+')); // אמור להציג 15
console.log(square(4));             // אמור להציג 16
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה תכנות מונחה עצמים

תרגלו בעצמכם: קומפיילר JavaScript אונליין