Sintaxe do módulo de aprendizado ES6

Sintaxe do Módulo

CommonJS模块

let {
    
     readfile }  = require('fs')
# 等同于
let _fs = require('fs')
let readfile = _fs.readfile //这种加载称为“运行时加载”

Módulos ES6

import {
    
     stat, exists, readFile } from 'fs';

Esse carregamento é chamado de "carregamento em tempo de compilação" ou carregamento estático

Vários benefícios do carregamento estático

1. É mais eficiente do que carregar módulos CommonJS.
2. Ele pode ampliar ainda mais a sintaxe do JavaScript, como a introdução de funções como macro e sistema de tipos, que só podem ser realizadas por análise estática.
3. O formato do módulo não é mais necessário UMDe, no futuro, servidores e navegadores suportarão o formato do módulo ES6.
4. No futuro, novas APIs de navegadores poderão ser fornecidas em um formato de módulo e não precisarão mais ser transformadas em variáveis ​​globais ou navigatorpropriedades de objetos.
5. Não há mais necessidade de objetos como namespaces (como Mathobjetos), e no futuro essas funções podem ser fornecidas por meio de módulos.

importar()

importO comando será analisado estaticamente pelo mecanismo JavaScript e executado antes de outras instruções no módulo

importe exportos comandos só podem estar no nível superior de um módulo

Esse projeto, é claro, ajuda o compilador a melhorar a eficiência, mas também impossibilita o carregamento de módulos em tempo de execução. Sintaticamente, o carregamento condicional é impossível.

import()Função para suportar carregamento dinâmico de módulos.

Execução em tempo de execução: Ou seja, quando esta sentença for executada, o módulo especificado será carregado.

import()Retorna um objeto Promise.

import('xxx')
.then(module => {
    
    module.default})

Formulários

1. carga sob demanda
2. carregamento condicional

if(a) {
    
    import('xxx').then(({
     
     a,b,c}) =>{
    
    })}

1. Carregamento de módulo dinâmico

import(f())

import()Também pode ser usado em funções assíncronas.

modo estrito

Os módulos ES6 adotam automaticamente o modo estrito

comando de exportação

exportO comando especifica a interface externa , que deve estabelecer uma correspondência biunívoca com as variáveis ​​dentro do módulo.

// 报错
var m = 1;
export m;

Porque nenhuma interface externa é fornecida. Saída 1 diretamente. 1Apenas um valor, não uma interface.

exportOs comandos podem aparecer em qualquer lugar em um módulo, desde que estejam no nível superior do módulo. Se estiver no escopo de nível de bloco, ele relatará um erro

Por estar em um bloco de código condicional, não pode ser otimizado estaticamente

comando de importação

importAs variáveis ​​inseridas pelo comando são todas somente leitura, pois sua essência é uma interface de entrada. Ou seja, não é permitido reescrever a interface no script que carrega o módulo.

importO comando tem efeito de içamento, ele será içado até o cabeçote de todo o módulo e executado primeiro.

foo();
import {
    
     foo } from 'my_module';

O código acima não relatará um erro, porque importa execução de é anterior à foochamada de . A essência desse comportamento é que importos comandos são executados em tempo de compilação, antes que o código seja executado.

Por importser executado estaticamente, expressões e variáveis ​​não podem ser utilizadas, essas estruturas gramaticais só podem obter resultados em tempo de execução.

// 报错
import {
    
     'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import {
    
     foo } from module;

importA instrução executará o módulo carregado, portanto, pode ser escrita da seguinte maneira.

import 'lodash';

Se a mesma instrução for executada repetidamente import, ela será executada apenas uma vez, não várias vezes.

import 'lodash';
import 'lodash';

import {
    
     foo } from 'my_module';
import {
    
     bar } from 'my_module';
// 等同于
import {
    
     foo, bar } from 'my_module';

importExecutado na fase de análise estática, portanto é o primeiro executado em um módulo.

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

O carregamento geral do módulo

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

comando padrão de exportação

export defaultNa verdade, o comando apenas gera uma defaultvariável chamada , portanto, não pode ser seguida por uma instrução de declaração de variável.

// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
// 正确
export default 42;
// 报错
export 42;

Como export defaulta essência do comando é atribuir o seguinte valor à defaultvariável, você pode escrever diretamente um valor export defaultdepois dela.

Se você deseja importinserir o método padrão e outras interfaces ao mesmo tempo em uma instrução, pode escrevê-lo da seguinte maneira.

import _, {
    
     each, forEach } from 'lodash';

Escrita composta de exportação e importação

export {
    
     foo, bar } from 'my_module';

Em um módulo, primeiro insira e depois emita o mesmo módulo

fooe barnão são realmente importados para o módulo atual, mas são equivalentes a encaminhar essas duas interfaces externamente, para que o módulo atual não possa usar diretamente fooe bar.

Implementação de carregamento do módulo

eu não vi