Импорт функций в JavaScript - PullRequest
Новая
       11

Импорт функций в JavaScript

0 голосов
/ 01 октября 2018

При попытке использовать библиотеку GoJS я получаю "объявления об импорте могут появляться только на верхнем уровне модуля" ошибка.

main.html 

...
<script id = "code">
    import {makeNodes} from "./make_nodes.js";

    function init(){
       makeNodes(model);
       ...
    }
</script>

<body onload="init()">
...

make_nodes.js 

export function makeNodes(model){
    ...
}

1 Ответ

0 голосов
/ 01 октября 2018

Как говорит ошибка, вы не можете использовать import, кроме как в модуле.Ваш код не находится в модуле.Чтобы сделать его модулем, используйте type="module" в теге script: 

<script id = "code" type = "module">

Но , обратите внимание, что встроенная поддержка модулей в браузерах очень новый .(Кроме того, в IE это не работает и никогда не будет.) Большинство людей, использующих синтаксис import / export, все еще делают это с помощью транспортеров и / или упаковщиков (таких как Webpack или Browserifty).

Как только вы это сделаете, init больше не будет глобальным, но ваш <body onload="init()"> ожидает, что init будет глобальным.(Это одна из нескольких причин не использовать обработчики событий в стиле onxyz). Чтобы исправить это, подключите событие в своем коде, удалив атрибут onload из <body>: 

function init(){
   makeNodes(model);
   // ...
}
window.addEventListener("load", init);

Однако , событие load, которое вы используете, происходит очень, очень поздно в процессе загрузки страницы, ожидая завершения загрузки всех изображений и других ресурсов.В большинстве случаев, вам лучше запустить ваш код раньше, чем если переместить элемент script в самый конец документа, непосредственно перед закрывающим элементом </body>, а затем просто выполнитьНемедленная инициализация: 

<body>
<!-- presumably there's stuff here ... -->

<script id="code" type="module">
    import {makeNodes} from "./make_nodes.js";

    function init(){
       makeNodes(model);
       // ...
    }
    init();
</script>
</body>

В этот момент все элементы, определенные HTML-тегом над тегом script, существуют и могут использоваться.

...