Как принять значение переменной через import?

Question

[stremsky]

Экспортирую из gallery.js константу arrLength со значением 32.
Импортирую её в index.js, а в консоли - 0.
Почему?

//gallery.js
let arr = Array.from(document.querySelectorAll(".array>*"));
export const arrLength = arr.length;
console.log(arrLength); //32


//index.js
import { arrLength } from "./gallery.js";
console.log(arrLength); //0

Answer 1

[stremsky]

Разобрался.

Каждый модуль имеет свою собственную область видим...

Comments

[Алексей Уколов]

При чём тут области видимости, если вы явно экспортируете значение? Собственная область видимости означает, что вы не можете внутри index.js получить arr из gallery.js, но на arrLength это не распространяется, потому что вы его явно экспортируете (о чём написано в третьем параграфе по вашей ссылке).

[stremsky]

Алексей Уколов, да, именно это я и имею в виду. Это означает что значение переменной видно только внутри gallery.js. А в другой файл его, значение, передать нельзя. Но можно записать в localStorage, и забрать оттуда.

[Алексей Уколов]

Вот этот код должен работать, никакие отдельные области видимости ему не мешают:

export const arrLength = arr.length;
...
import { arrLength } from "./gallery.js";

То, что у вас там 0, а не undefined или какая-то ошибка говорит о том, что в момент экспорта document.querySelectorAll(".array>*") ничего не находит.

[stremsky]

Алексей Уколов, нет. Массив есть. И длина его есть. Если вы внимательно посмотрите на код в заголовке, то увидите, что в gallery.js длинна массива - 32.

//gallery.js
let arr = Array.from(document.querySelectorAll(".array>*"));
export const arrLength = arr.length;
console.log(arrLength); //32

Передать длину массива наружу через экспорт не получится. Попробуйте сами свой код. Переменную вы увидите, а вместо 32 будет 0. Потому что в области видимости index.js исходного массива нет. Будь в arrLength функция - она бы передалась. А примитив - нет.

[Алексей Уколов]

А примитив - нет.

Вот вы дали ссылку на статью - в этой статье есть пример передачи примитива.
Передача ссылки от передачи примитива отличается как раз только точкой во времени, в которой исполнится нужный код. Никакие области видимости тут ни при чём.

[Алексей Уколов]

А вот вам работающий пример в песочнице: https://plnkr.co/edit/GYSbCq2jbWUSgq0T

[stremsky]

Алексей Уколов, действительно. Вы правы.

[stremsky]

Алексей Уколов,

А вот теперь в силу вступает область видимости.
Вы привели пример где взяли массив из index.html, и в него же вернули из переменной длину массива. То есть ваша область видимости - index.html.
У меня же html-файлов два, и у каждого своя область видимости.
Так вот. Достать внутри одного файла длину массива можно, а передать её в js-файл другой страницы не получается, вернее получается передать только переменную, но не значение, потому что из другого html-файла область видимости index.html недоступна.
Я подкрутил ваш планкер до более точных исходных данных:
https://plnkr.co/edit/wLZrpqDe7oUBm6Mg

[Алексей Уколов]

И здесь области видимости ни при чём. У вас две независимые страницы с двумя независимыми разметками. В counter.html, в котором есть искомая разметка, вы подключаете только один файл из двух. А в index.html, где вы подключаете оба файла, нет нужной разметки.
Это просто две разные страницы и если вам нужно использовать на одной какие-то данные с другой, то для этого нужно использовать сервер, ajax или костыли в виде LocalStorage, как вы написали выше (но что будет, если пользователь зайдёт на страницу, использующую данные раньше, чем на ту, которая данные поставляет в LS?). Если вы опишете свою реальную задачу детальнее, мы вам можем подсказать наиболее подходящее для неё решение.
Ссылка из вашего ответа не имеет никакого отношения к вашей проблеме.

[stremsky]

Алексей Уколов, ок, попробую описать. Вот сайт: сайт.
Там две страницы: index.html и gallery.html.

На главной показывается рандомная картинка из массива картинок, где номер картинки это её номер в массиве.

function randomNumber(arr) {
    var rand = Math.floor(Math.random() * arr.length);
    return rand;
  }

  let titleImage = $(".title__img");

  function randomImage() {
    titleImage.html(
      '<img src="assets/img/gallery/' +
        randomNumber(img_array) +
        '.jpg" alt="image">'
    );
  }

Массив время от времени увеличивается, и я решил динамически получать длину массива на главной. Все картинки массива выводятся в gallery.html, там получаю длину массива, и загоняю в index.html.

let arrLength = localStorage.getItem("arr");
  let img_array = [];
  img_array.length = arrLength;

Поскольку в бэк я не умею, то решил попробовать обойтись средствами браузера.
Думал что import/export мне помогут, но нет.

Вот такая ситуация.

[Алексей Уколов]

Если делать без бэка, как учебное решение навыброс, то самый разумный вариант - это с index.html делать ajax-запрос к галерее, получать её HTML, выбирать из него все картинки и брать случайную.