מבוא למערכות מודול ב-JavaScript

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

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

כאן תכסה את מערכות המודולים המשמשות ביישומי JavaScript, כולל תבנית המודול, מערכת המודול CommonJS המשמשת ברוב יישומי Node.js, ומערכת ES6 Module.

תבנית המודול

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

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

להלן המבנה הבסיסי של IIFE:

(פוּנקצִיָה () {
//קוד כאן
})();
(() => {
//קוד כאן
})();
(אסינכרון () => {
//קוד כאן
})();

בלוק הקוד שלמעלה מתאר IIFEs המשמשים בשלושה הקשרים שונים.

נעשה שימוש ב-IIFEs מכיוון שמשתנים שהוכרזו בתוך פונקציה מותאמים לפונקציה, מה שהופך אותם בלבד נגיש בתוך הפונקציה, ומכיוון שפונקציות מאפשרות לך להחזיר נתונים (הופכים אותם לציבוריים נגיש).

לדוגמה:

const פו = (פוּנקצִיָה () {
const sayName = (שם) => {
לְנַחֵם.עֵץ(`היי, שמי ${name}`);
 };
//חשיפת המשתנים
לַחֲזוֹר {
 callSayName: (שם) => sayName (שם),
 };
})();
//גישה לשיטות חשופות
foo.callSayName("בַּר");

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

בלוק הקוד למעלה מכיל IIFE. ה-IIFE מכיל פונקציה שהיא מנגישה על ידי החזרתה. כל המשתנים המוצהרים ב-IIFE מוגנים מההיקף הגלובלי. לפיכך, השיטה (sayName) נגיש רק דרך הפונקציה הציבורית, callSayName.

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

מערכת המודול CommonJS

מערכת המודול CommonJS היא פורמט מודול שהוגדר על ידי קבוצת CommonJS כדי לפתור בעיות בהיקף JavaScript על ידי הפעלת כל מודול במרחב השמות שלו.

מערכת המודול CommonJS פועלת על ידי אילוץ מודולים לייצא במפורש משתנים שהם רוצים לחשוף למודולים אחרים.

מערכת מודול זו נוצרה עבור JavaScript בצד השרת (Node.js) וככזה, אינו נתמך כברירת מחדל בדפדפנים.

כדי ליישם מודולי CommonJS בפרויקט שלך, תחילה עליך לאתחל את NPM ביישום שלך על ידי הפעלת:

npm init -y

ניתן לייבא משתנים המיוצאים בעקבות מערכת המודול CommonJS כך:

//randomModule.js
//חבילה מותקנת
const installedImport = לִדרוֹשׁ("שם חבילה");
// מודול מקומי
const localImport = לִדרוֹשׁ("/path-to-module");

מודולים מיובאים ב-CommonJS באמצעות ה- לִדרוֹשׁ הצהרה, שקוראת קובץ JavaScript, מבצעת את קובץ הקריאה ומחזירה את יצוא לְהִתְנַגֵד. ה יצוא האובייקט מכיל את כל הייצוא הזמינים במודול.

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

יצוא בשם

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

לדוגמה:

//main.js
exports.myExport = פוּנקצִיָה () {
לְנַחֵם.log("זוהי דוגמה שֶׁל בשם יְצוּא");
};
exports.anotherExport = פוּנקצִיָה () {
לְנַחֵם.log("זו עוד דוגמה שֶׁל בשם יְצוּא");
};

בבלוק הקוד למעלה, אתה מייצא שתי פונקציות בשם (myExport ו יצוא אחר) על ידי הצמדתם ל- יצוא לְהִתְנַגֵד.

באופן דומה, אתה יכול לייצא את הפונקציות כך:

const myExport = פוּנקצִיָה () {
לְנַחֵם.log("זוהי דוגמה שֶׁל בשם יְצוּא");
};
const אחר ייצוא = פוּנקצִיָה () {
לְנַחֵם.log("זו עוד דוגמה שֶׁל בשם יְצוּא");
};
מודול.יצוא = {
 myExport,
 יצוא אחר,
};

בבלוק הקוד למעלה, אתה מגדיר את יצוא מתנגד לפונקציות הנקובות בשם. אתה יכול להקצות רק את יצוא חפץ לאובייקט חדש דרך ה מודול לְהִתְנַגֵד.

הקוד שלך יזרוק שגיאה אם ​​תנסה לעשות זאת בדרך זו:

//דרך הלא נכונה
יצוא = {
 myExport,
 יצוא אחר,
};

ישנן שתי דרכים שבהן תוכל לייבא יצוא בשם:

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

לדוגמה:

//otherModule.js
const פו = לִדרוֹשׁ("./רָאשִׁי");
פו.myExport();
פו.אחר ייצוא();

2. דה-מבנה של היצוא מה- יצוא לְהִתְנַגֵד.

לדוגמה:

//otherModule.js
const { myExport, anotherExport } = לִדרוֹשׁ("./רָאשִׁי");
myExport();
anotherExport();

דבר אחד נפוץ בכל שיטות הייבוא, יש לייבא אותם באותם שמות שאיתם יוצאו.

ברירת מחדל לייצוא

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

לדוגמה:

//main.js
מעמדפו{
 bar() {
לְנַחֵם.log("זוהי דוגמה שֶׁל א בְּרִירַת מֶחדָליְצוּא");
 }
}
מודול.יצוא = Foo;

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

ייבוא ​​יצוא ברירת מחדל דומה לייבוא ​​יצוא בשם, פרט לכך שאתה יכול להשתמש בכל שם שתבחר כדי לייבא אותם.

לדוגמה:

//otherModule.js
const בר = לִדרוֹשׁ("./רָאשִׁי");
const חפץ = חָדָשׁ בַּר();
לְהִתְנַגֵד.בַּר();

בבלוק הקוד שלמעלה נקרא הייצוא המוגדר כברירת מחדל בַּר, למרות שאתה יכול להשתמש בכל שם שתבחר.

מערכת המודולים ES6

מערכת המודולים ECMAScript Harmony, הידועה בכינויו מודולי ES6, היא מערכת מודול JavaScript הרשמית.

מודולי ES6 נתמכים על ידי דפדפנים ושרתים, אם כי אתה דורש מעט תצורה לפני השימוש בהם.

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

ככה:

//index.html
<script src="./app.js" סוג="מודול"></script>

ב-Node.js, עליך להגדיר סוּג ל מודול אצלך package.json קוֹבֶץ.

ככה:

//package.json
"סוּג":"מודול"

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

יצוא בשם

בדומה לייבוא ​​בעל שם במודולי CommonJS, הם מזוהים לפי השמות שהוקצו להם ומאפשרים ייצוא מרובים לכל מודול.

לדוגמה:

//main.js
יְצוּאconst myExport = פוּנקצִיָה () {
לְנַחֵם.log("זוהי דוגמה שֶׁל בשם יְצוּא");
};
יְצוּאconst אחר ייצוא = פוּנקצִיָה () {
לְנַחֵם.log("זו עוד דוגמה שֶׁל בשם יְצוּא");
};

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

ניתן לייבא יצוא בשם למודול אחר ב-ES6 באותם דרכים כמו CommonJS:

• ביטול המבנה של היצוא הנדרש מה יצוא לְהִתְנַגֵד.
• ייבוא ​​כל הייצוא כאובייקט בודד וגישה אליהם בנפרד באמצעות סימון הנקודות.

הנה דוגמה לביטול מבנה:

//otherModule.js
יְבוּא { myExport, anotherExport } מ "./main.js";
myExport()
anotherExport()

הנה דוגמה לייבוא ​​האובייקט כולו:

יְבוּא * כפי ש פו מ './main.js'
פו.myExport()
פו.אחר ייצוא()

בגוש הקוד למעלה, הכוכבית (*) פירושו "הכל". ה כפי ש מילת מפתח מקצה את יצוא להתנגד למחרוזת שאחריה, במקרה זה, פו.

ברירת מחדל לייצוא

בדומה לייצוא ברירת מחדל ב-CommonJS, הם מזוהים בכל שם לבחירתך, ותוכל לקבל רק ייצוא ברירת מחדל אחד לכל מודול.

לדוגמה:

//main.js
מעמדפו{
 bar() {
לְנַחֵם.log("זוהי דוגמה שֶׁל א בְּרִירַת מֶחדָליְצוּא");
 }
}
יְצוּאבְּרִירַת מֶחדָל פו;

ייצוא ברירת מחדל נוצר על ידי הוספת ה בְּרִירַת מֶחדָל מילת מפתח אחרי ה יְצוּא מילת מפתח, ואחריה שם הייצוא.

ייבוא ​​יצוא ברירת מחדל דומה לייבוא ​​יצוא בשם, פרט לכך שאתה יכול להשתמש בכל שם שתבחר כדי לייבא אותם.

לדוגמה:

//otherModule.js
יְבוּא בַּר מ "./main.js";

יצוא מעורב

תקן מודול ES6 מאפשר לך לקבל גם ייצוא ברירת מחדל וגם ייצוא בשם במודול אחד, בניגוד ל-CommonJS.

לדוגמה:

//main.js
יְצוּאconst myExport = פוּנקצִיָה () {
לְנַחֵם.log("זו עוד דוגמה שֶׁל בשם יְצוּא");
};
מעמדפו{
 bar() {
לְנַחֵם.log("זוהי דוגמה שֶׁל א בְּרִירַת מֶחדָליְצוּא");
 }
}
יְצוּאבְּרִירַת מֶחדָל פו;

חשיבות המודולים

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