es6 importowanie jako tylko do odczytu zobacz zrozumienie

Question

Nie ma szczegółowego wyjaśnienia, co dokładnie es6 importuje i eksportuje pod maską. Ktoś opisuje import jako widok tylko do odczytu. Sprawdź kod poniżej:

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

Moje pytanie brzmi, czy dwa moduły importować ten sam moduł licznika i pierwszy moduł zwiększamy licznik, będzie drugi moduł zobaczyć również jako licznik zwiększany? Co pod maską robią "import" i "eksport"? W jakim kontekście wykonywana jest funkcja przyrostu? Czym jest obiekt zmienny funkcji increment?

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

Wydaje mi się, że „eksport” jest stworzenie globalnego obiektu, który można uzyskać dostęp za pomocą różnych modułów i wyznacza kontekst eksportowanego funkcję do tego obiektu. Jeśli tak jest, projekt jest dla mnie okablowany, ponieważ moduły nie wiedzą, co robią inne moduły. Jeżeli dwa moduły importują ten sam moduł (licznik), jeden moduł wywołuje funkcję przyrostu (przykład powyżej), który powoduje zmianę wartości (licznik), drugi moduł tego nie zna.

Answer 1

Odpowiedź zależy od tego, jaki jest twój moduł wejścia. Na przykład, jeśli zdefiniujesz moduł wejścia jak:

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

to wyjście jest:

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

ES6 moduły są dozwolone stan wstrzymania, ale nie mogą bezpośrednio manipulować stan inne moduły. Sam moduł może eksponować funkcję modyfikatora (taką jak Twoja metoda increment).

Jeśli chcesz trochę poeksperymentować, rollupjs ma ładne demo online, które pokazuje, jak powinien działać standardowy import i eksport.

Answer 2

Patrz rozdział 16.3.5 here

Jak wspomniano:

Przywóz modułu ES6 są tylko do odczytu poglądy na eksportowanych podmiotów. Oznacza to, że połączenia z zmiennymi zadeklarowanymi w treściach modułów pozostają aktywne, co zostało przedstawione w poniższym kodzie.

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

Sposób działania pod maską jest wyjaśniony w later section.

Imports jako poglądy mają następujące zalety:

• umożliwiają zależności cyklicznych, nawet import niewykwalifikowane.
• Kwalifikowany i niewykwalifikowany import działa w ten sam sposób (oba są zarówno pośrednie, jak i ).
• Możesz podzielić kod na kilka modułów i będzie on działał (o ile nie próbujesz zmienić wartości importów ).