Понимание выполнения кода с модулями ES6

Вопросы указаны внизу

Я довольно давно использую Webpack для своих производственных сборок React.

Меня заинтересовали модули ES6, о разделении и исполнении кода.

Итак, я придумал следующий тестовый код, чтобы понять поведение модулей.

Код помещается в папку src. Webpack связывает код, а затем bundle.js запускается с node ./dist/bundle.js в терминале.

Код:

./src/index.js

import node1 from "./node1";   
import node2 from "./node2";

function part() {
  node1();
  node2();
}

part();

./src/node1.js

import test, { x } from "./test";

function node1() {
  console.info("node1", x, new Date().getTime());
  test();
  console.info("node1", x, new Date().getTime());
}

export default node1;

./src/node2.js

import test, { x } from "./test";

function node2() {
  console.info("node2", x, new Date().getTime());
  test();
  console.info("node2", x, new Date().getTime());
}

export default node2;

./src/test.js

let x = 1;
console.info(x, new Date().getTime());

function test() {
 console.info(
  "This is test for understanding dependency graph",
  x++,
  new Date().getTime()
 );
}

export default test;

export { x };

Результат выполнения

Понимание выполнения кода с модулями ES6

Вопрос: Я ожидаю, что экспортированное значение x останется постоянным. Почему это не?

Вопрос: Отображается ли поведение во время выполнения из-за связывания webpack или другой неотъемлемой части спецификации import\export модулей ES6?

Почему вы ожидаете, что x останется постоянным, когда функция test() явно увеличивает его?

Pointy 27.05.2018 14:45

Итак, я пытаюсь понять поведение, модули определяют объем переменных. Я ожидал, что экспортированное значение x останется постоянным, поскольку test определен в области видимости, он должен иметь доступ к переменной из-за закрытия. Существует огромная вероятность того, что то, что я спрашиваю, совершенно неверно, но я не могу разобраться в импорте и экспорте.

nirbhaygp 27.05.2018 14:49

Я ожидаю, что мой экспорт будет статичным

nirbhaygp 27.05.2018 14:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
212
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. В модуле ES6 значение экспорта - это не реальное значение, а неизменная привязка. Простая установка x в node1.j является неизменной ссылкой на x в test.js.
  2. Это дизайн модуля ES6

Подробнее читайте здесь: http://2ality.com/2015/07/es6-module-exports.html

immutable reference как термин объясняет все поведение
nirbhaygp 27.05.2018 15:28

Другие вопросы по теме