ייצוא ברירת מחדל לעומת ייצוא בשם
חלק מהיחידה תכנות מונחה עצמים במסלול ה-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אתגר
קליש לך שני קבצים. המשימה שלך היא להגדיר את הייצוא ב-calculator.js ואת הייבוא ב-main.js.
- ב-
calculator.js: ייצא אתcalculateכ-ברירת מחדל ואתsquareכ-ייצוא בשם - ב-
main.js: ייבא את שתי הפונקציות בצורה נכונה
הבדיקות יבדקו:
- נעשה שימוש בייצוא ברירת מחדל עבור
calculate - נעשה שימוש בייצוא בשם עבור
square - שני הייבואים פועלים בצורה נכונה
נסו בעצמכם
// TODO: ייבא כאן את שתי הפונקציות מתוך calculator.js
// בדיקה
console.log(calculate(10, 5, '+')); // אמור להציג 15
console.log(square(4)); // אמור להציג 16השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה תכנות מונחה עצמים
1אובייקטים ומילת המפתח this
סקירה מהירה: אובייקטיםהוספת מתודות לאובייקטיםהבנת מילת המפתח thisפונקציות בנאימילת המפתח newאתגר סיכום7הורשה ומילת המפתח extends
הורשההקשר "הוא-סוג-של"מילת המפתח extendsהמתודה super()הורשת מאפיינים ומתודותאתגר סיכום8ארגון קוד OOP
ארגון מחלקות במודוליםתרגלו בעצמכם: קומפיילר JavaScript אונליין