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

请参阅此处的第 16.3.5 节

如前所述：

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

在后面的部分中解释了它是如何工作的。

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

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

Answer 2

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

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

那么输出是：

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

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

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