Динамикалык импорт

Динамикалык импорт

 

Мурунку бөлүмдө талкуулаган экспорттук жана импорттук билдирүүлөр "статикалык" деп аталат. Алардын синтаксиси абдан жөнөкөй жана катаал.

Биринчиден, биз динамикалык параметрлердин эч бирин орното албайбыз import.

Модуль жолу сап примитив болушу керек жана функциянын чалуусу боло албайт. Бул кандай иштебейт:

@A@import ... from getModuleName(); // Ошибка, должна быть строка@A@

Экинчиден, биз шарттуу же аткарылуучу импортту жасай албайбыз.

@A@if(...) {
  import ...; // Ошибка, запрещено
}

{
  import ...; // Ошибка, мы не можем ставить импорт в блок
}@A@

import/exportМунун баары директивалардын максаты коддук структуранын негизин түзүү экендигинин натыйжасы . Алардын жардамы менен аны талдап чыгууга болот, модулдарды атайын шаймандар менен бир файлга чогултууга жана пайдаланылбаган экспортту алып салууга болот. Бул бардык нерсе статикалык болгондуктан гана мүмкүн.

Бирок суроо-талап боюнча модулду динамикалык түрдө кантип импорттосок болот?

import() билдирүүсү

Бул туюнтма import(module)модулду жүктөйт жана анын бардык экспортторун камтыган модулдун объектисине алып келген убаданы кайтарат.

Биз аны коддун каалаган жеринде динамикалык түрдө колдоно алабыз, мисалы:

@A@let modulePath = prompt("Какой модуль загружать?");

import(modulePath)
  .then(obj => <объект модуля>)
  .catch(err => <ошибка загрузки, например если нет такого модуля>)@A@

Же асинхрондук функциянын ичинде болсо, анда let module = await import(modulePath).

Мисалы, бизде мындай модул бар болсо say.js:

@A@// 📁 say.js
export function hi() {
  alert(`Привет`);
}

export function bye() {
  alert(`Пока`);
}@A@

...Анда динамикалык импорт төмөнкүдөй болушу мүмкүн:

@A@let {hi, bye} = await import('./say.js');

hi();
bye();@A@

Ал эми say.jsдемейки экспорт көрсөтүлгөн болсо:

@A@// 📁 say.js
export default function() {
  alert("Module loaded (export default)!");
}@A@

default...Андан кийин ага жетүү үчүн модулдун объектинин касиетин алышыбыз керек :

@A@let obj = await import('./say.js');
let say = obj.default;
// или, одной строкой: let {default: say} = await import('./say.js');

say();@A@

Бул жерде толук мисал:

Жыйынтык
say.js
index.html
 
@A@<!doctype html>
<script>
  async function load() {
    let say = await import('./say.js');
    say.hi(); // Привет!
    say.bye(); // Пока!
    say.default(); // Модуль загружен (экспорт по умолчанию)!
  }
</script>
<button onclick="load()">Нажми меня</button>@A@
Эскертүү боюнча:

Динамикалык импорт кадимки скрипттерде иштейт, ал талап кылбайт script type="module".