import דינמי ב-ES2020

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

פיצ׳ר מגניב במיוחד שנכנס ל-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 מסודר.

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

פוסטים נוספים שכדאי לקרוא

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

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

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

ספריות ומודולים

להתנסות ב AutoGPT

הטרנד החם בעולם ה-GPT וה-AI – הפעלת אייג׳נטים בקלות עם Auto GPT.

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