אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » ECMAScript 6 » ECMAScript 6 – מודולים

ECMAScript 6 – מודולים

רן בר-זיק נובמבר 6, 2016 7:07 am 6 תגובות

מודולים ב-JavaScript – למה צריך אותם ואיך ECMAScript 6 מאפשרת לנו ליצור אותם בקלות

המאמר הקודםECMAScript 6 – פונקציות למדא
המאמר הבאECMAScript 6 – פירוק מערך
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

ככל שכמות הפריימוורקים של ג'אווהסקריפט הלכה ועלתה. כך עלה הצורך במודולים – יחידות עצמאיות של קוד שאפשר לייבא לתוך הקוד שלך. יש המון שימושים לכך בג'אווהסקריפט וגם אתם משתמשים בה – מ-MooTools ו-jQuery ועד ל-common.js ול-require.js.

עד כה, הדרך הפשוטה ביותר לממש מודולים היתה באמצעות פונקציה אנונימית שמריצה את עצמה – מה שנקרא בשפות גויי הים: Immediately-Invoked Function Expression או בקיצור – IIFE. סוג של דצ"ך עד"ש באח"ב רק בג'אווהסקריפטית 🙂

אבל אני סוטה מהנושא. מה זו פונקציה אנונימית שמריצה את עצמה? משהו מהסוג הזה:


//Module Starts

(function(window){

    var sum = function(x, y){
        return x + y;
    }

    var sub = function(x, y){
        return x - y;
    }

    var math = {
        findSum: function(a, b){
            return sum(a,b);
        },

        findSub: function(a, b){
            return sub(a, b);
        }
    }

    window.math = math;

})(window);

//Module Ends


console.log(math.findSum(1, 2)); //3
console.log(math.findSub(1, 2)); //-1

אם זה נראה לכם מוכר, אתם לא תופתעו לגלות שגם jQuery משתמשת בסוג הזה של מודולים. אם זה לא נראה לכם מוכר, תסתכלו על הקוד. מה שיכול להראות לכם משונה זה הדבר הזה:


(function(window){

})(window);

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

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


//math.js fille


var sum = function(x, y){
    return x + y;
}

var sub = function(x, y){
    return x - y;
}

var math = {
    findSum: function(a, b){
        return sum(a,b);
    },

    findSub: function(a, b){
        return sub(a, b);
    }
}

//All the variable we want to expose outside needs to be property of "exports" object.
exports.math = math;


//some other js file
//no file extension required
var math = require("./math").math;
console.log(math.findSum(1, 2)); //3
console.log(math.findSub(1, 2)); //-1


הקוד שלעיל מתאר שני קבצים. החלק הראשון הוא קובץ בשם math.js והקובץ השני הוא קובץ כלשהו שקורא באמצעות פונקצית require לקובץ math.js ומפעיל אותו. אם אתם מכירים node.js, הסינטקס הזה אמור להיות לכם מאוד מוכר. הדיזיין הזה נקרא Asynchronous Module Definition או בראשי תבות AMD והספריה שמאפשרת אותו נקראת commonJS והיא זמינה בעיקר באפליקציות node.js. היא הרבה יותר נוחה ואינטואיטיבית מ-IIFE, אבל למרבה הצער היה אפשר לממש אותה בעיקר בסביבת השרת. נכון שיש כל מיני פתרונות לאפשר AMD בדפדפנים, אבל הם לא היו מספיק טובים. עד שהגיעה ECMAScript 6 שמאפשרת לנו להשתמש במודולים באופן אינהרנטי ופשוט בדיוק כמו AMD.

הגדרת המודול

הדוגמה שלי היא פשוטה ביותר, יש לי מודול שנקרא math ויש לו תכונה אחת שנקראת pi ומתודה אחת שנקראת sum. איך אצור את המודול? אצור תיקיה בשם lib וקובץ בשם math. כך הקובץ יראה:


export class Math {

    constructor() {
        this.sum = function(x, y){
            return x + y;
        }
        this.pi = = 3.141593;
    }

    findSum(a, b) {
        return this.sum(a, b);
    }

    getPi() {
        return this.sub(a, b);
    }
}

למי שעוקב אחר המדריך, הסינטקס של class יראה מאוד טבעי. למי שלא ולא מבין מה אני רוצה ממנו, זה הזמן לעבור על class. אפשר לראות שה-class חושף החוצה שתי מתודות חמודות. עוד משהו מאוד קריטי הוא שיש export. ה- export הוא מה שאני מייצא. עכשיו למימוש. בכל קובץ שהוא בפרויקט, אני רק צריך לבצע ייבוא של הקובץ הזה. להזכירכם – שמרתי אותו ב lib/math.js. אחרי הייבוא, אני אבצע instance ל-class לתוך משתנה וזה הכל!


import {Math} from 'lib/math';
var math = new Math();

console.log(math.findSum(1, 2)); //3
console.log(math.getPi()); //3.141593

מה קורה פה? לא צריך להבהל. הדבר הכי חשוב הוא ה-import שבו אני צריך להכניס שני דברים – את שם ה-class שאני עושה לו import (במקרה הזה Math) ואת שם הקובץ ומיקומו. אחרי שעשיתי את זה, ה-class ששמו בישראל הוא Math, זמין עבורי ואני יכול לעשות לו instance (כלומר לקרוא לו) ולהשתמש במתודות שלו בלי בעיה.

רוצים עוד דוגמה? למה לא? לא חייבים להשתמש ב-class אפילו. שימו לב לקובץ name שיצרתי:


//File: directory/name.js
export var environment = 'develop';
export var userName = 'Moshe';
export function sum(x,y) { return x + y;};

//Other file
import * as names from "directory/names";
console.log(names.environment); //develop
console.log(names.userName); //Moshe
console.log(names.sum(2,3)); //5

איזה יופי – כל דבר שאני עושה לו export, אני יכול לייבא אותו. שימו לב שאני יכול להשתמש ב


import {environment, userName, sum} as names from "directory/names";


או בכוכבית כדי לקבל את הכל. את ה-import אני עושה לתוך משתנה ועכשיו כל מה שעשיתי לו export חשוף בלי בעיה ובלי חשש להתנגשות סקופ וזיהום הסקופ שלי. ואל תגידו שזה לא פשוט ונחמד.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
למדריך המלא של ECMAScript 6
ECMAScript 6

6 תגובות

  1. משתמש אנונימי (לא מזוהה) הגב נובמבר 6, 2016 בשעה 9:19 am

    לא מכיר JS, אבל תבדוק את ()getPi

  2. משתמש אנונימי (לא מזוהה) הגב נובמבר 6, 2016 בשעה 11:08 pm

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

    • משתמש אנונימי (לא מזוהה) הגב נובמבר 12, 2016 בשעה 12:24 pm

      ES6 לא מוכר בשום דפדפן, בשביל זה יש Babel..
      בכל אופן, מדובר פשוט בסינטקס ג'אווה סקריפטי טהור.

      • רן בר-זיק הגב נובמבר 12, 2016 בשעה 4:02 pm

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

    • רן בר-זיק הגב נובמבר 12, 2016 בשעה 4:01 pm

      גם בדפדפן וגם בצד השרת. במאמר הראשון בסדרה הסברתי בדיוק איך בודקים איפה זה עובד.
      ספציפית הפיצ'ר הזה (נכון לעכשיו) לא עובד באופן טבעי באף מערכת שאני מכיר – אלא אם כן משתמשים ב-Babel וגם על כך מוסבר במאמר הראשון.

  3. משתמש אנונימי (לא מזוהה) הגב יוני 14, 2020 בשעה 7:53 pm

    אהבתי אחי
    עשית לי סדר

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

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

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד