Сбой импорта модулей Javascript - PullRequest
Новая
       42

Сбой импорта модулей Javascript

1 голос
/ 02 июля 2019

Я пытаюсь ввести код здесь, чтобы выполнить импортированный модуль со страницы HTML. Я вижу, что это частично выполняется. Мне нужна помощь. Мои файлы кода - test.html, main.js и say.js. Эти файлы создаются ниже в том же порядке.

test.html * * 1004 

<html>
 <head>
     <script type="module" src="./main.js"></script>
 </head>
 <body onload="sayHi('Manish')">
 </body>
</html>

main.js 

import { sayHi } from './say.js';
sayHi('MK');

say.js: 

export function sayHi(user) {
alert('Hello, { $user }');}

Этот код частично выполняется

Затем после этого частичного выполнения выдает ошибку

Uncaught ReferenceError: sayHi не определено

при загрузке (test.html: 7)

Изображение ошибки показано ниже:

Это ошибка, которая говорит, что функция sayHi не распознана. Почему?

Что я здесь не так делаю?

Ответы [ 3 ]

1 голос
/ 02 июля 2019

Одной из замечательных особенностей модулей является то, что в них объявления верхнего уровня и т. Д. не создают глобальные переменные. Одна из плохих особенностей обработчиков событий в стиле onxyz заключается в том, что функции, которые вы вызываете с ними, должны быть глобальными. Ваш sayHi не является глобальным, поэтому onload="sayHi('Manish')" терпит неудачу, потому что у него нет доступа к sayHi.

Что хорошо.

Вместо этого просто вызовите функцию из main.js: 

import { sayHi } from './say.js';
sayHi('MK');
sayHi('Manish');

Поскольку скрипты модуля автоматически откладываются до конца обработки HTML, вы знаете, что этого не произойдет, пока весь HTML не будет загружен. Это покрыто отличной графикой в ​​ этом разделе спецификации , дублированной здесь:

enter image description here

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

import { sayHi } from './say.js';
sayHi('MK');
window.addEventListener("load", () => {
    sayHi('Manish');
});

Если вам нужна информация от элемента, к которому вы подключили событие, используйте традиционную функцию и получите доступ к элементу как this, или примите параметр event и используйте event.currentTarget (вы также можете использовать event.target для элемент, на который нацелено событие, которое может находиться внутри элемента, к которому вы подключили событие). Например, предположим, у вас есть: 

<button type="button" data-name="Manish" id="btn-say-hi">

вы могли бы иметь: 

import { sayHi } from './say.js';
document.getElementById("btn-say-hi").addEventListener("click", function() {
    sayHi(this.getAttribute("data-name"));
});

Также обратите внимание, что, как указал Викас Сайни, ваш say.js использует строковый литерал вместо литерала шаблона (и хотя он или она не упомянул об этом, у него также неправильный синтаксис для подстановки), поэтому вы ' Вы увидите текст Hello { $user } вместо Hello MK или Hello Manish. Либо используйте шаблонный литерал с правильной формой подстановки (${user}, а не { $user }): 

export function sayHi(user) {
    alert(`Hello, ${user}`);
}

или простая конкатенация строк: 

export function sayHi(user) {
    alert("Hello, " + user);
}
1 голос
/ 03 июля 2019

В основном моя цель состояла в том, чтобы передать какой-то параметр из HTML-скрипта в файл main.js.Я получил необходимое после того, как вы оба дали мне подсказки, особенно Викас Сайни.Предложение о добавлении прослушивателя событий в файл main.js очень помогло.Большое спасибо.Я публикую исправленные и последние файлы кода для начинающих пользователей ES6, таких как я.

Содержимое файла test.html 

<html>
<head>
    <script type="module" src="./main.js"></script>
</head>
<body>
    <input type="text" id="btn-say-hi"label="fill here" placeholder="Fill in here and click"/>
</body>
</html>

Содержимое файла main.js 

import { sayHi } from './say.js';
document.getElementById("btn-say-hi").addEventListener("click", function() {
    sayHi(this.value);
});

Содержимое файла say.js 

export function sayHi(user) { alert(`Hello, ${user}`); }

Обратите внимание: все эти файлы находятся в одной папке / папке.Я мог бы изменить значение текстового элемента и получить требуемое выполнение на основе моих входных данных.

Большое спасибо TJ Crowder и особая благодарность Vikas Saini за фрагмент кода, относящийся к добавлениюслушатель событий.Это было прекрасное предложение.

Большое спасибо, ребята.С уважением Маниш.

1 голос
/ 02 июля 2019

Классический случай строковой интерполяции

Использование 

export function sayHi(user) { alert(`Hello, ${user}`);}

Обратите внимание "вместо" или "

Ссылка https://campushippo.com/lessons/how-to-do-string-interpolation-with-javascript-7854ef9d

В случае ошибки, привязать окно для загрузки 

window.addEventListener("load", () => {
    sayHi('testing');
});
...