Импорти динамикии модулҳои ES дар JavaScript

Модулҳои ES-ро метавон ба таври динамикӣ ворид кард. Ин имконият баъзан судманд аст. Биёед бубинем, ки ин чӣ тавр анҷом дода мешавад. Бигзор мо модули зеринро дошта бошем:

src/test.jsexport function func1() {
  return '1'
}
export function func2() {
  return '2'
}
export default function() {
  return 'text';
};

Бигзор мо мехоҳем ин модулро дар ҳол, ки баъзе рӯйдодҳо рӯй диҳанд, масалан, бо клик кардан ба тугма ворид кунем:

src/index.jsbtn.addEventListener('click', function() {
  
});

Модулро бо ёрии фармони import ворид кунем:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js');
});

Фармони import бо натиҷаи худ промис бармегардонад:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    
  });
});

Ба тағирёбандаи коллбэк объект бо функсияҳои экспортшуда меафтад:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    let res1 = mod.func1();
    let res2 = mod.func2();
    
    console.log(res1, res2);
  });
});

Он чизе, ки ба таври пешфарз экспорт мешавад, дар калиди default ҷойгир хоҳад буд:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    let dfn = mod.default;
    console.log(dfn);
  });
});

Метавонад деструктуризатсияро иҷро кард дар вақти воридот:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(({func1, func2}) => {
    let res1 = func1();
    let res2 = func2();
    
    console.log(res1, res2);
  });
});