es6导入为只读视图理解

Question

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

// 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

答案取决于你的入口模块是什么。例如，如果你定义一个入口模块为：

// index.js
import "./main1";
import "./main2";

那么输出是：

1 // from main1
2 // from main1
2 // from main2

ES6 模块允许保持状态，但不允许直接操作其他模块状态。模块本身可以公开一个修饰函数（就像你的 increment 方法）。

如果您想尝试一下，rollupjs 有一个很好的在线演示，展示了标准导入和导出应该如何工作。

Answer 2

参见第 16.3.5 节here

如前所述：

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

//------ 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 中解释了其背后的工作原理。

作为视图导入有以下优点：

• 它们启用循环依赖，即使对于不合格的导入也是如此。
• 合格和不合格的导入工作方式相同（它们都是 间接）。
• 您可以将代码拆分为多个模块，它会 继续工作（只要您不尝试更改 进口）。