Используйте функции, определенные в модуле ES6 непосредственно в HTML - PullRequest
Новая
       5

Используйте функции, определенные в модуле ES6 непосредственно в HTML

0 голосов
/ 05 декабря 2018

Я пытаюсь выполнить довольно простую вещь: у меня есть некоторый код в файле модуля javascript, и я импортирую его в другой файл javascript (который ничего не экспортирует), и я хочу вызвать некоторые из определенных функций в этомфайл из HTML-кода напрямую.

Давайте рассмотрим некоторый репрезентативный и минимальный пример того, что со мной происходит (фактически протестировал код и дает точно такую ​​же проблему, с которой я сталкиваюсь с реальным, что на самом деле не намного больше).сложнее, чем этот):

  • module.js: 

    const mod = () => 'Hello there!';
export { mod };

  • main.js: 

    import { mod } from './module.js';

function hello()
{
    console.log(mod());
}

  • main.html: 

    <!DOCTYPE html>
<html>
    <head>
        <script type="module" src="module.js"></script>
        <script type="module" src="main.js"></script>
    </head>

    <body>
        <button name="next-button" onclick="hello()">Obi-Wan abandons the high ground to salute you</button>
    </body>
</html>

Без import (и помещением всех определений функций в один файл .js) я могу вызвать функциюпрямо из HTML.Однако, как только я представил модули, которые я больше не в состоянии: он просто говорит, что функция «hello ()» не определена.

Я совершенно новичок в модулях ES6 (и в интерфейсном javascriptна самом деле), так что я полностью осознаю, что все, что я только что сказал, это просто недостаток знаний (или понимания), но я был бы признателен за любые комментарии о том, что я делаю неправильно, и о том, как ее решить, чтобы я мог хранить свой код в разных файлах ибыть в состоянии использовать это.Спасибо всем заранее!

1 Ответ

0 голосов
/ 05 декабря 2018

Каждый модуль имеет свою область применения.Они не разделяют глобальную область видимости, как это делают "нормальные" скрипты.Это означает, что hello доступен только внутри самого модуля / файла main.js.

Если вы явно хотите создать глобальную переменную, вы можете добиться этого, создав свойство глобального объекта window: 

function hello()
{
    console.log(mod());
}
window.hello = hello;

См. Также Определение глобальной переменной в функции JavaScript

Сказав это, рекомендуется избегать глобальных переменных.Вместо этого вы можете реструктурировать HTML для загрузки модулей после создания кнопки и связать обработчик событий с помощью JavaScript: 

<!DOCTYPE html>
<html>
    <body>
        <button name="next-button">Obi-Wan abandons the high ground to salute you</button>
        <script type="module" src="module.js"></script>
        <script type="module" src="main.js"></script>
    </body>
</html>

и 

import { mod } from './module.js';

function hello()
{
    console.log(mod());
}
document.querySelector('button').addEventListener('click', hello);
...