Articles
מבוא ל-JavaScript
מודולים בג'אווהסקריפט

מודולים בג'אווהסקריפט

מאמר זה מסביר את המודולים בג'אווהסקריפט.

YouTube Video

מודולים בג'אווהסקריפט

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

הקונספט של מודולים בג'אווהסקריפט

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

סוגי מודולים עיקריים

ישנן מספר מערכות מודולים בג'אווהסקריפט. הנפוצות ביותר הן ES Modules (ESM) ו-CommonJS.

  • מודולים של ES הם מערכת מודולים שהוצגה ב-ECMAScript 2015 (ES6), שמגדירה מודולים באמצעות מילות המפתח import ו-export. מערכת זו נמצאת בשימוש נרחב הן בצד הלקוח (דפדפנים) והן בצד השרת (Node.js).

  • **‏CommonJS‏ היא מערכת מודולים המשמשת בעיקר ב-‏Node.js‏. מודולים מוגדרים באמצעות require ו-module.exports לייבוא וייצוא קבצים.

פרטים על ES Modules (ESM)

ES Modules היא מערכת המודולים התקנית בג'אווהסקריפט, שמאפשרת החלפה קלה של פונקציונליות בין מודולים. בדפדפנים וב-Node.js משתמשים במערכת זו להגדרת וייבוא מודולים.

export ו-import

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

דוגמה: ייצוא מודול

ניתן לייצא מודולים ב-ES Modules כך:.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

במודול math.mjs זה, הפונקציות add ו-subtract מיוצאות. ניתן לייבא פונקציות אלו ממודולים אחרים.

כאן, הסיומת .mjs מציינת במפורש קובץ JavaScript בפורמט ES Modules. ב־Node.js, סיומת הקובץ קובעת האם מדובר ב־CommonJS או ES Modules. עם זאת, אם מצוין type: "module" ב־package.json, קבצים עם סיומת .js נחשבים כברירת מחדל כ־ES Modules.

דוגמה: ייבוא מודול

ניתן לייבא מודולים ב־ES Modules כך:.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

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

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

ישנן שתי שיטות ייצוא עבור מודולים. אחת היא ייצוא בשם, והשנייה היא ייצוא ברירת מחדל.

  • משתמשים בייצוא בשם כאשר מייצאים מספר פונקציות או משתנים ממודול. ניתן לבצע מספר ייצואים, ובעת ייבוא, מקבלים אותם עם שמות מוגדרים.
1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}
1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15
  • משתמשים בייצוא ברירת מחדל כאשר מייצאים פונקציה או מחלקה יחידה ממודול. בעת ייבוא, ניתן לקבל אותו בכל שם.
1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}
1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

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

דוגמה לשימוש בצד הלקוח (דפדפן).

דוגמה: ייצוא מודול

ניתן לייצא מודולים ב-ES Modules כך:.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

במודול utils.js זה, הפונקציות sum ו-multiply מיוצאות.

דוגמה: ייבוא מודול

ניתן לייבא מודולים בצד הלקוח כך:.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>
  • על ידי הגדרת מאפיין type של תגית <script> ל־module, ניתן להשתמש בתחביר מודולים של ES כמו import ו-export בתוך HTML.
  • פקודת import טוענת את utils.js החיצוני ומציגה את התוצאה.

פרטים על CommonJS

CommonJS הוא מערכת מודולים המשמשת בעיקר ב-Node.js. מודולים מיוצאים ומיובאים באמצעות module.exports ו-require.

require ו-module.exports

ב-CommonJS, משתמשים ב-module.exports כדי לייצא מודולים. בנוסף, משתמשים ב-require כדי להשתמש במודולים מקבצים אחרים.

דוגמה: ייצוא מודול

ניתן לייצא מודולים ב־CommonJS כך:.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};
דוגמה: ייבוא מודול

ניתן לייבא מודולים ב־CommonJS כך:.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

ב-Node.js, מערכת המודולים ברירת המחדל היא CommonJS, אך נתמכים גם ES Modules.

ייבוא דינמי

ב-JavaScript ניתן לייבא מודולים בצורה דינמית באמצעות import(). שיטה זו משתמשת בעיבוד אסינכרוני כדי לטעון מודולים בעת הצורך.

יבוא דינמי ניתן לביצוע כך:.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

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

יתרונות המודולים

  • שימוש חוזר בקוד

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

  • שיפור תחזוקה

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

  • הימנעות מהתנגשויות שמות מרחב

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

  • ניהול תלות

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

סיכום

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

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות נוספות של מחלקות בג'אווהסקריפטניהול שגיאות בג'אווה-סקריפט