Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Импортируемая функция не определена (https://javascript.ru/forum/misc/85698-importiruemaya-funkciya-ne-opredelena.html)

borus 10.01.2024 18:07

Импортируемая функция не определена
 
Здравствуйте!

Есть вот такой маленький index.html, в котором импортируются функции из модулей:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
<body>
    <div class="container mb-5">
        <nav class="nav">
            <a href="index.html" class="nav-link">Мои дела</a>
            <a href="dad.html" class="nav-link">Дела папы</a>
            <a href="mom.html" class="nav-link">Дела мамы</a>
        </nav>
    </div>
    <div id="todo-app" class="container">
    </div>
    <script type="module">
        import { createTodoApp } from './todo-app/view.js';
        let bLocaleStorage = JSON.parse(localStorage.getItem('bLocaleStorage'));
        if(bLocaleStorage || !bLocaleStorage) {
          let {getWorkList, saveWorkList} = import('./todo-app/localmodel.js');
        }
        else {
          let {getWorkList, saveWorkList} = import('./todo-app/APImodel.js');
        }
        const owner = 'my';
        (async () =>{
          let workList = getWorkList(owner);
          createTodoApp(document.getElementById("todo-app")
            , { title: 'Мои дела',
                owner,
                workList,
                saveWorkList,
                changeWork,
                deleteWork
              }
          );
        })();

    </script>
</body>
</html>
При загрузке это страницы вижу, что ветвь с подключением функции из файла(модуля) todo-app/localmodel.js отрабатывает.
Вот содержание файла-модуля:
[JS]
//получение имеющегося списка дел:
function getWorkList(owner){
  return JSON.parse(localStorage.getItem(owner));
}

//запись нового дела
function saveWorkList(owner, works){
  localStorage.setItem(owner, JSON.stringify(works));
}

//удаление дела

//переключение статуса дела

//экспортируем методы
export { getWorkList, saveWorkList };
[/JS]

При загрузке Index.html в консоли вижу ошибку "Uncaught (in promise) ReferenceError: getWorkList is not defined" на строке
let workList = getWorkList(owner);

Почему такое происходит, скажите, пожалуйста?

MallSerg 11.01.2024 00:55

Очевидно же что "getWorkList is not defined".
На момент вызова ссылка "getWorkList" не имеет определения.

Очевидно что ответа требуют два вопроса.
Когда происходит обращение к ссылке "getWorkList" и когда происходит определение ссылки "getWorkList".

voraa 11.01.2024 09:31

Цитата:

Сообщение от borus
При загрузке Index.html в консоли вижу ошибку "Uncaught (in promise) ReferenceError: getWorkList is not defined" на строке

Читайте внимательно про динамический import.
Он возвращает промис.
К тому же ваши переменные
let {getWorkList, saveWorkList} определены только внутри блока {}
Вот так должно быть
let getWorkList, saveWorkList;
      if(bLocaleStorage || !bLocaleStorage) {
          ({getWorkList, saveWorkList} =  await import('./todo-app/localmodel.js'));
        }
        else {
          ({getWorkList, saveWorkList} = await import('./todo-app/APImodel.js'));
        }


if(bLocaleStorage || !bLocaleStorage) - очень странное условие. Всегда выполняется.

Зачем
(async () =>{
....
})();

Там вроде нет ничего асинхронного.

Все равно не определены changeWork и deleteWork

borus 11.01.2024 12:07

Спасибо всем, сдвинулся


Часовой пояс GMT +3, время: 15:37.