没有详细解释 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? 

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

请您参考如下方法:

见第 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 导入具有以下优点:

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

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

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