My lot github.com/zhuanyongxi…

There are two common uses of export and import in ES6

  1. Named exports
  2. Default exports

Named exports

That is, every data type that needs to be exported must have a name and be imported with {}, even if there is only one data type that needs to be exported. This is a refreshing and intuitive way to write, and it’s recommended.

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}

export {sqrt, square, diag}

//------ main.js ------
import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); / / 5Copy the code

Add export directly to the declaration to omit {}

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); / / 5Copy the code

No matter how you export it, you have to import it, right{}.

Aliasing Named Imports

When variable names imported from different modules are the same

import {speak} from './cow.js'
import {speak} from './goat.js'	
Copy the code

This is obviously confusing

The right way to do it is this

import {speak as cowSpeak} from './cow.js'
import {speak as goatSpeak} from './goat.js'
Copy the code

However, when many methods need to be imported from each module, this writing method can be very tedious, long, for example

import {
  speak as cowSpeak,
  eat as cowEat,
  drink as cowDrink
} from './cow.js'

import {
  speak as goatSpeak,
  eat as goatEat,
  drink as goatDrink
} from './goat.js'

cowSpeak() // moo
cowEat() // cow eats
goatSpeak() // baa
goatDrink() // goat drinks
Copy the code

The solution is the introduction of namespaces

Namespace imports (Namespace imports)

import * as cow from './cow.js'
import * as goat from './goat.js'

cow.speak() // moo
goat.speak() // baa
Copy the code

Very simple and elegant

Default exports

The default export does not need a name, but there can only be one export default in a JS file.

//------ myFunc.js ------
export default function() {... }; //------ main1.js ------ import myFunc from'myFunc';
myFunc();
Copy the code

In fact, this export method can be regarded as a variation of naming everywhere, but the name is written as default.

Although there can only be one export default, multiple methods can be exported.

export default {
  speak () {
    return 'moo'
  },
  eat () {
    return 'cow eats'
  },
  drink () {
    return 'cow drinks'}}Copy the code

Importing is similar to importing namespaces

import cow from './default-cow.js'
import goat from './default-goat.js'

cow.speak() // moo
goat.speak() // baa
Copy the code

If we use different export methods when writing modules, we need to consider how different modules are introduced when importing them. This trouble can be eliminated by self-referencing. Methods the following

Write modules that are common to both introductions

import * as myself from './ambidextrous-cow.js' // import this file into itself

// this module's own namespace is its default export export default myself export function speak () { console.log('moo')}Copy the code

So you don’t have to worry about the way you introduce it.

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow.speak() // moo
alsocow.speak() // moo
Copy the code

Both methods of introduction are acceptable.

This method also has a small disadvantage, that is, in the module we write, there is a function that is commonly used, and we want to export it by default, but export Default has already used it, and we know that export default can only be used once in a module. Use object.assign

import * as myself from './ambidextrous-cow.js' 

export default Object.assign(speak, myself) 

export function speak () {
  console.log('moo')}Copy the code

Note that object. assign can only be used for functions.

Corresponding to the example of introduction

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow() // moo
cow.speak() // moo
alsocow.speak() // moo
Copy the code

Refer to the article

1.[es6] import, export, default cheatsheet

2. Explain the usage and difference between export import and export default in JavaScript ES6 in detail

3.ES Modules: Using named exports as the default export

4.export in MDN