אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
ראשי » מדריכים » ES20XX » import דינמי ב-ES2020

import דינמי ב-ES2020

רן בר-זיק נובמבר 10, 2019 7:07 am תגובה אחת

ייבוא קבצים דינמית באמצעות פונקצית import חדשה.

»ES2020 – globalThis
»ES2020 – מספרים גדולים בג’אווהסקריפט
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.

פיצ׳ר מגניב במיוחד שנכנס ל-ES2020 הוא import דינמי שניתן להשתמש בו גם כ-lazyload.

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

export default class MyModule {
  constructor() {
    this.myText = 'Hello World!';
  }
  sayHello() {
    console.log(this.myText);
  }
}

איך אשתמש בו? משהו בסגנון הזה:

import MyModule from ('/path/to/MyModule.js');
const myModule = new MyModule;
myModule.sayHello();

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

SyntaxError: ... 'import' and 'export' may only appear at the top level.

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

התקן החדש מאפשר לנו להשתמש ב-import כפונקציה בכל חלק של הקוד שלנו. מדובר בפונקציה אסינכרונית שמחזירה לנו פרומיס. אם אתם לא יודעים מה זה פרומיס, במאמר הזה יש הסבר (הגיעה עם תקן ES6) וגם async-await (בתקן ES2017).

עכשיו אנו יכולים להשתמש ב-import במגוון דרכים. ראשית, סתם להעביר אליו את שם הקובץ שאנו רוצים לטעון ואז זה יהיה בדיוק כאילו עשינו script src. אבל מה? ייטען רק כשאנחנו רוצים. בדוגמה הזו למשל, ה-import מתקיים רק כשלוחצים על הכפתור.

See the Pen Dynamic import() in action by Ran Bar-Zik (@barzik-the-vuer) on CodePen.

אם יש export ואנו רוצים לקבל אותו, אז זה מה שהפרומיס מחזיר. למשל, הדוגמה הזו מ-MDN:

let module = await import('/modules/my-module.js');

אם התחביר של async await מאיים (והוא לא אמור) אז למשל אפשר להשתמש בו במסגרת פרומיס רגיל. למשל, אם ניקח את מודול הדוגמה שהסברתי עליו בהתחלה – משהו כזה:

import('/path/to/MyModule.js')
  .then((MyModule) => {
    const myModule = new MyModule;
    myModule.sayHello();
  });

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

זה לא פיצ׳ר מורכב, אבל זה בהחלט פיצ׳ר חשוב.

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
ES2020

תגובה אחת

  1. ינאי אדרי הגב נובמבר 10, 2019 בשעה 9:18 am

    צעד נוסף ליתור וובפאק – עכשיו רק צריך שזה ידע לעשות tree shaking 🙂

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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