כיצד לייבא ולייצא פונקציות ב-JavaScript

כיום, JavaScript משחק תפקיד עצום בפיתוח אתרים. מפתחי קצה משתמשים ב-JavaScript כדי ליצור יישומי אינטרנט אינטראקטיביים. כתוצאה מכך, חלה עלייה בביקוש למפתחי JavaScript.

בהחלט, JavaScript התפתח עם השנים. ES6 הציג תכונות חדשות רבות לשפה. אחת מהן היא דרך לשתף קודים בקלות בין קובצי JavaScript.

ייבוא ​​וייצוא של פונקציות עבור JavaScript הן תכונות חדשות שיהפכו אותך למפתח טוב יותר. הנה איך התכונות האלה פועלות.

מהו מודול JavaScript?

מודול JavaScript הוא קובץ JavaScript המכיל אוסף של קוד לשימושך. מודולים נכתבים בדרך כלל בקבצים נפרדים ומיובאים באמצעות ה יְבוּא מילת מפתח. זה חוסך זמן ומאמץ כי אתה יכול לעשות בו שימוש חוזר מאוחר יותר.

לדוגמה, אם יש לך פונקציה שנקראת calculateSum(), אתה יכול לכלול אותו בקובץ אחר ולהפוך אותו זמין בכל מקום בפרויקט שלך באמצעות ה יְצוּא ו יְבוּא JavaScript פועל ללא כל מהומה.

אחד היתרונות של שימוש במודולים הוא שזה עוזר לשמור על הקוד שלך מאורגן. זה גם הופך את הקוד שלך לניתן יותר לניהול וקל יותר לניפוי באגים.

על מנת להשתמש בקובץ JavaScript כמודול, עליך ליצור סקריפט במסמך ה-HTML שלך עם א type="module".

<סוג סקריפט="מודול" src="fileName.js"></script>

ישנם שני סוגים של מודולים:

1. מודולי ECMAScript: מודולי JavaScript סטנדרטיים ונתמכים על ידי כל הדפדפנים הגדולים.
2. מודולי CommonJS: ישנים יותר, והם אינם נתמכים באופן נרחב.

אנו נתמקד כאן במודולי ECMAScript. אם צריך, ראה שלנו מבוא ל-JavaScript כדי לרענן את היסודות.

כיצד לייצא פונקציות ב-JavaScript

ב-JavaScript, פונקציות הן אובייקטים מהשורה הראשונה שניתן להעביר כארגומנטים בנוסף לשימוש בעצמם. ייצוא פונקציות הוא דרך טובה להעביר אותן לתוכניות אחרות. הוא משמש גם כאשר אתה רוצה ליצור ספריות לשימוש חוזר.

ייצוא פונקציות ב-JavaScript נעשה באמצעות יְצוּא פוּנקצִיָה. ה יְצוּא function מייצאת פונקציה נתונה לשימוש בקובץ או סקריפט אחר. על ידי ייצוא הפונקציות שלנו, נוכל להשתמש בהם באופן חופשי בקבצים או סקריפטים אחרים מבלי לדאוג לבעיות רישוי.

ישנן שתי דרכים להשתמש ב- יְצוּא לתפקד ביעילות. נעבור על אלה עם דוגמאות קוד.

נניח שיש לך קובץ getPersonalDetails.js בעל פונקציה שמחזירה את השם המלא של משתמש לאחר קלט הנחיה. הפונקציה נראית כך:

פוּנקצִיָהgetFullName(שם מלא){
 fullName = prompt('מה השם הפרטי שלך');
לְנַחֵם.log (שם מלא);
 }

1. אתה יכול לייצא פונקציה זו על ידי שימוש פשוט ב- יְצוּא מילת מפתח ואחריה שם הפונקציה בסוגריים מסולסלים. זה נראה כמו זה:

   יְצוּא {getFullName};

2. השיטה השנייה היא להוסיף את יְצוּא מילת מפתח ממש לפני הצהרת הפונקציה.

   יְצוּאפוּנקצִיָהgetFullName (שם מלא){...}

ניתן לייצא פונקציות מרובות באמצעות השיטה הראשונה. זה נעשה על ידי הכללת שמות הפונקציות הרצויות בסוגריים המתולתלים. הפונקציות מופרדות באמצעות פסיק.

לדוגמה: נניח שיש לך שלוש פונקציות שלנו getPersonalDetails.js קוֹבֶץ - getFullName(),getEmail(), getDob(). ניתן לייצא את הפונקציות על ידי הוספת שורת הקוד הבאה:

ייצוא {getFullName, getEmail, getDob};

כיצד לייבא פונקציות ב-JavaScript

כדי להשתמש במודול, תחילה עליך לייבא אותו. ניתן לייבא כל פונקציה באמצעות הפניה לנתיב מלא.

ייבוא ​​פונקציות הוא די פשוט. ל-JavaScript יש תכונה מובנית לייבא פונקציות משלך מקבצים אחרים. אם ברצונך לגשת לפונקציות הללו ממודולים אחרים, מומלץ לכלול הצהרת פונקציות עבור כל כלי השירות שלך.

פונקציה לייבוא ​​כבר מיוצאת בקובץ המקורי שלה.

אתה יכול לייבא פונקציות מקובץ אחר באמצעות ה יְבוּא פונקציונליות של מילות מפתח. יְבוּא מאפשר לך לבחור איזה חלק של קובץ או מודול לטעון.

כך אתה מייבא את שלנו getFullName לתפקד מ getPersonalDetails.js:

יְבוּא {getFullName} מ './getPersonalDetails.js'

זה יהפוך את הפונקציה הזו לזמינה לשימוש בקובץ הנוכחי שלנו.

על מנת לייבא פונקציות מרובות, הפונקציות המיועדות לייבוא ​​כלולות בסוגריים המתולתלים. כל אחד מהם מופרד בפסיק (,).

יְבוּא {getFullName, getEmail, getDob} מ './getPersonalDetails.js'

יש דרך אחרת להשתמש ב- יְבוּא פונקציונליות. זה מאפשר לנו לייבא את כל הייצוא בקובץ מסוים. זה נעשה באמצעות ייבוא ​​* כ תחביר.

אתה יכול לייבא את כל היצוא שלנו getPersonalDetails.js על ידי הוספת שורת הקוד הבאה:

יְבוּא * כפי ש מודול פרטים אישיים מ './getPersonalDetails.js'

האמור לעיל ייצור אובייקט בשם מודול פרטים אישיים.

זה רק שם משתנה, אתה יכול לתת לו שם כל דבר.

אובייקט זה מכיל את כל הייצוא שלנו getPersonalDetails.js. הפונקציות מאוחסנות באובייקט זה וניתן לגשת אליהן באופן שבו אתה ניגש לכל מאפיין אובייקט.

לדוגמה, אנו יכולים לגשת ל- getFullName פונקציה על ידי הוספת שורת הקוד הבאה

מודול פרטים אישיים.getFullName();

מהי ברירת המחדל של ייצוא?

ברירת המחדל של ייצוא היא פונקציונליות ייצוא יוצאת דופן. זה משמש אם רק משתנה אחד מיוצא מקובץ. הוא משמש גם ליצירת ערך חלופי עבור קובץ או מודול.

להלן דוגמה שבה השתמשנו ב- getFullName לתפקד כברירת מחדל:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהgetFullName (שם מלא){...}

אתה לא יכול לקבל יותר מערך אחד כברירת מחדל בכל מודול או קובץ.

פונקציה המשמשת כברירת מחדל מיובאת בצורה שונה. הנה איך לייבא את שלנו getFullName פונקציה המשמשת כברירת מחדל:

יְבוּא שם מלא מ './getPersonalDetails.js'

להלן ההבדלים:

1. אין פלטות מתולתלות סביב הערך המיובא, שם מלא.
2. שם מלא הנה רק שם משתנה. הוא מאחסן את הערך של פונקציית ברירת המחדל אשר תהיה.

הגדל את פונקציות ה-JavaScript שלך

מודולי JavaScript הם קטעי קוד שניתן לעשות בהם שימוש חוזר בחלקים אחרים של הקוד שלך, באמצעות פונקציות הייבוא ​​והייצוא של JavaScript. הם נכתבים בדרך כלל בקבצים נפרדים, ומיובאים באמצעות מילת המפתח ייבוא. אחד היתרונות של שימוש במודולים הוא שזה עוזר לשמור על הקוד שלך מאורגן. זה גם הופך את הקוד שלך לניתן יותר לניהול וקל יותר לניפוי באגים.