es6 import作为只读视图的理解 [英] es6 import as a read only view understanding

问题描述

对于es6进出口到底是做什么的，没有详尽的解释.有人将导入描述为只读视图.检查以下代码:

There is no detalied explanation of what exactly es6 import and export do under the hood. Someone describe import as an read only view. Check the code below:

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

我的问题是，如果两个模块导入同一个计数器模块，并且第一个模块递增计数器，第二个模块还会看到计数器递增吗? 导入"和导出"到底是做什么的?增量函数在什么情况下执行?什么是增量函数的变量对象?

My question is if two modules import the same counter module and the first module increment the counter, will the second module also see the the counter as incremented? What under hood do the "import" and "export" do? Under what context is the increment function executing on? What is variable object of the increment function?

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

在我看来，导出"正在创建一个可以由不同模块访问的全局对象，并且正在将导出函数的上下文设置为该对象.如果是这种情况，那么设计就为我进行了布线，因为模块不知道其他模块会做什么.如果两个模块正在导入相同的模块(计数器)，则一个模块调用增量函数(上面的示例)会导致值(计数器)更改，而另一个模块则不知道.

It seems to me that the "export" is creating a global object that can be accessed by different modules and it is setting the context of the exported function to that object. If this is the case, the design is wired for me, because modules is not aware of what other modules do. If two modules are importing the same module(counter), one module calls the increment function(example above) which cause the value(counter) changed, the other module does not know that.

推荐答案

请参见第16.3.5节此处

See section 16.3.5 here

如上所述:

ES6模块的导入是有关导出实体的只读视图.这意味着与在模块主体内部声明的变量的连接将保持活动状态，如以下代码所示.

The imports of an ES6 module are read-only views on the exported entities. That means that the connections to variables declared inside module bodies remain live, as demonstrated in the following code.

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

在稍后部分中解释了该功能的工作原理. .

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

Imports as views have the following advantages:

• 即使对于不合格的进口商品，它们也可以启用循环依赖关系.
• 合格进口和不合格进口的工作方式相同(它们都是 间接).
• 您可以将代码分成多个模块，它将 继续工作(只要您不尝试更改 进口).

• They enable cyclic dependencies, even for unqualified imports.
• Qualified and unqualified imports work the same way (they are both indirections).
• You can split code into multiple modules and it will continue to work (as long as you don’t try to change the values of imports).

这篇关于es6 import作为只读视图的理解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！