ecmascript-6 - es6导入为只读 View 理解

Question

没有详细解释 es6 导入和导出到底做了什么。有人将导入描述为只读 View 。检查下面的代码:

// lib/counter.js
export let counter = 1;

export function increment() {
  counter++;
}

export function decrement() {
  counter--;
}


// src/main.js
import * as counter from '../../counter';

console.log(counter.counter); // 1
counter.increment();
console..log(counter.counter); // 2

我的问题是，如果两个模块导入相同的计数器模块并且第一个模块增加计数器，第二个模块也会看到计数器增加吗？ “导入”和“导出”在幕后做了什么？增量函数在什么环境下执行？增量函数的变量对象是什么？

// lib/counter.js
export let counter = 1;

export function increment() {
  counter++;
}

export function decrement() {
  counter--;
}


// src/main1.js
import * as counter from '../../counter';

console.log(counter.counter); // 1
counter.increment();
console..log(counter.counter); // 2


// src/main2.js
import * as counter from '../../counter';
console.log(counter.counter); // what is the result of this, 1 or 2?

在我看来，“导出”正在创建一个可由不同模块访问的全局对象，并将导出函数的上下文设置为该对象。如果是这种情况，那么设计对我来说是有线的，因为模块不知道其他模块在做什么。如果两个模块正在导入同一个模块(计数器)，一个模块调用增量函数(上面的示例)导致值(计数器)改变，另一个模块不知道。

Answer 1

见第 16.3.5 节 here

如前所述:

ES6 模块的导入是导出实体的只读 View 。这意味着与模块主体内声明的变量的连接仍然有效，如下面的代码所示。

//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}

//------ main.js ------
import { counter, incCounter } from './lib';

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4

later section 中解释了它是如何工作的。 .

作为 View 导入具有以下优点:

它们启用循环依赖，即使对于不合格的导入也是如此。

合格和不合格的进口产品的工作方式相同(它们都是
间接)。

您可以将代码拆分为多个模块，它会
继续工作(只要您不尝试更改
进口)。