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

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

איפור של סרטון היום

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

---

---

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

כיצד לבדוק אם קישור בטוח

תבנית המודול

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

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

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

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})(); 

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

---

---

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

לדוגמה:

---

---

const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar"); 

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

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

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

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

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

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

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

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

npm init -y 

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

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module"); 

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

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

יצוא בשם

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

לדוגמה:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 

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

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

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
}; 

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

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

כיצד להוריד אפליקציה לסמסונג טלוויזיה

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
}; 

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

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

לדוגמה:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

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

לדוגמה:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport(); 

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

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

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

לדוגמה:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo; 

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

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

לדוגמה:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar(); 

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

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

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

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

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

ככה:

//index.html 
<script src="./app.js" type="module"></script> 

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

ככה:

//package.json 
"type":"module" 

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

יצוא בשם

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

לדוגמה:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 

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

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

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

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

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport() 

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

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport() 

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

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

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

לדוגמה:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo; 

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

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

האם עלי להשתמש ב 32 או 64 ביט

לדוגמה:

//otherModule.js 
import Bar from "./main.js"; 

יצוא מעורב

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

לדוגמה:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo; 

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

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